当整个列中包含带有下拉列表的单元格时，如何应用搜索（jQuery DataTables）？ [关闭]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当整个列中包含带有下拉列表的单元格时，如何应用搜索（jQuery DataTables）？ [关闭]相关的知识，希望对你有一定的参考价值。
当整个列中包含带有下拉列表的单元格时，如何应用搜索（jQuery DataTables）？在我的表中，每列中有一列有下拉列表，我想应用搜索选定的值。
答案
外部搜索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）？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章