bootstrap datatable custom dropdown filters

15,556

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!

Share:
15,556
vijay kumar
Author by

vijay kumar

Updated on June 07, 2022

Comments

  • vijay kumar
    vijay kumar almost 2 years

    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.