CODEWITHSUNDEEP
jqueryjquery-pluginsdatatables
Fred O'Hara
Fred O'Hara

Reputation: 11

Data Tables: columnDefs not applying to column searches

I have a data table with a column by column search as well as the default search. I've applied columnDefs to recognize a column as number formatted, but it is not applying to the column searches, only the default. How do I include these columDefs for the column by column search inputs?

My Data Table Code:

    j$ = jQuery.noConflict();

    // Data Tables code
    j$(document).ready(function(){

        // Setup - add a text input to each footer cell
        j$('#myTable tfoot th').each( function () {
            var title = j$(this).text();
            j$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );

        var dtResults = recordBuild();
        console.log(dtResults);
        var table = j$('#myTable').DataTable( {
            pageLength: 10,
            scrollX: true,
            data: dtResults,
            columns: [
                {data: 'Renewal_Name',
                defaultContent: ''},
                {data: 'Renewal_Status__c',
                defaultContent: ''},
                {data: 'Renewal_Manufacturer_Name',
                defaultContent: ''},
                {data: 'Master_Vendor__c',
                defaultContent: ''},
                {...}
            ],

            columnDefs: [
                {type: 'num-fmt', targets: [10,17]}
            ],

            buttons: [
                'excelHtml5'
            ],

            dom: 'Bfrtip',

            initComplete: function(settings, json) {
                j$('div.loading').remove();
            }
        });

        // Apply the filter
        table.columns().every( function () {
            var column = this;

            j$( 'input', this.footer() ).on( 'keyup change', function () {
                column
                    .search( this.value )
                    .draw();
            });
        });

Per the example on data tables website, I've sandwiched the Data Table initialization with a 'setup' and 'apply' section.

I've confirmed the columnDefs work as expected when utilizing the default search. Is there a way to apply columnDefs to the inputs created here?

Upvotes: 1

Views: 471

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

Try this...

// Setup - add a text input to each footer cell
j$('#myTable tfoot th').each( function () {
    var title = j$(this).text();
    j$(this).html( '<input type="text" class="myCustomSearch" placeholder="Search '+title+'" />' );     // Added a class here
} );

Then add this:

$(".myCustomSearch").on("keyup",function(){
    $("#[*YOUR TABLE ID*]_filter").find("input").val( $(this).val() );
});

It will "forward" your keyboard inputs to the datatable search field.
If you dont want the user to see this "copy effect", set #[*YOUR TABLE ID*]_filter to display:none.

This, of course... will search the whole table... Not only a specific column. ;)

Upvotes: 0

Related Questions