Question

我们如何从多选框值中使用seacrh过滤器属性数据？

这里选择框（多选）;

<select id="dbox" multiple="true">
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
</select>

当dbox selecttion更改时，触发器在数据表搜索过滤器上起作用：

我尝试了这个jquery代码：

$("select#dbox").on("change",function(){

 var val=$(this).val();
oTable.fnFilter(val);

});

但它不起作用。

我们怎么做？

由于

Answer 1

以下是参考代码jsFiddle

HTML：

<h4>Select your multiple filter</h4>
<div>
    <select id="dbox" name="categories" multiple>
        <option value="">All</option>
        <option value="Home">Home</option>
        <option value="Work">Work</option>
        <option value="City">City</option>
    </select>
</div>
<div>
    <h4>Table of items</h4>
    <table>
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Category</th>
        </tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>Lamp</td><td>Home</td></tr>
            <tr><td>3</td><td>Desk</td><td>Work</td></tr>
            <tr><td>2</td><td>Books</td><td>Home</td></tr>
            <tr><td>3</td><td>Cars</td><td>City</td></tr>
            <tr><td>3</td><td>Desk</td><td>Work</td></tr>
            <tr><td>3</td><td>Photocopying</td><td>Work</td></tr>
            <tr><td>3</td><td>Clip</td><td>Work</td></tr>
            <tr><td>3</td><td>Street</td><td>City</td></tr>
         </tbody>
    </table>
</div>

JS：

var dataTable = $('table').dataTable();
$("select#dbox").change( function () {
    var choosedFilter = $('#dbox').val();
    var choosedString = choosedFilter.join("|");
    dataTable.fnFilter(choosedString,2,true,false);
});

Answer 2

尝试使用搜索功能。

$("#dbox").on("change",function(){
    var val=$(this).val();
    oTable.search(val).draw();
});

Answer 3

    $('#myInputTextbox').keyup(function(e) {
      $('#myDataTable').dataTable().fnFilter(this.value);
    });

如何使用多选框值触发数据表的搜索过滤器？

3 个答案: