locked
How to show the Jquery Data table Total Entries On Top of the header RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    1. As we all knew that Jquery data table shows the total entries below the data table. 
      example :Showing 1 to 10 of 100 entries.
    2. Can any one please do let me know how can I show at the top the data-table. Becoz I tried showing it using DOM Positioning  ,But found no luck
    Friday, March 23, 2018 8:43 AM

Answers

  • User1644485212 posted

    changing your code inline

    $(document).ready(function() {
    
        $('#example').DataTable( {
    "dom" : '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    initComplete: function () { this.api().columns().every( function () { var column = this; var select = $('<select><option value=""></option></select>') .appendTo( $(column.header()) ) .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>' ) } ); } ); } } ); } );

    you can put it as a first line while binding your datatable. it is just a setting, so you can put it anywhere though.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 23, 2018 10:02 AM

All replies

  • User1644485212 posted

    Please check below URL. There are multiple options for jQuery Datatable, where in you can manipulate so many things.

    https://datatables.net/release-datatables/examples/advanced_init/dom_multiple_elements.html

    Friday, March 23, 2018 9:17 AM
  • User-571605279 posted

    Komal,

    Could you please suggest me where should I add  "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' in below code 

    $(document).ready(function() {
    
        $('#example').DataTable( {
               initComplete: function () {
    
                this.api().columns().every( function () {
    
                    var column = this;
    
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.header())  )
                        .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>' )
                    } );
                } );
            }
        } );
    } );

    Friday, March 23, 2018 9:48 AM
  • User1644485212 posted

    changing your code inline

    $(document).ready(function() {
    
        $('#example').DataTable( {
    "dom" : '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
    initComplete: function () { this.api().columns().every( function () { var column = this; var select = $('<select><option value=""></option></select>') .appendTo( $(column.header()) ) .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>' ) } ); } ); } } ); } );

    you can put it as a first line while binding your datatable. it is just a setting, so you can put it anywhere though.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 23, 2018 10:02 AM