How to implement a toolbar

tsagadar

Hello

I love the simplicity of DataTables to create powerful grids. One thing that I however feel is lacking is the support of a toolbar (similar to what Flexigrid offers: http://www.flexigrid.info/). This would come in handy to nicely place a "Create" and "Delete" (maybe even "Edit") action icons in the footer of the grid.

Is there already a workaround to implement such action icons or would a toolbar we a new feature request?

Thanks

Jens Gutzeit

Where is the problem? You can add ... to your table markup just like you have done with the thead section, put some buttons in there and then bind dataTables API functions (or custom ones) for add, delete and so on, on them. The great controll over the markup is the most important reason I'm using dataTables.

tsagadar

Thanks for the input - I was not aware of that.

Is it correct to state that this solves the issue as long as the first column is wide enough to contain all the toolbar icons?

Jens Gutzeit

You can add HTMLs colspan attribute to your toolbars TH-element to let it span accros as much columns as you need it be.

allan

It's also possible to use sDom ( http://datatables.net/usage/options#sDom ) to create a DIV element anywhere in the range of DataTables' DOM control which you can then stick whatever elements you want into.

If you wanted to take it a step further, you and use the plug-in API to define your own 'character' element for sDom, which will place your toolbar where ever you want: http://datatables.net/development/features :-)

Regards,
Allan

tsagadar

Great input! I went for the sDom approach to add a toolbar at the top that looks similar to Flexigrid (below the ASP.NET MVC code in case anyone is interested)

[code]
$(document).ready(function() {
$('#yields').dataTable({
"aoColumns": [
null,
null,
{ "bSortable": false, "bSearchable": false, "sWidth": '80px' }
],
"bStateSave": true,
"bLengthChange": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"<"toolbar">lfr>t<"F"ip>' // add custom div for toolbar
});

// attach toolbar
$("div.toolbar").replaceWith('Add');

// handle toobar events
$('#add').click(function() {
window.location.href = "<%= Url.Action("Create") %>";
});
});
[/code]

talkitivewizard

Man I was looking for an example like this. Allan, you should use one simular to this one in your documentation to show that one can do something like this. I was trying to "figure it out" but I wasn't successful. This example however did the trick. thanks tsagadar for posting this up here.

allan

Yup - sounds reasonable. I've created the new example and I'll incorporate it into the next release.

Regards,
Allan

curtis

Thansk for this post. tsagadar could you post your CSS for your toolbar because I have an issue with mine?

Thanks

paky

Good sample !!!!! Whereas the arrival of the Button (see toolbar e.g.) in the plugin uiJquery 1.8. You might think a add.ons for next datatable release !

Hi all