CODEWITHSUNDEEP
jquerydatatables
Jeff Davidson
Jeff Davidson

Reputation: 1929

Adding Button to table footer

I'm looking for a way I can add a "Add New" button to my datatables footer area so that when clicked will send the user to the add new form. I've looked on the datatables website and not sure if I should be using this or not.

http://datatables.net/extras/tabletools/

Any other thoughts on this?

var oTable = $('#users').dataTable({
    "bAutoWidth": false,
    "aoColumnDefs": [
        { "sWidth": "60px", "aTargets": [ 0, -1 ] },
        { "bSortable": false, "aTargets": [ -1 ] },
        { "sClass": "center", "aTargets": [ 0, -1 ] }
    ]
} );

Upvotes: 2

Views: 8037

Answers (1)

mbeasley
mbeasley

Reputation: 4874

You shouldn't need TableTools.

In datatables, you can set the sDOM property which specifies the DOM layout of the table. You can read more about it here but the main point of bringing it up is that it will allow you to specify a custom div to place in your footer. You can then use jQuery to append your button to that div or something like that. Furthermore, CSS should work fine for positioning that element within your footer.

Here's more on the Datatables DOM settings

And here's a good question in the Datatables forum that might help you out

Good luck!

UPDATE: I just went to your site and looked at your datatables setup. Because you're using a template, the datatables code that they've provided has been bastardized to some extent - which in turn means that some of the 'defaults' that you may see in the datatables.net support site could not apply. They definitely changed the sDom default. Here's what they're using... : 

'<"top"lf<"clear">>rt<"actions"<"actions-left"i><"actions-right"p>>'

It looks like "actions" is their footer div. The easy way would be to dynamically add the button via $(selector).append(). If you need help with that, I would visit the jQuery site.

Again - best of luck!

UPDATE 2: In response to your comment:

What would be the selector then?

Your selector will be '#actions'. But again - if you're unfamiliar with the $ syntax above, you'll be doing yourself a favor by reading up on jQuery. My apologies if you're already familiar with jQuery and were just looking for the selector ID to use (in which case, for future reference - anything in quotation marks within the datatables sDom parameter will be the ID for that div which you can use in your selector).

Upvotes: 1

Related Questions