enable search option dynamically ?

ankush02

Hi Thanks for great product.
I am using https://datatables.net/examples/data_sources/js_array.html version and want to know if we can add Search box to the table as I dont have tfoot ah as html markup.I am generating table dynamically.

want to do like this for each column :https://datatables.net/examples/api/multi_filter.html

            var report = $("#report").DataTable({
                "data": RList,
                "lengthMenu": [
                    [25, 50, -1],
                    [25, 50, "All"]
                ],
                "scrollY": "800px",
                "scrollX": "900px",
                "scrollCollapse": true,
                "dom": '<"top"Bf>rt<"bottom"lip><"clear">',
                "buttons": [{
                    "extend": "collection",
                    "text": "Export",
                    "buttons": ["excelHtml5"]
                }],
                "columns": ColReport
            });

allan

If you don't want the search inputs in a footer element, then yes, you can still use that approach. You'd just insert the filters wherever it is that you want them.

Allan

ankush02

Thnanks for quick reply but could you please direct me to some link?
I need search input box appear for each dynamically generated column.its ok if its on top or footer..i need it for each column....can this be configured at "columns": ColReport level or anything else need to be done..please advice

allan

If you do want it in the footer, your best bet is to create a footer in the table before you initialise the DataTable:

var row = $('#myTable thead tr').clone();
$('#myTable').append( $('<tfoot/>').append( row ) );

Allan

ankush02

I have added like below and it manage to get search bar, but the moment i type anything for search, it always shows zero result . and it did this very fast.
also footer gets disappear after search....unlike in demo where it stays..

 var rreport = $("#rreport ").DataTable({
     "data": RList,
     "lengthMenu": [
         [25, 50, -1],
         [25, 50, "All"]
     ],
     "scrollY": "800px",
     "scrollX": "900px",
     "scrollCollapse": true,
     "dom": '<"top"Bf>rt<"bottom"lip><"clear">',
     "buttons": [{
         "extend": "collection",
         "text": "Export",
         "buttons": ["excelHtml5"]
     }],
     "columns": ColReport
 });
 var row = $('#rreport thead tr').clone();
 $('#rreport ').append($('<tfoot/>').append(row));


 $('#rreport tfoot th').each(function() {
     var title = $(this).text();
     $(this).html('<input type="text" placeholder="Search ' + title + '" />');
 });


 // Apply the search
 rreport .columns().every(function() {
     var that = this;

     $('input', this.footer()).on('keyup change', function() {
         if (that.search() !== this.value) {
             that
                 .search(this.value)
                 .draw();
         }
     });
 });

ankush02

this seems to be issue search box coming inside table..what I am doing wrng..

kthorngren

As Allan suggested you need to put these two lines before you initialize Datatables:

var row = $('#rreport thead tr').clone();
$('#rreport ').append($('<tfoot/>').append(row));

Kevin

ankush02

Hi Kevin ..Earlier I did that only but if I use these two line before initialization than search box at bottom wont appear, hence i added after initialization...

i have following markup in html

 <table id="rreport " class="table table-striped table-bordered" cellspacing="0" width="100%">

        </table>

kthorngren

Take a look at this example:
http://live.datatables.net/gojebeco/1/edit

Currently its built with your code on a pre-existing table. Open the console and when you perform a column search you see the word "search" output 6 times; one for each column.

If you comment the two lines in question and remove the comments from the first two lines and do the same test you will see the search works. Did this just to show you that the footer needs to be built before Datatables initialization.

Now the question is how you can use the data in ColReport to build the header and footer before initializing Datatables. Can you loop through ColReport and pull you the column title or data values to build the thead?

Kevin

ankush02

     ColReport.forEach( function (arrayItem)
            {
               var x = arrayItem.data;
                strth=strth+"<th>"+x+"</th>";
           });
            
            var myTable = $("#roomreport");
            $("<thead><tr>"+strth+"</tr></thead>").appendTo(myTable);
            
            var row = $('#roomreport thead tr').clone();
            $('#roomreport').append( $('<tfoot/>').append( row ) );
            
                    
            $('#roomreport tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
            
            var roomreport = $("#roomreport").DataTable({
                "data": RoomList,
                "lengthMenu": [
                    [25, 50, -1],
                    [25, 50, "All"]
                ],
                "scrollY": "800px",
                "scrollX": "900px",
                "scrollCollapse": true,
                "dom": '<"top"Bf>rt<"bottom"lip><"clear">',
                "buttons": [{
                    "extend": "collection",
                    "text": "Export",
                    "buttons": ["excelHtml5"]
                }],
                "columns": ColReport
            });
             
     
            // Apply the search
    roomreport.columns().every( function () {
        var that = this;
 
        $( 'input', that.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
            

This worked .Thanks Guys!!