Just a simple example of client side filtering (search inside a table in jsgrid)

[iusondemand]

For me was very difficult to understand how to make it working "filtering: true,"

So I solved the issue, but I suggest to add to the documentation. I don't know how to submit, so I write here.

Searching in the table can be done locally or using external datas. Searching is called "filtering" because your table will show only searched contents.

"filtering: true," let you add the first row as a search console. The way it works depends upon you. These the main principles:

1. togheter with filtering:true set also controller, for example: controller: db,

    $("#jsGrid").jsGrid({
      ... 
      filtering: true,
      controller: db,
    });
   

2. set db (before, so it's global) for example::

    var db = { 
    	loadData: function(filter) { 
    		return $.grep(clients, function (group) { 
    			return (filter.Name === undefined || group.Name === filter.Name || group.Name.search(filter.Name) >-1 || group.Name.toLowerCase().indexOf(filter.Name) != -1); 
    		}); 
    	},
    	insertItem: null
    }
   

There are 4 criterias (OR):

filter.Name === undefined || group.Name === filter.Name || group.Name.search(filter.Name) >-1 || group.Name.toLowerCase().indexOf(filter.Name) != -1

Explaination:

1. let you show all contents
2. match exact search
3. match partial search, case sensitive
4. match partial search, case insensitive

The more used are 1 and 4, but you can customize as you like.

[cliftonm]

Thank you! This saved me hours of figuring out from the js-grid documentation how to do this!

[boxcleverliam]

Thank you @iusondemand !

In your code, clients and Name refer to data in the example in the documentation.

I made another version of loadData which works with whatever columns you set on the grid. It expects the records to be in data_array. It does a case-insensitive substring match.

loadData: function(filter) {
	return $.grep(data_array, function (group) {

		// Assume that the row is a match for the filter.
		// Test each part of the filter against the row.
		// If any non-empty part does not match, then return false early.
		for(filter_column_name in filter)
		{
			if(filter[filter_column_name] !== '')
			{
				if(group[filter_column_name].toLowerCase().indexOf(filter[filter_column_name].toLowerCase()) === -1)
				{
					return false;
				}
			}
		}

		return true;
	}); 
},