Creating a custom tool bar for Datatables
Creating a custom tool bar for Datatables
jamesjw007
Posts: 35Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
Allan
Does http://www.datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/ do what you want (except not using 'buttons') ?
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.
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.
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