How to add a div on table with using jquery datatables?

Question

I am using jQuery data table to manage tables. In this I need to add a div on table only not on the pagination div like below

<div class="class-name"> <table></table> </div> <div class="dataTables_paginate paging_simple_numbers"></div>

Can someone help me in this?

Answer 1

The question is old, but today I had the same problem. So here is the "official" solution:

In the JavaScript part where you initialize the DataTable, you can modify the generated DOM like this:

$('table').DataTable( {
    ...,
    dom: '<"class-name"t>p'
});

Where

• <"class-name" translates to <div class="class-name">
• t is replaced with the table (<table>...</table>)
• >closes the div as </div>
• p renders the pagination elements

The DataTables documentation explains the available options: https://datatables.net/examples/basic_init/dom.html