Have Filter and Sort at Top of the Jquery Data table

mdhyderali710

Folks,

Basically I am windows admin ,And today for the first time I am working as developer on Jquery Data table.

My requirement is very simple as my client needs to have sort and filter on top of the table for Individual column searching (select input) and I had came ac-cross the link http://live.datatables.net/giharaka/1/edit which is matching my requirement . I updated the code using select input with 2 headers(THEAD) for my table,But I find no result .Can any one please help me what's wrong in it.

$('#mybankdsort').DataTable( {
    initComplete: function () {
        this.api('thead tr:eq(1) th').columns().every( function () {
            var column = this;
              $(column.header()).append("<br>")
            var select = $('<select><option value=""></option></select>')
               .appendTo($(column.header()))
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                var table = $('#mybankdsort').DataTable({orderCellsTop: true
                           });
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );

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

kthorngren

Maybe you can put your code into a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Do you have two headers in your table?

This portion of your code should not be in the initComplete of your Datatables config as it is code to initialize Datatables:

                var table = $('#mybankdsort').DataTable({orderCellsTop: true
                           });

Remove it and add orderCellsTop: true as an option for your Datatables init code, for example:

$('#mybankdsort').DataTable( {
    orderCellsTop: true,
    initComplete: function () {
......

If the above doesn't help please provide a test case.

Kevin