如何在 Jquery 数据表中使用 select 输入添加列过滤

Question

我想在我的数据表中添加列过滤，就像在这个例子中一样，但是我没有在搜索输入中添加select到每一列。

我想检查每列的唯一值和 append 这些值作为我的 select 中的选项。

基本上我做了什么：

1. 在thead中克隆tr并给它一个id

2. foreach th我 append 一个select

3. 在initComplete我检查每列liveTable.columns( k ).data().eq( 0 ).unique().sort()的唯一值

4. 循环遍历unique数组并在option标签之间添加每个项目

5. append 我的select里面的所有option

我收到错误jquery.dataTables.min.js:30 Uncaught TypeError: Cannot read property 'sDefaultContent' of undefined

我评论了我的代码，以便您有一个清晰的解释。 任何建议请我做错了什么？ 非常感谢。

注意：我知道数据表页脚上有单独的列搜索（选择输入） ，但我对第一个示例感兴趣。

 $(document).ready(function() { // clone tr $('#liveTable thead tr').clone(true).appendTo( '#liveTable thead' ); // set id to the cloned tr $('#liveTable thead tr:eq(1)').attr('id', 'selectFilter'); // add select to each th in the cloned tr $('#liveTable thead tr:eq(1) th').each( function (i) { $(this).html( '<select class="added"><option value="">All</option></select>' ); } ); var liveTable = $('#liveTable').DataTable( { "processing": true, "serverSide": true, "ajax": "https://api.npoint.io/49da61bee945ca8aa32a", "columns": [ {"data": "COUNTRY_NAME"}, {"data": "COUNTRY_CODE"}, {"data": "TERRITORY"}, {"data": "MARKET"}, {"data": "REGION"}, {"data": "CustomerName"}, {"data": "STATUS"}, {"data": "OrderQty"}, {"data": "Crncy"}, {"data": "LocalPrice"}, {"data": "Dollarprice"}, {"data": "Europrice"}, {"data": "Poundprice"}, {"data": "ShipTo"}, {"data": "ShipToName"}, {"data": "ShipToHouseStreetNumber"}, {"data": "ShipToCity"}, {"data": "ShipToPostalCode"}, {"data": "ShipToRegion"}, {"data": "ShipToTelephone"}, {"data": "ShipToEmail"}, {"data": "ShipToCountry"} ], "orderCellsTop": true, "scroller": true, "scrollY": 400, "scrollX": true, "scrollCollapse": true, "paging": false, "searching": false, initComplete: function () { var k = 0; // loop through each select inside my cloned tr $('#selectFilter select').each(function() { var selected = this; // get unique values in the current column var unique = liveTable.columns( k ).data().eq( 0 ).unique().sort(); var option = ''; // loop through unique array to add all items as options for (var i=0;i<unique.length;i++){ option += '<option value="'+ unique[i] + '">' + unique[i] + '</option>'; } // append all options inside current select $(selected).append(option); // increment k so that next select will check next column k++; }); } } ); } );

 thead select { width: 100%; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script> <table id="liveTable" class="table table-bordered" style="width:100%"> <thead> <tr> <th>COUNTRY_NAME</th> <th>COUNTRY_CODE</th> <th>TERRITORY</th> <th>MARKET</th> <th>REGION</th> <th>CustomerName</th> <th>STATUS</th> <th>OrderQty</th> <th>Crncy</th> <th>LocalPrice</th> <th>Dollarprice</th> <th>Europrice</th> <th>Poundprice</th> <th>Ship To</th> <th>Ship To Name</th> <th>Ship To House/ Street Number</th> <th>Ship To City</th> <th>Ship To Postal Code</th> <th>Ship To Region</th> <th>Ship To Telephone</th> <th>Ship To Email</th> <th>Ship To Country</th> </tr> </thead> <tfoot> <tr> <th>COUNTRY_NAME</th> <th>COUNTRY_CODE</th> <th>TERRITORY</th> <th>MARKET</th> <th>REGION</th> <th>CustomerName</th> <th>STATUS</th> <th>OrderQty</th> <th>Crncy</th> <th>LocalPrice</th> <th>Dollarprice</th> <th>Europrice</th> <th>Poundprice</th> <th>Ship To</th> <th>Ship To Name</th> <th>Ship To House/ Street Number</th> <th>Ship To City</th> <th>Ship To Postal Code</th> <th>Ship To Region</th> <th>Ship To Telephone</th> <th>Ship To Email</th> <th>Ship To Country</th> </tr> </tfoot> </table>

Answer 1

我找到了一个解决方案，我希望这对将来的某人有所帮助。

替换$("tr:eq(1) th:eq(" + k + ").added").append(option); 与$(this).append(option);