Question

I make some table use DataTable. I make this table can filtering data from each column.
This is some tfoot for filtering:

<tfoot>
       <tr>
           <th><input type="text" name="search_Date" value="Search Date" class="search_init" /></th>
           <th><input type="text" name="search_Model" value="Search Model" class="search_init" /></th>
           <th><input type="text" name="search_Qty" value="Search Qty" class="search_init" /></th>
           <th><input type="text" name="search_Name" value="Search Name" class="search_init" /></th>
       </tr>
</tfoot>

But how if I want to make the same thing if I make some additional table. So, we have two table in this page and also have a tfoot like the first table.

<tfoot>
       <tr>
           <th><input type="text" name="search_Date" value="Search Date" class="search_init" /></th>
           <th><input type="text" name="search_Line" value="Search Line" class="search_init" /></th>
           <th><input type="text" name="search_Model" value="Search Model" class="search_init" /></th>
           <th><input type="text" name="search_Lot_no" value="Search Lot_no" class="search_init" /></th>
           <th><input type="text" name="search_Range" value="Search Range" class="search_init" /></th>
        </tr>
</tfoot>

I don’t know how to modify the dataTable’s script. The script is like below:

 var asInitVals = new Array();
        $(document).ready(function() {
    var oTable;
    var aTable;

    oTable = $("#datadaily").dataTable({.......});   //1st table
    aTable = $("#unfinish").dataTable({.......});    //add. table

                $("tfoot input").keyup( function () {
                                /* Filter on the column (the index) of this element */
                                oTable.fnFilter( this.value, $("tfoot input").index(this) );
                                aTable.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)];
                                    }
                            });
});

Could I use one filtering script to control two tfoot? Ff so, how do I do it?

Answer 1

You must specify what’s index of the tfoot you’ve click.
Using code:

var index = $(this).index("table tfoot");

Then you should change your data struct:

var TABLE_COUNT = 2;
var DATA_ATABLE = 0;
var DATA_OTABLE = 1;
var tableData = [];
tableData[DATA_ATABLE] = $("#datadaily").dataTable({.......
tableData[DATA_OTABLE] = $("#unfinish").dataTable({.......

Here is demo source:

<table class="table-test" border="1">
    <thead>
        <tr>
            <th>Colum1</th>
            <th>Colum2</th>
            <th>Colum3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>F1</th>
            <th>F2</th>
            <th>F3</th>
        </tr>
    </tfoot>
</table>
<table class="table-test"  border="1">
    <thead>
        <tr>
            <th>Colum1</th>
            <th>Colum2</th>
            <th>Colum3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>F1</th>
            <th>F2</th>
            <th>F3</th>
        </tr>
    </tfoot>
</table>
<script>
    /*@const*/
    var TABLE_COUNT = 2;
    var DATA_ATABLE = 0;
    var DATA_OTABLE = 1;
    var tableData = [];
    tableData[DATA_ATABLE] = $("#datadaily").dataTable({.......
    tableData[DATA_OTABLE] = $("#unfinish").dataTable({.......
    $(".table-test tfoot").click(function(){
        var index = $(this).index(".table-test tfoot");
        //@Todo
        tableData[index] = ...................
    });
</script>