bootstrap数据表自定义下拉过滤器

I'm using bootstrap datatables in codeigniter project in footer i included this datatables js and initialized like

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

Now i want custom filters in required list page on required column i tried as

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

and js as

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

I want to filter using drop downlist for city.

2个回答



希望这就是你要找的东西,小提琴 </ p>

  $(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();
});
}) ;
</ code> </ pre>

和平!</ p>
</ div>

展开原文

原文

Hope this is what you looking for, 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();
    } );
});

Peace!

douliao7354
douliao7354 这对我来说是var table = jQuery('#example')。DataTable(); jQuery('#role_filter')。on('change',function(){ta​​ble.search(this.value).draw();});
大约 2 年之前 回复

You can do this in this way :

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

drix47193
drix47193 用我的代码初始化,你不能初始化两次。
3 年多之前 回复
dtlzdofl66441
dtlzdofl66441 已初始化为$('。datatable')。dataTable({“sDom”:“<'row-fluid'<'span6'l> <'span6'f> r> t <'row-fluid'<'span12' i> <'span12 center'p >>“,”sPaginationType“:”bootstrap“,”oLanguage“:{”sLengthMenu“:”每页菜单记录“},
3 年多之前 回复
dongou0524
dongou0524 你有没有初始化一次?
3 年多之前 回复
douhanzhen8927
douhanzhen8927 datatable js在每页的页脚中初始化
3 年多之前 回复
drcb19700
drcb19700 DataTables警告(table id ='DataTables_Table_0'):无法重新初始化DataTable。 要检索此表的DataTables对象,请不要传递参数或查看bRetrieve和bDestroy的文档
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐