CODEWITHSUNDEEP
datatables
Michael Hatch
Michael Hatch

Reputation: 45

JQuery Datatables SearchPane Filter Value

I am using the SearchPanes extension to Datatables, I am trying to capture the value of the item in the SearchPane they chose, it appears that since SearchPanes uses filter() instead of search() that value is not available. Am I wrong?

Upvotes: 1

Views: 1714

Answers (2)

TefoD
TefoD

Reputation: 177

Jsut want to add, how the search pattern or the preselected searchPanes filters can be erased on demand - is stateSave is been enabled.

.on( 'stateLoadParams.dt', function (e, settings, data) {
                    //get the last search pattern, if this setting is enabled
                    //if not, erase last search
                    if (!cnf_lastSearch) {
                        //erase search input field
                        data.search.search = '';
                        data.start = 0;
                        //console.log(data)
                    } else {

                    }
                    //search through search panes array and erase content
                    if (!cnf_searchPanes) {
                        $.each((data['searchPanes']['panes']), function( i, val ) {
                          val.selected = '';
                        });
                    }
            })

Upvotes: 0

andrewJames
andrewJames

Reputation: 21900

You can access the selections as follows:

1) Add stateSave: true to the DataTable initialization definition. See this example.

This will cause all selections to be saved in the browser's local storage.

2) Use the following logic to access the browser's local storage:

var myStorage = window.localStorage;
var searchPanes = JSON.parse(myStorage.getItem('yourStorageIndexGoesHere'));
//console.log(searchPanes); // the full JSON - large!
//console.log(searchPanes['searchPanes']['panes']); // one object per search pane
searchPanes['searchPanes']['panes'].forEach(function(pane) { 
  console.log('ID = ' + pane.id + ' - selected: ' + pane.selected); 
});

In my case, I used the search panes shown in this demo.

Here is a screenshot with some selections:

enter image description here

Here is what the sample code writes to the browser console for the above selections:

enter image description here

The "ID" data value is a zero-based column index. So, column 3 (index 2) is the Office column, and column 6 (index 5) is the Salary column.

The related "selected" data are arrays, containing one or more value. You can iterate the arrays to get each separate value.

You will need to replace yourStorageIndexGoesHere with the actual name of your storage entry. The easiest (manual) way to find this is to perform a filter using SearchPanes, and then open your browser tools (usually F12). Then (assuming FireFox in my case) navigate to Storage > Local Storage > and select the relevant key text.

Points to Note:

a) This assumes you are OK with activating the "local storage" feature. It means that the browser will remember the last applied filter, and re-apply it when a user returns to the DataTable browser page. If users do not want that feature, then my solution will not be suitable for you.

b) I can't advise you on where you need to place the JavaScript I provided, because I don't know what you want to do with this information. But, for example, you might want to use it after every draw() event - in which case, see here.

Upvotes: 2

Related Questions