Question

我使用DataTable创建一些表。我使这个表可以过滤每列的数据。这有点过滤：

<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>

但是，如果我做一些额外的表，我该如何做同样的事情。所以，我们在这个页面中有两个表，并且像第一个表一样有tfoot。

<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>

我不知道如何修改dataTable的脚本。脚本如下所示：

 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)];
                                    }
                            });
});

我可以使用一个过滤脚本来控制两个脚吗？如果是这样，我该怎么做？

Answer 1

您必须指定您点击的脚的索引。使用代码：

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

然后你应该改变你的数据结构：

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 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>

如何修改来自不同表的多个过滤脚本？

1 个答案: