javascript - 如何在数据表中添加附加特性/功能？

Question

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

screensotdatatblesite

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

请帮助我...

我从数据表网站获得的代码:

$(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

你问了一个非常幼稚的问题。希望这有帮助:

1. 您需要首先添加 DataTables 的所有依赖项在您的 HTML 文件中:

<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>

使用 HTML 格式创建表格，其中包含 <table id="YourIdOfTableTag"> 中的所有数据标记或执行一些脚本以将数据作为新行插入表中。

一旦所有数据都出现在表格中，您就可以将自己的自定义脚本添加到 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>' )
                } );
            } );
        }
    } );
} );