使datatable表头选择选项取决于另一个表头选择输入

时间:2018-07-26 06:38:11

标签: javascript jquery datatables

我有一个datatable,其中两列的表头作为选择输入,以过滤掉表中的数据。

enter image description here

这是我的html代码

<table id="dataTableInventory" class="table table-striped table-bordered data-table-drafts" style="width:100%">
    <thead>
        <tr>
            <th class="filterhead" style="display: none;">Item ID</th>
            <th class="filterhead">Main Category</th>
            <th class="filterhead">Sub Category 1</th>
            <th class="filterhead">Sub Category 2</th>
            <th>Item Name</th>
            <th>Item Count</th>
            <th>In Stock</th>
            <th>Out Stock</th>
            <th>Action</th>
        </tr>
    </thead>
    <tfoot>
    </tfoot>
    <tbody id="table-body">
        <?php foreach($param_items as $item){?>
            <tr>
                <td class="id" style="display: none;"><?php echo $item['idx'];?></td>
                <td><?php echo $item['main_category'];?></td>
                <td><?php echo $item['sub_category_1'];?></td>
                <td><?php echo $item['sub_category_2'];?></td>
                <td><?php echo $item['item_name'];?></td>
                <td><?php echo $item['in_stock']+$item['out_stock'];?></td>
                <td><?php echo $item['in_stock'];?></td>
                <td><?php echo $item['out_stock'];?></td>
                <td align="center"> /* some buttons here */</td>
            </tr>
        <?php }?>
    </tbody>
</table>

这是我的javascript代码,用于在表头中添加选择输入:-

var table = $("#dataTableInventory").DataTable({
    "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 1, 2, 7 ] } ]
});
$(".filterhead").each( function ( i ) {
    console.log(i);
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this) )
        .on( 'change', function () {
           var term = $(this).val();
            table.column( i ).search(term, false, false ).draw();
        });
    table.column( i ).data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
    });
});

现在我的问题是当我选择主类别计算机时,它还在选择的子类别中显示了子类别语法。当我选择一个主类别并且子类别中的选择将仅显示主类别下的子类别时,如何更改代码。

0 个答案:

没有答案