Binding buttons and toolbars to preexisting HTML elements

infamia

Hello! I'm thinking about switching from Bootstrap-Table to DataTables and have a question about buttons, toolbars, and layouts. I have some fairly complex HTML in my current table's toolbar that Bootstrap Table hooks into. It looks like it would be a bit of a pain (assuming it is possible) to replicate my table's toolbar using layouts. Additionally, some of my toolbar buttons are differ (e.g. on a per table basis, a "New" button will point to different links).

Bootstrap Table (which I'm currently using) allows you to specify a preexisting HTML element to inject content into (e.g. inject a toolbar into a preexisting <div>), or automatically wire up element (e.g., hook search to an <input>). Is there some other way to achieve the same results or something similar? Maybe I am underestimating layouts and custom buttons, but it is a lot to take in at first.

I am new to DataTables and Javascript in general, so my apologies if I overlooked an obvious solution while searching the DataTables docs. I'm using Django to render HTML and HTMX and DataTables for interactivity.

allan

There is an extensive API, so you can readily bind your own event handlers to any elements you want. If you have a "New" button and all the functions for the new action, then just bind to that and update the DataTable using the API.

For search use:

myInput.addEventListener('input', function () {
  table.search(myInput).draw();
});

etc.

Nearly all of the actions that DataTables, its buttons and extensions can do are available via the API. So you can quite readily hook into that and perform the actions you need on the table. The pre-built buttons could be considered just a shortcut to that.

Allan

infamia

Understood, thanks so much for the guidance. It's so generous of you to answer silly, basic questions like mine!

You might consider adding CSS targets for toolbars and their sections as a feature in DataTables. Then you could have the best of both worlds, the shortcut buttons that could be directed anywhere, and folks could mold their custom HTML around wherever DataTables drops it's buttons. It works really well with Bootstrap Table and makes things very quick to develop with. All that said, it might be rather difficult, with the advanced toolbar construction framework you've introduced relatively recently. Best of luck with DataTables!

infamia

After a bit more digging, it seems that alan has already thought of this, and you can indeed inject buttons to elements with closing tags like <div>.

let table = new DataTable('#myTable');
 
new DataTable.Buttons(table, {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
});
table.buttons().container()
    .appendTo( '#toolbar' );

https://datatables.net/extensions/buttons/#Constructor

allan

Yes, absolutely. You can move the controls of the table around the document as you need using the API and some DOM manipulation methods.

Allan