Question

确定。我是DataTables的新手，最近我需要找到一种方法来为Datatables网格添加我自己的搜索框，并且失败了。我在Datatables.net论坛和Stackoverflow上寻找解决方案，但没有一个解决方案适用于。虽然后来结合了两个解决方案，并且感谢Jsfiddle，我设法找到了可行且可重复的东西。

这只是我分享我认为对像我这样的初学者有用的东西，所以你可以按照自己喜欢的方式对待它。

Answer 1

HTML

<input type="text" class="column_filter form-control input-lg" id="col0_filter" size="40">

    <table class="table" id="grid1">
        <thead>
            <tr>
                <th>MotherTag</th>
                <th>Projected Delivery Date</th>
                <th>SPPO</th>
                <th>Batch Qty</th>
                <th>PO</th>
                <th>Select</th>
        </thead>
                <tr>
                <td>
                    bla bla
                </td>
                </tr>
     </table>

JavaScript / Jquery

<script type='text/javascript'>
    function filterColumn ( i ) {
        $('#grid1').DataTable().column( i ).search(
            $('#col0_filter').val()
        ).draw();
    }

    $(document).ready(function() {
        $('#grid1').DataTable();

        $('input.column_filter').on( 'keyup click', function () {
            filterColumn(0);
        } );
    } );
</script>

DataTable自定义搜索框

1 个答案: