Jquery Datatables expand row and get detail via Ajax

Question

Is it possible to get the detail for each row through Ajax? I found a starting point here: http://datatables.net/release-datatables/examples/api/row_details.html but it doesn't use ajax. I'm thinking about modifying fnFormatDetails() function and place the ajax call there. But i'm looking for another better answer.

Thanks.

score 1 · Accepted Answer · edited Feb 17 '16 at 16:15

It's very simple. All you have to do is put your details in a separate field within the "data" array:

E.g. your JSON might look like as follows:

{
    "draw": "${drawId}",
    "recordsTotal": "${totalRecords}",
    "recordsFiltered": "${filteredRecords}",
    "data": [
       {            
          "empName": "${employee.name}",
          "empNumber": "${employee.number}",
          "empEmail": "${employee.email}",
          "extraDetails" : [
             ["${employee.salary}", "${employee.title}"]    
          ]
       }
    ]
}

Then in your javascript, you can simply access this extra details by using JavaScript arrays. E.g.

var row = employeeTable.row( tr );
var rowData = row.data();
alert(rowData.extraDetails[0][0]);
alert(rowData.extraDetails[0][1]);

score 0 · Answer 2 · answered Mar 10 '14 at 12:49

0

You need not to go for ajax if you have the data in your row.

Try oTable.fnGetData(rowIndexor|trNode)

answered Mar 10 '14 at 12:49

Shovan

185
7

score 0 · Answer 3 · answered Nov 21 '18 at 23:51

you can try this and it will work.

First: create your datatable.

var table = $('#myTable').DataTable( {
    ajax: '/api/staff',
    columns: [
     {
        className:      'details-control',
        orderable:      false,
        data:           null,
        defaultContent: ''
     },
     { data: "name" },
     { data: "position" },
     { data: "office" },
     { data: "salary" }
 ],
 order: [[1, 'asc']]  } );

Second: Event handlers

$('#myTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );

if ( row.child.isShown() ) {
    row.child.hide();
    tr.removeClass('shown');
}
else {
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
} } );

Third: Ajax request and formatting the response

function format ( rowData ) {
var div = $('<div/>')
    .addClass( 'loading' )
    .text( 'Loading...' );

$.ajax( {
    url: '/api/staff/details',
    data: {
        name: rowData.name
    },
    dataType: 'json',
    success: function ( json ) {
        div
            .html( json.html )
            .removeClass( 'loading' );
    }
} );

return div; }

you can pass any row argument to format method.

Check This For More Details

Jquery Datatables expand row and get detail via Ajax

3 Answers3