Bootstrap DataTable自定义下拉筛选器

Question

我正在codeigniter项目中使用bootstrap datatables，我在页脚中包含了datatables js，并像这样初始化：

$('.datatable').dataTable({
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
            }
        } );

现在我想在所需列的所需列表页面中使用自定义过滤器，我尝试了以下方法：

<select id="s" name="s">
<option value="1">Hyd</option>
<option value="2">Warangal</option>
</select>

并使用js

<script>
$(document).ready(function(){
    $('#s').change( function() {
        //alert($(this).val());
oTable.fnFilter( $(this).val(), 2 );
} );
});
</script>

我想使用下拉列表来筛选城市。

- vijay kumar

Answer 1

希望这正是您所寻找的，fiddle

$(document).ready(function() {
    var table =  $('#example').DataTable();

    $('#dropdown1').on('change', function () {
        table.columns(1).search( this.value ).draw();
    } );
    $('#dropdown2').on('change', function () {
        table.columns(2).search( this.value ).draw();
    } );
});

和平！

- batMask

---

这对我很有效： var table = jQuery('#example').DataTable(); jQuery('#role_filter').on( 'change', function () { table.search( this.value ).draw(); }); - Parveen Chauhan

我看到了你的帖子。它可以在所选选项的text()上工作，但是当我尝试基于选项值进行搜索时它不起作用。你能帮我解决这个问题吗？ - Vijay

Answer 2

你可以这样做：

       $('.datatable').dataTable({
       "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
       "sPaginationType": "bootstrap",
       "oLanguage": {
           "sLengthMenu": "_MENU_ records per page"
       },
       initComplete: function() {
           this.api().columns().every(function() {
               $('#s').change(function() {

                   var val = $.fn.dataTable.util.escapeRegex(
                       $(this).val()
                   );

                   column.search(val ? '^' + val + '$' : '', true, false).draw();
               });
           });
       }

   });

源代码

- Yigit Yuksel

---

DataTables 警告（表格 ID = 'DataTables_Table_0'）：无法重新初始化 DataTable。要检索此表的 DataTables 对象，请不传递参数或查看 bRetrieve 和 bDestroy 的文档。 - vijay kumar

Datatable JS 在每个页面的页脚中初始化。 - vijay kumar

你是否已经初始化过了？ - Yigit Yuksel

已初始化，如下所示：$('.datatable').dataTable({ "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_条每页记录" }, - vijay kumar

使用我的代码进行初始化，不能重复初始化。 - Yigit Yuksel