Question

当整列中的单元格都带有下拉列表（jQuery DataTables）时，如何应用搜索？在我的表格的每一列的每个单元格中都有一个下拉列表中，我想对选定的值进行搜索。

Answer 1

外部搜索plug-in允许您使用可能喜欢的任何条件进行搜索。以下是如何完成此操作的示例：

//define dataTable object
const dataTable = $('#mytable').DataTable({
  sDom: 't',
  data: [...Array(6)].map((item, index) => {return {id:index}}),
  columns: [
    {
      data: null,
      title: 'Name',
      render: () => `<select>${['Joe', 'Rachel', 'Phoebe', 'Monica', 'Chandler', 'Ross'].reduce((options, name) => options+='<option value="'+name+'">'+name+'</option>','<option disabled selected></option>')}</select>`
    },{
      data: null,
      title: 'Fruit',
      render: () => `<select>${['banana', 'orange', 'apple', 'pear', 'plum'].reduce((options, name) => options+='<option value="'+name+'">'+name+'</option>','<option disabled selected></option>')}</select>`
    }
  ]
});
//define custom search function
var needle = '';
$.fn.DataTable.ext.search.push((settings, row, rowIndex) => [...$(dataTable.row(rowIndex).node()).find('option:selected')].map(option => $(option).val()).some(option => option.toLowerCase().includes(needle.toLowerCase())));
//listen for searchfield input
$('#searchfield').on('keyup', function(){
  needle = $(this).val();
  dataTable.draw();
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <input id="searchfield"></input>
  <table id="mytable"></table>
</body>
</html>

当整列中的单元格都带有下拉列表（jQuery DataTables）时，如何应用搜索？

1 个答案: