Question

I am using DataTables for Showing tables values…I have done column filtering using select menu …but I have to use both select menu and input box…

Answer 1

It’s essentially no different. Handle both through a callback. The method below will allow you to filter columns based on any input field on a server-side created table:

var oTable = $('#disporeport').dataTable( {
        "aaSorting": [[ 7, "asc" ]],
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "http://urltosubmit",
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
        "bFilter":true,
        "bLengthChange": true,
        "bPaginate": true,
        "bSort": true,
        "iDisplayLength": 25,
        "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "bInfo": true,
        "aoColumns": [
             { "sTitle": "col1", "bVisible":false},
             { "sTitle": "col2", "sWidth": "20%"},
             { "sTitle": "col3", "sWidth": "20%"}
        ],
        "fnServerParams": function ( aoData ) {
            aoData.push({ "name": "selboxparam", "value": $('#selboxid').val() },
                        { "name": "inputboxval", "value": $('#inputboxid').val() },

        }
    });

So, the fnServerParams is what you’re concerned about. You supply a name and value for each box you want to pass. These come through to the ajax page as $_REQUEST values, which you can then use in your server-side script to filter via your chosen method. To make the table redraw, you’d simply have an fnDraw done onclick of a button or on mouseup of a field.

Here’s the official datatables example for doing this with a dom-based table. Perhaps it’s a little less involved, but it’s also limited by how big the table can get (I wouldn’t personally do more than 10,000 records with a dom-based table)