Individual column searching (text inputs)

tjakob

I need help adding an API Individual column searching (text inputs)
I have Server-side processing with code

function format ( d ) {
    return 'email: <i>'+d.user_email+'</i><br>Locator:<b> '+d.user_loc+'</b><br>'+
        'IP: '+d.user_ip+'<br>'+
        '';
}
 
$(document).ready(function() {
    var dt = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/scripts/ids-objects.php",
        "columns": [
            {
                "class":          "details-control",
                "orderable":      true,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "user_aim" },
            { "data": "user_imie" },
            { "data": "user_location" },
            { "data": "user_ip" }
        ],
        "order": [[1, 'asc']]
    } );
 
    // Array to track the ids of the details displayed rows
    var detailRows = [];
 
    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();
 
            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );
 
    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

If I add an API script at the end, I get an error code.
I am a beginner and I am asking for a solution.

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown: DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
Description of problem:

kthorngren

Did you read the troubleshooting information at the link provided?
http://datatables.net/tn/3

Doesn't look like you are showing the code you added to cause the error. My guess is you tried a separate Datatables initialization causing the error. You will want to combine the -initComplete function at the end of your current init code as described in the single initialization section. Something like this:

    var dt = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/scripts/ids-objects.php",
        "columns": [
            {
                "class":          "details-control",
                "orderable":      true,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "user_aim" },
            { "data": "user_imie" },
            { "data": "user_location" },
            { "data": "user_ip" }
        ],
        "order": [[1, 'asc']],  // make sure to place this comma
        initComplete: function () {
          // Add column search code
        }
    } );

Kevin

tjakob

Thank You Kevin!