javascript - 如何在数据表中添加其他功能？

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

screensotdatatblesite

但是，我应该在哪里放置其他代码？我尝试将代码复制粘贴到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>' )
                } );
            } );
        }
    } );
} );

最佳答案

您问了一个非常幼稚的问题。希望这会有所帮助：


您需要首先在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，则在该操作完成后，初始化datatable。
对于案例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>' )
                } );
            } );
        }
    } );
} );