Как изменить сценарий фильтрации для нескольких <tfoot>из другой таблицы? - PullRequest
Новая
       25

Как изменить сценарий фильтрации для нескольких <tfoot>из другой таблицы?

1 голос
/ 07 апреля 2011

Я заставляю некоторые таблицы использовать DataTable.Я делаю эту таблицу, может фильтровать данные из каждого столбца.Это некоторый tfoot для фильтрации: 

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

Могу ли я использовать один сценарий фильтрации для управления двумя tfoot?И как мне это сделать?

1 Ответ

0 голосов
/ 07 апреля 2011

Вы должны указать, по какому индексу вы нажали. Используя код: 

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