CODEWITHSUNDEEP
jquerydatatables
Kiran Kumar
Kiran Kumar

Reputation: 1600

Two Jquery Datatables with same class not working properly

I have two Jquery datatables with same class names. The search functionality is working in one table and not in the other one. Please review my code and provide suggestions to make that work.

Jquery

$('.dataTable th.searchClass').each( function () {
        var title= $(this).text();
        $(this).append( '<br/><input type="text" class="searchClassIcon" placeholder="Search '+title+'" />' );
    });

/*applying dataTable*/
     var table=$('.tab-section table.dataTable').DataTable({
            "bJQueryUI": true,
             "bSort": false,
            "sPaginationType": "full_numbers",
            "bPaginate":false,
            "bFilter":true,
            "sType":"string"

        });

// Apply the search
        table.columns().eq(0).each( function ( colIdx ) {
        $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
            //console.log("search");
            table.column( colIdx ).search( this.value ).draw();
        } );

Upvotes: 0

Views: 729

Answers (2)

Viswanath Donthi
Viswanath Donthi

Reputation: 1821

All you need to do is to differentiate between two datatables. Instead using class, use specific id attribute for your tables. And, by using id attribute you can call its corresponding search functionality.

Upvotes: 1

Rob Wood
Rob Wood

Reputation: 415

You're applying the dataTable function to multiple elements and assigning those multiple elements to the variable "table." So your search function is gonna need to specify which table it's looking at, or it'll default to the first one.

The best way I can think of would be to apply your event without using the table variable, and then use $(this).parents('table').dataTable() inside the event to reference the specific table being accessed.

Upvotes: 1

Related Questions