Search code examples
javajquerydatatableserver-side

Perform searcing on every column using serverside dataTable


I am using server side dataTable , I want to know how can I enable search on every column(some column contains select box). I was referring http://legacy.datatables.net/ref link, here I saw aoSearchCols can be used for searching, but it is not working my current script is

     $(document).ready(function() {
      $('#LogTable').dataTable({
        "bFilter": true,
        "bSort": true, 
        "bProcessing" : false,
        bServerSide : true,
        sAjaxSource : "./Log!List.action",
        sServerMethod : "POST",
        "columns": [
            { "data": "LogId" },
            { "data": "tableName" },
            { "data": "columnName" },
            { "data": "oldValue" },
            { "data": "newValue" },
            { "data": "changeTypeText" },
            { "data": "changedByName" },
            { "data": "changedOn" },
        ],
        "aoSearchCols": [
            { "data": "LogId" },
            { "data": "tableName" },
            { "data": "columnName" },
            { "data": "oldValue" },
            { "data": "newValue" },
            { "data": "changeTypeText" },
            { "data": "changedByName" },
            { "data": "changedOn" },
        ]
    });
});

do anyone know how this can be done

Things i am using: JQuery datatable and Java Struts 2
---EDIT---
i tried to put manually then its not taking it with the params

   initComplete : function() {
        var r = $('#LogTableSearch tr');
        var i=0;
        r.find('td').each(function() {
            $(this).attr('id','sSearch_'+i++);
       });
    $('#LogTable tfoot').append(r);
    $('#sSearch_0').css('text-align', 'center');
   },

it showed the search box in the fotter of the table but on ajax request its not taking it with request


Solution

  • after lots of researched i finally got a way that works, i don't know its the right way or not but this works for me This is my script:

    <script>
        $(document).ready(function() {
           var table =  $('#LogTable').DataTable({
                "bSort" : true,
                "bProcessing" : false,
                "bInfo" : true,
                bServerSide : true,
                sAjaxSource : "./Log!List.action",
                sServerMethod : "POST",
                "aoColumns" : [ 
                    {"data" : "LogId"}, 
                    {"data" : "tableName"}, 
                    {"data" : "columnName"}, 
                    {"data" : "oldValue"}, 
                    {"data" : "newValue"}, 
                    {"data" : "changeTypeText"}, 
                    {"data" : "changedByName"}, 
                    {"data" : "changedOn"}, ],
            });
            // Apply the search
            table.columns().every( function () {
                var that = this;
                $('input', this.footer() ).on( 'keyup change', function () {
                    that
                        .search( this.value )
                        .draw();
                } );
                $( 'select', this.footer() ).on( 'keyup change', function () {
                    that
                        .search( this.value )
                        .draw();
                } );
            } );
        });
    </script>
    

    i created my search fields manually in the tfoot tag of the table

    now search parameter goes to server side where i got them from the request and my work is done. :)