jQuery数据表搜索中的多记录搜索

Question

我是jquery Datatables的新手，我想为多搜索类型的每一列添加搜索，即能够在同一搜索栏中一次搜索多个值。

例如。我想搜索与两个名字(Tiger，Garret(对应的记录。我尝试了yadcf，但在组合代码时遇到了问题。

我已经附上了剧本。

$('#create').ready(function() {
var dataSet = {
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012/03/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008/11/28",
"$162,700"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008/12/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008/12/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013/03/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008/10/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012/12/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010/03/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012/11/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010/06/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009/04/10",
"$237,500"
]
]
}
$("<table id='example' class='display' cellspacing='0' width='100%'>" +
"<thead>" +
"<tr>" +
"<th>Name</th>" +
"<th>Position</th>" +
"<th>Office</th>" +
"<th>Extn.</th>" +
"<th>Start Date</th>" +
"<th>Slary</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"<tfoot>" +
"<tr>" +
"<th>Name</th>" +
"<th>Position</th>" +
"<th>Office</th>" +
"<th>Extn.</th>" +
"<th>Start Date</th>" +
"<th>Slary</th>" +
"</tr>").appendTo('#table-section');
var x = JSON.stringify(dataSet);
var data = jQuery.map(dataSet.data, function(el, i) {
return [el];
});
var otable = $('#example').dataTable({
data: data,
columns: [
{title: "Name"},
{title: "Position"},
{title: "Office"},
{title: "Extn."},
{title: "Start date"},
{title: "Salary"}
],
});
$('#example tfoot th').each(function() {
var title = $(this).text();
// console.log(title);
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
otable.columns().every(function() {
console.log("abhay");
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table-section"></div>

Answer 1

您可以将dataTables与yadcf一起使用。将列的filter_type更改为"multi_select"。您需要设置每列的筛选器类型，如下面的代码片段所示。

脚本：

var dataSet = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012/03/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008/11/28",
"$162,700"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008/12/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008/12/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013/03/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008/10/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012/12/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010/03/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012/11/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010/06/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009/04/10",
"$237,500"
]
];
var table;
$(document).ready(function () {
table = $('#myTable').DataTable({
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
});
yadcf.init(table, [
{
column_number: 0,
filter_type: 'multi_select',
filter_reset_button_text: false
},
{
column_number: 1,
filter_type: 'text',
filter_reset_button_text: false
},
{
column_number: 2,
filter_type: 'text',
filter_reset_button_text: false
},
{
column_number: 3,
filter_type: 'text',
filter_reset_button_text: false
},
{
column_number: 4,
filter_type: 'text',
filter_reset_button_text: false
},
{
column_number: 5,
filter_type: 'text',
filter_reset_button_text: false
}
]);
});

你的html应该是：

<table id="myTable" class="display" style="width: 100%"></table>

对于multi_select，您可以使用selected，选择2个插件来改进multi_select。

Answer 2

您可以在数据表中进行移位点击以对多列进行排序。。。

如果你想匹配一个完整的短语，你需要在搜索中加上引号。

https://datatables.net/examples/basic_init/multi_col_sort.html

https://datatables.net/reference/api/search((