i working in a website (asp) and i am using a template that contain datatable and this the code of the initialisation on this table :

 if ($('body').data('page') == 'products') {


    var opt = {};

     // Tools: export to Excel, CSV, PDF & Print
    opt.sDom = "<'row m-t-10'<'col-md-6'f><'col-md-6'T>r>t<'row'<'col-md-6'><'col-md-6 align-right'p>>",
    opt.oLanguage = { "sSearch": "" } ,
    opt.iDisplayLength = 15,

    opt.oTableTools = {
        "sSwfPath": "assets/plugins/datatables/swf/copy_csv_xls_pdf.swf",
        "aButtons": ["csv", "xls", "pdf", "print"]
    };
    opt.aoColumnDefs = [
          { 'bSortable': false, 'aTargets': [6, 7, 8, 9] }

       ];



    var oTable = $('#products-table').dataTable(opt);

    oTable.fnDraw();



    /* Add a placeholder to searh input */
    $('.dataTables_filter input').attr("placeholder", "Search a product...");

    /* Delete a product */
    $('#products-table a.delete').on('click', function (e) {
        e.preventDefault();
        if (confirm("Are you sure to delete this product ?") == false) {
            return;
        }
        var nRow = $(this).parents('tr')[0];
        oTable.fnDeleteRow(nRow);
        // alert("Deleted! Do not forget to do some ajax to sync with backend :)");
    });

}

i want to add a filter type select (drop down box)for a specicfic column. any help?

i working in a website (asp) and i am using a template that contain datatable and this the code of the initialisation on this table :

 if ($('body').data('page') == 'products') {


    var opt = {};

     // Tools: export to Excel, CSV, PDF & Print
    opt.sDom = "<'row m-t-10'<'col-md-6'f><'col-md-6'T>r>t<'row'<'col-md-6'><'col-md-6 align-right'p>>",
    opt.oLanguage = { "sSearch": "" } ,
    opt.iDisplayLength = 15,

    opt.oTableTools = {
        "sSwfPath": "assets/plugins/datatables/swf/copy_csv_xls_pdf.swf",
        "aButtons": ["csv", "xls", "pdf", "print"]
    };
    opt.aoColumnDefs = [
          { 'bSortable': false, 'aTargets': [6, 7, 8, 9] }

       ];



    var oTable = $('#products-table').dataTable(opt);

    oTable.fnDraw();



    /* Add a placeholder to searh input */
    $('.dataTables_filter input').attr("placeholder", "Search a product...");

    /* Delete a product */
    $('#products-table a.delete').on('click', function (e) {
        e.preventDefault();
        if (confirm("Are you sure to delete this product ?") == false) {
            return;
        }
        var nRow = $(this).parents('tr')[0];
        oTable.fnDeleteRow(nRow);
        // alert("Deleted! Do not forget to do some ajax to sync with backend :)");
    });

}

i want to add a filter type select (drop down box)for a specicfic column. any help?

• javascript
• jquery
• asp
• select
• datatables

1 Answer 1

There is different remended approaches, depending on which version of dataTables you are using. Lets say you have a <select> like this :

<select id="filter">
    <option value="firefox">firefox</option>
    <option value="mozilla">mozilla</option>
</select>

dataTables 1.10.x (using DataTable() constructor) :

$("#filter").on('change', function() {
    //filter by selected value on second column
    table.column(1).search($(this).val()).draw();
}); 

see demo -> http://jsfiddle/qxc26rmd/

dataTables 1.9.x (using dataTable() constructor) :

$("#filter").on('change', function() {
    //filter by selected value on second column
    table.fnFilter($(this).val(), 1);
}); 

see demo -> http://jsfiddle/92ttv3o4/