Question

我有一个数据表，并且更改了表以使某些列表头上具有选择框以过滤表数据。

我的HTML

<p>{{info}}</p>

我的JS

<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</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;?></td>
                <td><?php echo $item->item_name;?></td>
                <td><?php echo $item->item_count;?></td>
                <td><?php echo $item->in_stock;?></td>
                <td><?php echo $item->out_stock;?></td>
                <td align="center"><a href="<?php echo base_url('dashboard/staff/inventory/view_item/'.$item->idx);?>" class="btn waves-effect waves-light btn-primary view-button"><i class="fa fa-eye"></i></a> <!-----------------------><a href="<?php echo base_url('dashboard/staff/inventory/in_item/'.$item->idx);?>" class="btn waves-effect waves-light btn-info in-button"><i class="fa fa-plus"></i></a> <!-----------------------><a href="<?php echo base_url('dashboard/staff/inventory/out_item/'.$item->idx);?>" class="btn waves-effect waves-light btn-warning out-button"><i class="fa fa-minus"></i></a> <!-----------------------><button type="button" class="btn waves-effect waves-light btn-danger delete-button" data-url="<?php echo base_url('dashboard/staff/inventory/delete');?>"><i class="fa fa-trash-o"></i></button></td>
            </tr>
        <?php }?>
    </tbody>

</table>

问题在于它不仅会附加选择框，还会删除表头名称。它仅显示选择框，并且表头名称不再存在。

该如何显示列表头名称以及选择框？

Answer 1

尝试一下：

var table = $('#dataTableInventory').DataTable();
$(".filterhead").each( function ( 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>' )
    });
});

除了清空要添加到其上的列之外，代码中的所有内容都很正常。我刚刚删除了 .empty() 方法。

http://jsfiddle.net/hs2gbm3k/7/

Answer 2

你能做吗

...
var select = $($(this).text() + '<select><option value=""></option></select>')

或者您可以：

...
.appendTo( $(this) )

代替：

...
.appendTo( $(this).empty() )

在数据表表头中添加列名并选择框

2 个答案: