JQUERY - 使用数据表选择多个复选框来过滤单个列

时间:2017-01-14 09:17:00

标签: jquery checkbox datatables

复选框根据所选复选框过滤具有多个值的列。问题是我的搜索中使用的正则表达式不会显示选中的所有值,如红线所示。帮助将不胜感激!谢谢!

编辑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

0 个答案:

没有答案