当整列都有单元格中带有下拉列表的单元格(jQuery DataTables)时,如何应用搜索



当整列中都有带有下拉列表的单元格(jquery dataTables)时,如何应用搜索?在我的表中,一个列在每个单元格中都有下拉列表,我想应用搜索所选值。

外部搜索插件允许您使用可能喜欢的任何条件进行搜索。以下是如何完成的示例:

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

最新更新