filtering vs loadData

Hi,

I am dynamically rendering the grid with an ajax call that is working fine. I am nevertheless getting challenge to make the filter working.

var urlField = function(config) {
			jsGrid.Field.call(this, config);
		};
		
        urlField.prototype = new jsGrid.Field({

			css: "url-field",            // redefine general property 'css'
			align: "center",              // redefine general property 'align'

			myCustomProperty: "foo",      // custom property

			sorter: function(url1, url2) {
				return url1 - url2;
			},

			itemTemplate: function(value) {
				return "<a href='/abonnes/"+value+"' class='uk-icon-download uk-icon-button'></a>";
			}

		});
		
		jsGrid.fields.url = urlField;
        		
        $("#jsGrid").jsGrid({
            height: "auto",
            width: "100%",
            
			filtering:true,
            sorting: true,
		    paging: true,
            autoload: true,
			inserting: false,
			editing: false,
			
            pageSize: 15,
            pageButtonCount: 5,
     
            controller: {
			   loadData: function() {
			        var d = $.Deferred();
				    $.ajax({
						type: "GET",
						url: "/index.php?option=com_directory&view=fichiers&type="+type+"&format=raw",
						dataType: "json",
						success:function(response){ 
					       d.resolve(response); 
						}
                	});
					return d.promise();
				}
			},
     
            fields: [
                { name: "Id", title:"#", type: "number", width: 20, filtering: true },
                { name: "Titre", title:"Titre", type: "text", width: 250, filtering: true },
				{ name: "Action", title:"", type: "url", width:40}
            ]
        });

when I enter some letters I need to press enter but the enter pressing call again the loadData. could you help me please ?

[tabalinas]

@nono1974, the actual filtering should be implemented by your code. In the demos it’s implemented in db.js. The filter is coming in loadData as the first parameter. So you have to apply it on your dataset. If you don’t want to reload data from the server you could do it in loadData caching the result. In my example I use self-evaluating function, but you can cache data anywhere:

function applyFilter(data, filter) {
    return $.grep(data, function(item) {
          // return true/false depending on filter condition
          return (!filter.Name || item.Name.indexOf(filter.Name) > -1) 
    });
};

// grid config
controller: {
loadData: (function() {
    var data;
    return function(filter) {
        if(data)
           return applyFilter(data, filter);

        return $.ajax({ /* request params */ }).then(function(result) {
            data = result;
            return applyFilter(data, filter);
        });
    };
}())
},

Please, checkout the following issue https://github.com/tabalinas/jsgrid/issues/32

[nono1974]

Hi

It is exactly what i did thank you.

regards

Arnaud