显示数据表中具有单个值的下拉过滤器
我正在使用数据表，列值是 (tag1, tag2, tag3) 逗号分隔我已经为该列创建了一个下拉过滤器
该下拉列表的值类似于列值 (tag1, tag2, tag3) 逗号分隔
但我需要为下拉列表中的每个选项提供一个值
标签1
屋顶2
标签3
等等
这是代码
initComplete: function () {
this.api().columns([1]).every(function () {
var column = this;
var select = jQuery('<select id="test-haris"><option value=""></option>
< /select>')
.appendTo(jQuery(column.header()).empty())
.on('change', function () {
var val = jQuery.fn.dataTable.util.escapeRegex(
jQuery(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
HUWWW浏览 88回答 1
1回答
-
慕仙森
以下方法根据第一列的内容构建一个选择列表（下拉列表）。对于该列中的每个单元格，它将逗号分隔的项目拆分为单独的文本片段，然后为下拉列表创建一个排序的唯一列表。当您通过从下拉列表中选择项目进行搜索时，它会检查所选项目是否包含在该列中每个单元格的文本中的任何位置。为此，它使用自定义的 DataTables 过滤器。就我而言，我将下拉菜单放置在表格的页脚中 - 您可以更改它。该表如下所示：这是下拉菜单：从下拉列表中选择一个项目后，您可以看到过滤效果：该解决方案的代码如下 - 我已将其分成单独的部分/函数，以尝试使结构和方法更清晰：<!doctype html><html><head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"></head><body><div style="margin: 20px;"> <table id="example" class="display dataTable cell-border" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger , John, Nixon , </td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>John, Garrett , Winters , </td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton, Winters , Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric , Kelly , Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table></div><script type="text/javascript">$(document).ready(function() { // the DataTable object: var table = $('#example').DataTable( { select: false // or, whatever you need in here. } ); // Setup - add a select list to first footer cell: $('#example tfoot th').slice(0, 1).each( function () { var dropdown = buildDropdown(); $(this).html( dropdown ); } ); // add a change event to the select list: $('#mySelect').change(function() { table.draw(); }); // create a custom search function for the select list, // which finds if the selected item is contained in the cell: $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var selectedValue = $('#mySelect').val(); console.log(selectedValue); if (data[0].includes(selectedValue)) { return true; } else { return false; } } ); function buildDropdown() { var selectHtml; // this will hold array of distinct values: var items = []; table.columns([0]).data().each(function (data, index) { data.forEach(function (newItems, index) { newItems.split(',').forEach(function (newItem, index) { if ( newItem.trim() !== '' && items.indexOf(newItem) === -1) { items.push(newItem.trim()); } }); }); }); // sort and remove duplicates: var uniqueSortedItems = [...new Set(items)].sort(); selectHtml = '<select id="mySelect"><option value=""></option>'; uniqueSortedItems.forEach(function(item) { selectHtml = selectHtml + '<option value="' + item + '">' + item + '</option>'; }); selectHtml = selectHtml + '</select>'; return selectHtml; }} );</script></body></html>我认为这就是您想要实现的目标 - 但当然，您需要将其集成到您的特定解决方案中。您还需要决定如何处理全局搜索功能（如果您正在使用它），因为它可能会干扰用于第一列的自定义搜索。
随时随地看视频慕课网APP
PHP