JQuery DataTables - showing Page Length option as well as Export Buttons

user_45951 0
Viewed 1415

I am using DataTables and I want to show Page Length option on the Left side Export Buttons in the Center and Search/Field on the Right side at the top of the table as well as at the bottom of the table above Pagination.

My problem is that when I add feature to show Export buttons they do not show at all and if I use dom: "Bfrtip" then the Page Length option is getting removed.

I am using following JS of DataTable:

$("#member_list").DataTable({
    scrollY: "800px",   //Remove this if we do now want to show Verticle Scroll Bar
    scrollX: !0,    //Remove this if we do now want to show Horizontal Scroll Bar
    stateSave: !0,  //Use to save State of current Pagination when page is refreshed
    language: {
        paginate: {
            previous: "<i class='mdi mdi-chevron-left'>",
            next: "<i class='mdi mdi-chevron-right'>"
        }
    },
    drawCallback: function() {
        $(".dataTables_paginate > .pagination").addClass("pagination-rounded")
    },
    columnDefs: [{
        orderable: false,
        targets: [2,3,4,5]  //Here we disable sorting fearure for few cols
    }],
    
    buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
    ]
});

I am using following HTML Table structure: <

table id="member_list" class="table" class="table table-striped dt-responsive nowrap w-100">
<thead>
  <tr>
    <th></th>
    <th data-toggle="true">Action</th>
    <th>M Code</th>
    <th>M Name</th>
    <th>MM Branch</th>
    <th>MM Code</th>
    <th>Member Name</th>
    <th>Mobile</th>
    <th>DOB</th>
    <th data-hide="phone, tablet">M Reg Date</th>
    <th data-hide="phone, tablet">M Fees</th>
  </tr>
</thead>
<tbody id="tbody">

</tbody>
</table>

Here TBody is appended using Ajax. Please help solve this problem.

I made changes as per Andrew's suggestion and now I am getting the buttons in the middle/center.

But the buttons are coming up all stuck to each other without any spacing between them. enter image description here

Any solution for this problem would be great.

TIA

datatables jquery
1 Answers

You can use the dom option for this, with help from some CSS.

The CSS, which I added to my test page <head>, in a <style> section:

div.dt-top-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

div.dt-center-in-div {
  margin: 0 auto;
}

div.dt-filter-spacer {
  margin: 10px 0;
}

The dom option is this:

$('#example').DataTable( {
  dom: '<"dt-top-container"<l><"dt-center-in-div"B><f>r>t<"dt-filter-spacer"f><ip>',
  buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
} );

The end result is:

enter image description here

This works by wrapping the relevant DataTable elements in their own divs, using <...> and also adding class names, where needed, using "class-name".

Using a CSS grid is a simple way to space out the top 3 controls (page length, buttons, filter box).

For the footer section, I just place the filterbox in its own div.

You can re-arrange the DOM elements to fit your needs, if the above is not exactly what you want. And you can fine-tune the results by adjusting the CSS.

user_125673650
Related