Question

我已经创建了一个基本的数据表，现在我想通过在每一列中添加过滤器来自定义它。我已经得到了以下解决方案： https://www.datatables.net/examples/api/multi_filter_select.html

但是，我应该把附加代码放在哪里？我试过在jquery.datatables.js中复制粘贴代码，并尝试放入新的js文件，它们都不起作用。

请帮助我...

我从datatables网站获得的代码：

$(document).ready(function() {
    $('#example').DataTable( {
        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>' )
                } );
            } );
        }
    } );
} );

Answer 1

你问了一个非常天真的问题。希望这会有所帮助：

您需要先在HTML文件中添加DataTables的所有依赖项：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

使用<table id="YourIdOfTableTag">标记内的所有数据创建HTML表格，或者执行一些脚本以将数据作为新行插入表格中。
表格中存在所有数据后，您可以使用自己的自定义脚本并添加到HTML中：

<script type="text/javascript" language="javascript" src="urOwnScript.js"></script>

urOwnScript.js可以用两种方式编写。 * A.如果您已经拥有包含数据的表，则在页面加载完成后初始化数据表。 * B.如果您正在获取数据并使用新行编辑html DOM，那么一旦该操作完成初始化数据表。
对于案例A，urOwnScript.js的内容可以是这样的：

$(document).ready(function() { // Means this is run only on page load, which means <table> tag has all the data already.
    $('#YourIdOfTableTag').DataTable( {
        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>' )
                } );
            } );
        }
    } );
} );

如何在DataTables中添加其他功能/功能？

1 个答案: