当整个列中包含带有下拉列表的单元格时,如何应用搜索(jQuery DataTables)? [关闭]

问题描述 投票:0回答:1

当整个列中包含带有下拉列表的单元格时,如何应用搜索(jQuery DataTables)?在我的表中,每列中有一列有下拉列表,我想应用搜索选定的值。

javascript jquery datatables
1个回答
0
投票

外部搜索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>
© www.soinside.com 2019 - 2024. All rights reserved.