Complicated
Complicated

Reputation: 117

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

Upvotes: 0

Views: 938

Answers (2)

Complicated
Complicated

Reputation: 117

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. :)

Upvotes: 0

stackada
stackada

Reputation: 414

according to the document

     $(document).ready( function() {
         $('#example').dataTable( {
           "aoSearchCols": [
             null,
             { "sSearch": "My filter" },
             null,
             { "sSearch": "^[0-9]", "bEscapeRegex": false }
,null,
null,
null,
null
           ]
         } );
       } )

should be in this case I t should be filter according to tableName

Upvotes: 0

Related Questions