Search in child rows Ajax

ryzac

I have been looking for a way to be able to search child records.
I found the discussion: https://datatables.net/forums/discussion/comment/146511/#Comment_146511.
I understand Kevin's point about initializing the child data when the parent table loads, just not sure how to implement this in my code. Any help would be appreciated.

Parent Table Intilalize:

var details = [];
var template = Handlebars.compile($("#details-template").html());
var table = $('#potable').DataTable({
    "processing": true,
    "serverside": true,
    "ajax": "{{ route('api.orders.search') }}",
    "lengthMenu": [ 15, 25, 50, 75, 100 ],
    "order": [[11, "asc"],[10, "asc"],[ 9, "asc"],[6, "desc"]],
    "rowCallback": function( row, data, index){

   etc....

Opening Child Table:

//-----------------My Original Open Child Code----------------------------
// Add event listener for opening and closing details
    $('#potable tbody').on('click', 'td.details-control', function () {
// Working Code --
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    var tableId = 'details-' + row.data().id;
    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(template(row.data())).show();
            initTable(tableId, row.data());
            tr.addClass('shown');
            tr.next().find('td').addClass('no-padding bg-gray');
        }
    });
//---------------------------------------------------------------------

Child Table:

//----------------My child table-------------------------------------
function initTable(tableId, data) {
    $('#' + tableId).DataTable({
    processing: true,
    serverSide: true,
    ajax: data.details_url,
    "rowCallback": function( row, data, index){
        if(data.quantity_received < data.quantity){
            $(row).addClass('orangeClass');
        }
    },
        columns: [
            { width:'10%', data: 'quantity', name: 'quantity' },
            { data: 'product_number', name: 'product_number' },
            { data: 'supplier_number', name: 'supplier_number' },
            { data: 'description', name: 'description' },
            { data: 'cost', name: 'cost' },
            { data: 'project_wrk', name: 'project_wrk' },
            { width:'10%', data: 'quantity_received', name: 'quantity_received' }
        ]
    })
}
//-----------------------------------------------------------------------

colin

Child rows aren't include in any searches as DataTables doesn't know anything about them, the format and content is entirely down to the developer. Kevin made this comment in the thread you linked to:

The easiest way to use the default search input is to place the child data in hidden columns.

That seems the best way to progress that. In your column list, have an additional one which is invisible (columns.visible), and when you set your child row data, also add it to that cell too (row().data())

Colin

ryzac

At the moment my child data is set when the parent row is opened to show the details. How can I set/call the child data at the same time as the parent table?

kthorngren

You can do something like the final code snippet in this thread. It would be best to place the code in initComplate.

Kevin