Why doesn't the title attribute of a column header get copied into the default child row
Why doesn't the title attribute of a column header get copied into the default child row
nikkilocke
Posts: 1Questions: 1Answers: 0
I have the following code - there are title attributes over each column heading, so that you can read them on mouse hover.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script>
function drawInput(data, type, row, meta) {
return '<input id="r' + meta.row + 'c' + meta.col + '" val="' + data + '"></input>';
}
var data = [ { c1: 'r1c1', c2: 'r1c2', c3: 'r1c3' }, { c1: 'r2c1', c2: 'r2c2', c3: 'r2c3' }];
$(function() {
var table = $('table').dataTable({
info: false,
searching: false,
ordering: false,
paging: false,
columns: [
{
defaultContent: '<span></span>'
},
{
data: 'c1',
name: 'c1',
defaultContent: '<input></input>',
render: drawInput
},
{
data: 'c2',
name: 'c2',
defaultContent: '<input></input>',
render: drawInput
},
{
data: 'c3',
name: 'c3',
defaultContent: '<input></input>',
render: drawInput
}
]
});
table.api().rows.add(data);
table.api().draw();
$('body').on('change', 'table :input', function(e) {
// Find the row that contains the input field
console.log(this);
var r = $(this).closest('tr');
while(r.hasClass('child'))
r = r.prev();
var row = table.api().row(r);
// Show the row index - result is undefined! Why?
console.log(row.index());
});
});
</script>
</head>
<body>
<table width="100%" class="responsive">
<thead>
<tr>
<th></th>
<th title="Column 1">Col 1</th>
<th title="Column 2">Col 2</th>
<th title="Column 3">Col 3</th>
</tr>
</thead>
<tbody>
</table>
</body>
</html>
If I make the window narrow, I would expect those title attributes to be copied into the child input form headings, but they are not.
Is there an easy way I can fix this in my code?
Answers
Apologies for the delay in the reply, the spam filter grabbed your message incorrectly.
This example from this thread is demonstrating just that. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update that example, or link to your page, so that we can see the problem.
Colin