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?

The output as I shown in my question in which a div around table. — Abhinav
– Abhinav, Commented Dec 29, 2014 at 11:00
no this will not solve my purpose. I need to add a div around table. — Abhinav
– Abhinav, Commented Dec 29, 2014 at 11:04

Jens Berger · Accepted Answer · 2017-07-12 16:12:45Z

7

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

answered Jul 12, 2017 at 16:12

Jens Berger

5346 silver badges10 bronze badges

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

Comments

SSA · Accepted Answer · 2014-12-29 11:06:44Z

2

You can use wrap function:

$('table').wrap('<div class="class-name"></div>');

answered Dec 29, 2014 at 11:06

SSA

5,4834 gold badges39 silver badges52 bronze badges

Comments

Jean-Pierre Delacre · Accepted Answer · 2014-12-29 11:05:13Z

1

Does your table have a unique ID or class? Because then, you could simply use the jQuery function wrap().

answered Dec 29, 2014 at 11:05

Jean-Pierre Delacre

1861 silver badge8 bronze badges

2 Comments

Abhinav Over a year ago

I can wrap the table in a div using this but then datatable is not working on that table.

Jean-Pierre Delacre Over a year ago

Pagination doesn't work, you mean? How about applying .datatable() first and then, in the callback, using wrap() to add your div? What's your final objective?

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related