Add dropdown filter option in datatable plugin

Question

I need to add a dropdown filter option in the database table, which displays records in the table based on the value selected. I checked latest documentation of DataTable and tried following :

$('#checkin-checkout-record-table').dataTable({
   /* "dom": '<"toolbar">C<"clear">lfrtip<"clear">T',
    tableTools: {
        "sSwfPath": app.baseurl("/gbdportal/assets/js/libs/TableTools-2.2.4/swf/copy_csv_xls_pdf.swf"),
        "aButtons": [{
            "sExtends": "xls",
            "oSelectorOpts": { filter: 'applied', order: 'current'  }

        }]
    },*/
    "bPaginate": true,
    "bLengthChange": true,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    // "order": [[0, 'asc'], [4, 'asc']],
    "aLengthMenu": [50, 100],
    "bAutoWidth": false,

    initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );
        } );
    }
});

But filter dropdowns are not displayed. I think it might be due to version incompatibility. I am using 1.10.0-dev version.

maybe you can add a jsFiddle so we can help you better

MaVRoSCy
– MaVRoSCy

2017-10-11 08:03:47 +00:00
Commented Oct 11, 2017 at 8:03 — MaVRoSCy
– MaVRoSCy, Commented Oct 11, 2017 at 8:03

MaVRoSCy · Accepted Answer · 2017-10-11 08:12:45Z

1

Your mistake is that you are trying to use Datatables 1.10.0 version with the legacy Databales

This can be seen from your Datatables initialisation code :

$('#checkin-checkout-record-table').dataTable({....

where the correct using 1.10.0+ would be (MIND THE CAPS):

$('#checkin-checkout-record-table').DataTable({

You can either use legacy dataTables or new DataTables to do what you want but always with the code matching your preferred version.

answered Oct 11, 2017 at 8:12

MaVRoSCy

17.9k15 gold badges87 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add dropdown filter option in datatable plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related