javascript - bootstrap datatable custom dropdown filters - Stack Overflow

admin管理员组

文章数量:1340291

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.

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.

• javascript
• php
• jquery
• codeigniter
• datatable

Share Improve this question Follow edited Feb 3, 2017 at 10:23 vijay kumar asked Feb 3, 2017 at 9:46 vijay kumarvijay kumar 37733 gold badges1212 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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!

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

本文标签： javascriptbootstrap datatable custom dropdown filtersStack Overflow