复选框根据所选复选框过滤具有多个值的列。问题是我的搜索中使用的正则表达式不会显示选中的所有值,如红线所示。帮助将不胜感激!谢谢!
编辑2:更详细的代码
以下是我的DataTable 1.10的初始化
$(document).ready(function () {
//jQuery DataTables initialization
$('#myTable').DataTable({
"processing": true, // for show processing bar
"serverSide": true, // for process on server side
"orderMulti": false, // for disable multi column order
"dom": '<"top"i>rt<"bottom"lp><"clear">', // for hide default global search box // little confusion? don't worry I explained in the tutorial website
"ajax": {
"url": "/home/LoadData",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "FName", "name": "FName", "autoWidth": true },
{ "data": "MName", "name": "MName", "autoWidth": true },
{ "data": "LName", "name": "LName", "autoWidth": true },
{ "data": "Email", "name": "Email", "autoWidth": true },
{ "data": "Country", "name": "Country", "autoWidth": true },
{ "data": "Gender", "name": "Gender", "autoWidth": true },
{ "data": "Age", "name": "Age", "autoWidth": true },
{ "data": "School", "name": "School", "autoWidth": true },
{ "data": "SkillName", "name": "SkillName", "autoWidth": true },
{ "data": "Rating", "name": "Rating", "autoWidth": true },
]
});
oTable = $('#myTable').DataTable();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="checkbox" id="csharp" name="skill" value="C#" />C
<input type="checkbox" id="cplus" name="skill" value="C++" />C++
<input type="checkbox" id="android" name="skill" value="Android" />Android
<input type="checkbox" id="java" name="skill" value="Java" />Java
以下是使用复选框
的DataTable的搜索功能 $("input[type='checkbox'").bind("change", function (event, ui) { // reads every changes in the state of checkboxes when selected
var types = $('input:checkbox[name="skill"]:checked').map(function () { //reads the value of the selected checkboxes
return this.value; //Returns the value of the selected checkboxes
//START OF THE PROBLEM
}).get().join('|'); //Concatinates the values of the checkboxes selected
//Example: C#|C++ it will search the records that contains a skill of C# and C++
//Below is where the searching will occur where it reads the value of types as a regex.
//But the problem is, this line below does not read 'var types' as a regex.
//When two checkboxes are selected (example: C#|C++), it does not read as 'C# OR C++'.
//The result is that no data will match for the value of var types = 'C#|C++' since it does not read it as a regex.
oTable.column(8).search(types, true, false, false).draw();
//END OF THE PROBLEM
alert(types); //Tracing for the value of types when a checkbox is selected
});
重要提示:这是我使用RegEx进行搜索的来源。不同之处在于我使用了最新的DataTable API。 http://plnkr.co/edit/b8cLVaVlbNKOQhDwI2mw?p=preview