引导数据表自定义下拉过滤器

Posted 2023-02-22

【中文标题】引导数据表自定义下拉过滤器

【英文标题】：bootstrap datatable custom dropdown filters

【发布时间】：2017-06-20 15:33:44

【问题描述】：

我在页脚的 codeigniter 项目中使用引导数据表，我包含了这个数据表 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>

我想使用城市的下拉列表进行过滤。

【参考方案1】：

你可以这样做：

       $('.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();
               );
           );
       

   );

Source

【讨论】：

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

datatable js在每页的页脚初始化

你有没有初始化过一次？

已经像 $('.datatable').dataTable( "sDom": "r>t>", "sPaginationType": "bootstrap", "oLanguage": "sLengthMenu": "MENU 每页记录数" ,

用我的代码初始化，不能初始化两次。

【参考方案2】：

希望这就是你要找的，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();
     );
);

和平！

【讨论】：

这对我有用 var table = jQuery('#example').DataTable(); jQuery('#role_filter').on('change', function () table.search( this.value ).draw(); );

我看到了你的帖子。它正在处理所选选项的文本（），但是当我尝试根据选项值进行搜索时它不起作用。你能帮我解决这个问题吗