Creating a custom tool bar for Datatables

jamesjw007

I have been tasked with adding buttons to the DataTables.

To start I have 4 columns (no hidden).

The very first column contains Department. If that contains only one unique value (IE "Computer") I don't need to do anything.

If it contains two or more unique values (IE "Computer" "Admin" "Finance" etc) I then need to show a button for each "Department" as well as an "All" or "Clear" to show everything again.

I already have the CSS done for the buttons. They would need to go to the right of or below the 'length' ("show 10 , show 50, show 100").

Then when they click these buttons it would filter the table to only show that department.

I'm pretty sure this is possible, but I'm not sure where to begin to add this customization. Any help is appreciated.

Here is all the code I use for DataTables on this page.

[code]
jQuery('#ml_dyntable').dataTable({
"iDisplayLength": -1,
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers"
});
[/code]

jamesjw007

Anyone have any ideas? Where to start? I looking at the tool bars example and couldn't get what I needed working.

jamesjw007

Anyone, pointers, ideas, an article/page I may have missed to get this started/going?

jamesjw007

Is this just not possible?

allan

Perhaps you can link us to what you've got based on the toolbar example? If all you want are a number of buttons that trigger filtering in the table, then you should just need to add event handlers to the buttons which will call fnFilter .

Allan

aaronw

I'm not sure I understand how you plan to go about this. Are these buttons going to be based on what is viewable right now? So if the user changed the length of the display to 25 instead of 50 the buttons might all of a sudden need to show up, and then if it goes down to 10 they might vanish again?

Does http://www.datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/ do what you want (except not using 'buttons') ?

aaronw

I'm not really sure I understand. Would this http://www.datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/ be something like what you're interested in, except instead of buttons, it's using a drop down list?

jamesjw007

@Allan it is on an internal intranet so I'm not able to provide a link. But I can provide more details that hopefully can better explain my dilemma.

I am using asp.net-mvc to populate data into a DataTables. I have that part working just fine.

There are three types of users. Member/Team Lead/Manager

A member can only see items they should see.
A Team lead can see their entire department.
A manager can see every department.

This task is for managers. They have requested a button for each department that when clicked will filter the table and show only that department.

I was wondering if this functionality can be added into the table structure somehow perhaps next to the 'show all entries' drop down box in the table that is there by default.

A table for a manager should have 7 different departments, I am curious if there is some way I can read all unique departments from the first column and make a button for each unique department. Then when they click on that button it filters the table to show only that department (I know there is a search for some reason they really really want buttons....) I would also need an extra button to 'clear' the filter and show all data.

Hope that helps a bit more than my original post.

jamesjw007

I will look and play around with fnFilter as well.

jamesjw007

so the fnFilter is doing exactly what I want it to do. Now I am curious if there is an easy way to tap into DataTables and only have it create a button if there is more than 1 department.

jamesjw007

@aaronw

No the buttons would be based of all the data current on oTable. So weather they select 10 or 50 or 100 if there are multiple departments in the entire data structure it would show the buttons weather only one department is visible or not.

The fnFilter is for sure helping me get to where i need to be, the only part I am having trouble with now is knowing how to tap into the data structure and see if there is multiple departments and then show buttons if there are.

allan

> Now I am curious if there is an easy way to tap into DataTables and only have it create a button if there is more than 1 department.

No - that is logic you would need to add. In DataTables 1.10 you might be able to do something like:

[code]
if ( table.colum( n ).data().unique().length > 1 ) {
... create
}
[/code]

In DataTables 1.9- you can use the fnGetColumnData plug-in to do something similar.

Allan