Hi guys,
I am following this datatable tutorial here
https://datatables.net/examples/api/row_details.html
I have the data.txt add to the app so I am getting the data.
td.details-control {
background: url('details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('details_close.png') no-repeat center center;
}
Archive.zip (13.3 KB)
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
btnGetData.onclick=function(){
$("#dtExample").dataTable().fnDestroy();
$('#dtExample').empty();
var table = $('#dtExample').DataTable( {
"ajax": "data.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#dtExample tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} ;
The child row does not appear as expected.
The only difference I can see between the 2 apps is I have to use
$("#dtExample").dataTable().fnDestroy();
$('#dtExample').empty();
because I get an error stating can’t re-initialise datatable.
Cheers
Steve Warby
They have just answered in the datatable.net forum.
The issue appears to be I don’t have a footer in my datatable.
Where can I buy and what tools do I need to install one???
Cheers
Steve Warby
I know have this code:
$("#DataTable1").append(
$('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));
$('#DataTable1 tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" class = "searchEdit" placeholder="Search '+title+'" />' );
} );
$('#DataTable1').DataTable().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
console.log(that.search);
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
I get the edits but when i type I get zero results.
update at getDataTest
From the datatables forum
I think the problem is your code is placing the tfoot below the tbody which I believe is not proper HTML format. You can inspect the footer to see where it is placed. The placement seems to affect how the input event works.
I copied your code to this test case:
Sample of the bin:
Open the console then type in one of the columns. You will see what you typed is output 6 times, one for each column. The search is iterating over each column not just the one you are typing in.
This example is the same code except the footer is in the HTML and the code to append the footer is commented.
Sample of the bin:
Now typing in the column outputs once in the console and the search works just for that column.
I’m not sure how to programmatically place the footer in the proper place. Maybe SO will have the answer or someone on this forum.
I also tried adding a header and got the same problem
Are we missing footers & headers in NSBasics implementation ?
Cheers
Steve Warby
ghenne
November 15, 2017, 3:51pm
5
Footers require some extra code modules.
You’ll need to add these files to your manifest:
fixedHeader.bootstrap.min.css
dataTables.fixedHeader.min.js
You’ll need to add this to systemheaders:
<link rel="stylesheet" href="fixedHeader.bootstrap.min.css"/>
<script src="dataTables.fixedHeader.min.js"></script>
You can get the files here:https://datatables.net/download/index
I have dragged the 2 files into my project.
I have added
<link rel="stylesheet" href="fixedHeader.bootstrap.min.css"/>
<script src="dataTables.fixedHeader.min.js"></script>
to extra headers.
Is this correct ?
I still have the same issue.
http://toolfolks.com/getTest/
button add footer
code is now
var table = $('#DataTable1').DataTable();
$("#DataTable1").append(
$('<tfoot/>').append( $("#DataTable1 thead tr").clone() ));
$('#DataTable1 tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
console.log(this.value);
}
} );
} );
Am I doing something dumb here ?
Hi ,
I am still struggling with this guys.
I am getting conflicting info on the subject.
In this post
FixedHeader has nothing to do with adding search inputs to the footer. FixedHeader allows the header to stay at the top of the scrolling window:https://datatables.net/extensions/fixedheader/
And you are getting this error when trying to load it:http://toolfolks.com/getTest/dataTables.fixedHeader.min.js 404 (Not Found)
So, unless you want that feature you don’t need to load it.
I think the issue is I don’t have a footer as the code I run puts the edits in a new row in the table.
Steve Warby