Question

I am trying to do a multi column filter as shown in this page (http://www.datatables.net/examples/api/multi_filter.html) using a array that contain all the data (called ‘my_array_data’) but I could not get those filter text box displayed.

Below is the code:

<script type="text/javascript">

var asInitVals = new Array();

$(document).ready(function() {


            $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
            var oTable = $('#example').dataTable( {
                "aaData": my_array_data,
                "bProcessing": true,
                "bAutoWidth": false,
                "fnInitComplete": function() {
                                var oSettings = this.fnSettings();
                                for ( var i=0 ; i<oSettings.aoPreSearchCols.length ; i++ ){
                                    if(oSettings.aoPreSearchCols[i].sSearch.length>0){
                                        $("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
                                        $("tfoot input")[i].className = "";
                                    }
                                }
                            },
                "aoColumns": [
                    {
                        "sTitle": "From",
                        "sClass": "center",
                        "sWidth": "10%"
                    },
                    {
                        "sTitle": "To",
                        "sClass": "center",
                        "sWidth": "10%"
                    },
                    {
                        "sTitle": "Note",
                        "sClass": "center",
                        "sWidth": "80%"
                    }
                ]
            } );


            $("tfoot input").keyup( function () {
                /* Filter on the column (the index) of this element */
                oTable.fnFilter( this.value, $("tfoot input").index(this) );
            } );


            /*
             * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
             * the footer
             */
            $("tfoot input").each( function (i) {
                asInitVals[i] = this.value;
            } );

            $("tfoot input").focus( function () {
                if ( this.className == "search_init" )
                {
                    this.className = "";
                    this.value = "";
                }
            } );

            $("tfoot input").blur( function (i) {
                if ( this.value == "" )
                {
                    this.className = "search_init";
                    this.value = asInitVals[$("tfoot input").index(this)];
                }
            } );


});

For your info: I do not have a <table> ... </table> as mention before that I store my data in the array called ”my_array_data’ and therefore do not have <input class="search_init"/>. Also, “my_array_data” contain three column – basically named as – “From”, “To”, and “Note”.

Any Insight in getting 3 columns of search filter for my array “my_array_data”?

Appreciate any help offer.

Answer 1

You need to define those 3 text boxes on your markup. Here’s a shortened example of how I currently achieve the same thing using datatables:

<table id="example">
<thead>
    <tr>
        <th class="theader">
            Date
        </th>
        <th class="theader">
            Delay
        </th>
        <th class="theader">
            Status
        </th>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
    <tr>
        <th class="centered">
            <input type="text" id="id1" name="id1" class="search_init" />
        </th>
        <th class="centered">
            <input type="text" id="id2" name="id2" class="search_init" />
        </th>
        <th class="centered">
            <input type="text" id="id3" name="id3" class="search_init" />
        </th>
    </tr>
</tfoot>
</table>

And my initialization code is something like:

var oTable = $("#example").dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "iDisplayLength": 10,
    "bSortClasses": false, 
        //...etc etc
});

$("tfoot input").keyup(function(event) {
 /* Filter on the column (the index) of this element */
 if (event.keyCode == 13)//only on enter pressed
 {
    var colIndex = getColumnIndex(this.id);//this is a custom function I wrote. Ignore it
    oTable.fnFilter(this.value, colIndex);
  }
});