Anyway, to filter rows using Handsontable?

Question

I'm currently trying to add a search filter to a column in "handsontable" mode. I can use the callback the search plugin to hide the lines using css, but this breaks through the scroll. The search plugin also seems to only look at the first 100 or so tables. Is there any plugin that adds string filtering to handsontable?

Answer 1

For me, these are two cases for direct filtering using Handsontable. Column filters and / or search filter .

1. Individual column filter

One filed per column, allowing multiple filters to be applied simultaneously:

 function filter() { var row, r_len, col, c_len; var data = myData; // Keeping the integrity of the original data var array = []; var match = true; for (row = 0, r_len = data.length; row < r_len; row++) { for(col = 0, c_len = searchFields.length; col < c_len; col++) { if(('' + data[row][col]).toLowerCase().indexOf(searchFields[col]) > -1); else match=false; } if(match) array.push(data[row]); match = true; } hot.loadData(array); } 

Find a working example in this JS script

2. Search filter

A field that allows you to search for any value anywhere in the table:

 function filter(search) { var row, r_len, data = myData, // Keeping the integretity of the original data array = []; for (row = 0, r_len = data.length; row < r_len; row++) { for(col = 0, c_len = data[row].length; col < c_len; col++) { if(('' + data[row][col]).toLowerCase().indexOf(search) > -1) { array.push(data[row]); break; } } } hot.loadData(array); } 

Find a working example in this JS script

---

In both cases, if the data is intended to be modified, the integrity of the source data should be stored every time a filter is applied. You can refer to the first two links for more information on these two cases.

Please note that both functions can be combined and used simultaneously.

Answer 2

As far as I know, the search plugin will search for all the lines, but only select them, and only those that receive rendering. This means that due to lazy rendering (HOT only displays a visible window), if you tried to search using css, which are now blue, you will have a bad time. Instead, you can use the object that it spits back, which has all the matching strings.

From here, to hide inconsistent lines, it gets tough. What I did was write a simple function that physically modifies the data array so that the matching lines get to the top, and then I hide the rest. Thus, scrolling works fine.

Hope it works!

Answer 3

I have a requirement to do something like this. After some searches, I found the following demo:

http://my-waking-dream.blogspot.co.uk/2013/12/live-search-filter-for-jquery.html

However, I would be interested to know if anyone has any other approaches that are friendly with column sorting.

Answer 4

I'm not a JS expert, but there is a basic example of using http://jsfiddle.net/awyjnbj6/ . This is the answer to my question in Table Filter does not work with backspaces .

It includes:

 Handsontable.Dom.addEvent(searchFiled, 'keyup', function (event) { // debugger hot.loadData(tData); var queryResult = hot.search.query(this.value); rows = getRowsFromObjects(queryResult); console.log('searchFiled',searchFiled.value); console.log('rows',rows); console.log('tData', tData); var filtered = tData.filter(function (d, ix) { return rows.indexOf(ix) >= 0; }); console.log('filtered', filtered); hot.loadData(filtered); });