Datatable adding edits not working


#1

Hi guys,
App attached

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.
On the form I have added style

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


#2

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


#3

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 http://toolfolks.com/getTest/


#4

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:

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.

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


#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


#6

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 ?


#7

Hi ,

I am still struggling with this guys.
One minor issue is if I add
fixedHeader.bootstrap.min.css I cant run the app. Replace with fixedHeader.bootstrap.min.css and the problem goes away.

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:
GET 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.
Are the footers off in NSBasic ??
Cheers

Steve Warby