CODEWITHSUNDEEP
jquerydatatables
Harshil.Chokshi
Harshil.Chokshi

Reputation: 681

How do I add custom elements to the div on the top of the datatable?

I am using jquery and the datatables library to render a datatable. My current set-up looks like this:

enter image description here

Currently the hide columns multi-selector, export data to csv button and the two inputs are in the body above the datatable, but I want them to be in the div right above the data table where the show entries selector and the search input are.

I followed this tutorial on the datatables website to add custom elements to the toolbar to get the idea of adding custom elements. But adding the div with the text removes the show entries selector.

Upvotes: 2

Views: 6598

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58900

Just add character l to the value of the dom option to show page length control as well.

For example:

var table = $('#example').DataTable({
    "dom": '<"toolbar">lfrtip'
});

$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');

See this example for code and demonstration.

Upvotes: 4

Related Questions