DataTable - 为什么我不能让单个列搜索(选择输入)工作？

Question

我正在使用来自DataTables.net的JavaScript表格好东西 - 我发现了一个非常适合我需要的功能,单个列搜索(选择输入),可在此处找到.

此功能允许深入查看列数据,将其过滤掉.

我试过标准的实现没有运气.我发现没有关于实现的特定字段,并尝试删除所有其他属性.

我的代码是:

<script type="text/javascript">
    $(document).ready(function() {
        $('#alertLogTable').DataTable( {
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.11/i18n/Portuguese-Brasil.json'
            },
            responsive: true,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                   select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
                } );
            }
        });
    });
</script>

datatables.net页面上的演示显示了每列下方的按钮以对其进行过滤.我没有得到那些和过滤功能.我在这里错过了什么？

Answer 1

你的代码运行正常.我100%肯定你只是忘了包含一个<tfoot>部分.页脚不会被魔法添加,如果<tfoot>不存在,则会将<select>其插入到任何内容中.所以请记住:

<table>
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
    <tr><td></td></tr>
  </tbody>
  <tfoot>
    <tr><th></th></tr>
  </tfoot>
</table>