Custom buttons - Show All Except and Date buttons

ArielSAdamsNASA

Link to test case: https://jsfiddle.net/sp9wju8f/
Description of problem: Two questions.
1. How do I use a custom button to show all columns except one keyword?
2. How do I use a custom button to show all columns within the past six months?

kthorngren

How do I use a custom button to show all columns except one keyword?

One option is to use regex search. See the search() docs for details. See this example:
https://jsfiddle.net/kymdpa1x/

How do I use a custom button to show all columns within the past six months?

Use a range search plugin. See this example. You might be able to adapt this Data Range search plugin to meet your needs.

Kevin

ArielSAdamsNASA

@kthorngren

For the date button, I was more thinking of the dropdowns as seen in https://jsfiddle.net/ankepv5v/79/ but as custom buttons.

kthorngren

Is there a problem in the test case or are you just showing us your solution? If there is a problem please provide the steps to show the issue.

Kevin

ArielSAdamsNASA

@kthorngren

https://jsfiddle.net/go6v1t7b/1/

I want to use the dropdowns as separate custom buttons. So one custom button would be the Last 7 Days. For some reason, a custom button does not display and I can't get the function in the action.

kthorngren

The button doesn't show because you are missing dataTables.buttons.min.js. I added it here:
https://jsfiddle.net/axpfshd1/

Your test case doesn't have the correct Datatables styling integration files for Bootstrap. Use the Download Builder to obtain all the correct files.

Kevin

ArielSAdamsNASA

@kthorngren

I believe I have all the correct files: https://jsfiddle.net/178yqgx9/1/

Was missing: https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css

kthorngren

That works. But if you want the table to use Bootstrap styling, since you are loading Bootstrap, then you will need to load different files. See this BS Example.

Kevin

ArielSAdamsNASA

@kthorngren

Thank you, but I am not concerned about the styling. I want to put the Last 7 Days dropdown as a custom button. Is that possible?

https://jsfiddle.net/178yqgx9/1/

buttons: [{
//Want Last 7 Days here
text: 'CUSTOM BUTTON',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}]

kthorngren

Use a collection like this example. I added a very simplistic search plugin to handle clearing the search and last 7 days.
https://jsfiddle.net/8az24y3k/

Kevin

ArielSAdamsNASA

@kthorngren

Thank you very much! One last feature, I want to use saveState but it does not work for that custom button. It does work on another custom button I have which uses the search feature for a column as seen below.

{
text: 'My favorites',
action: function ( e, dt, node, config ) {
dt.column(26).search("True").draw();
dt.column(21).order([0, 'desc']).draw();
}
},

Updated fiddle: https://jsfiddle.net/7wfa9chL/

kthorngren

You need to use stateSaveParams to save the rangeSearch variable. Then use stateLoadParams to restore the variable for the search plugin. You might need to initialize the search plugin before initializing Datatables then in initComplete call draw() to run the search plugin after the rangeSearch variable is restored.

Kevin

ArielSAdamsNASA

@kthorngren

https://jsfiddle.net/Lp0oz85m/2/

Could you provide an example on how to use those Params? The documentation doesn't provide much for saving a variable and loading it.

kthorngren

See this example:
https://jsfiddle.net/erwscg0x/

Kevin

ArielSAdamsNASA

@kthorngren

Thank you! The button does save its state. However, when I apply this to a datatable with a collapsible searchpane which also saves its state, the records are gone in the searchpane as seen in the provided link. How would I save the state for both of these objects and show the records for the searchpane?

http://live.datatables.net/fotorewe/35/edit

kthorngren

Look at the browser's console. You are getting this error:

Uncaught ReferenceError: moment is not defined

Looks like you aren't including moment.js. See if adding it helps.

Kevin

ArielSAdamsNASA

@kthorngren I fixed the error. The custom button that uses moment still works (the save state no longer works for it). The only issue is the searchpane and save states.

http://live.datatables.net/fotorewe/38/edit

kthorngren

You have stateSaveParams twice. You can only have one option (same goes with all options). Combine the two functions.

Kevin

ArielSAdamsNASA

@kthorngren

Perfect, here is the working fiddle.

http://live.datatables.net/huwijuyo/1/edit

I added a class called active to the buttons so the background turns blue when the user clicks on it. How can I save the state of the class? So if Clear is clicked, the background stays blue even after refreshing the page or clicking Run with JS again.

kthorngren

Here are a few options I can think of. You can keep track of the class similar to the global variable rangeSearch uses for the search. Or you can just set the class based on the value of the restored rangeSearch value. Or you can get use button().node() to get the button's node and check it for the classes then save/restore that.

Kevin

ArielSAdamsNASA

@kthorngren

This is how far I got: http://live.datatables.net/huwijuyo/6/edit

Not sure what to do to implement the first option.

kthorngren

I would use buttons.buttons.name to name each button. Use this name as the button-selector and use button().node() to apply the classname and to use button().active().

Look towards the bottom of the test case to see the changes:
http://live.datatables.net/leranuco/1/edit

Kevin

ArielSAdamsNASA

@kthorngren

I added a new button under Last 7 Days. How would the if statement work for that button now? I tried using rangeSearch._d = moment().subtract(6, 'days')

http://live.datatables.net/yuzirixu/3/edit

ArielSAdamsNASA

@kthorngren Here is the updated link: http://live.datatables.net/yuzirixu/4/edit

ArielSAdamsNASA

I think I can just create another variable like so http://live.datatables.net/jodileti/1/ but if there is a better option, I would greatly appreciate it!

ArielSAdamsNASA

@kthorngren

How would I set Last 7 days selected as the default? I tried this.active(true); but the css does not work when the cache is cleared.

http://live.datatables.net/nebetuqa/2/edit

kthorngren

I'm assuming you want the 7 day search to be applied. In your code use Javascript hasOwnProperty() to see if the dateSearch exists in the loadedState variable. If it doesn't use button().trigger() to programmatically click the button to set the active. state and execute the search.

Kevin

ArielSAdamsNASA

@kthorngren

I tried to implement what you suggested but can't get it to work

if ( loadedState.hasOwnProperty( "dataSearch" )) {
table.button( '0-1' ).trigger();
rangeSearch = moment().subtract(6, 'days');
table.draw();
}

http://live.datatables.net/hohoyuyi/1/edit

ArielSAdamsNASA

@kthorngren

I got it to work, but the button is always selected even after clicking Clear and refreshing.

http://live.datatables.net/faporave/1/edit

ArielSAdamsNASA

@kthorngren

I believe I got it to work: http://live.datatables.net/qesulece/1/edit

I changed the dataSearch value for the clear button. Then I checked if dataSearch is equal to ' '. If it is, then the seven button is triggered.

Edit: I spoke too soon, still working on this.

ArielSAdamsNASA

@kthorngren

I still can't get this to work. Any suggestions? Thanks!