Custom header filter triggering

[leonardorame]

Hi Oli, I wonder if there's a way to define when a change in the headerFilter will trigger the ajax request. I think those filter are tied to the blur event, but in a specific project I need to trigger the call when the user press Enter only.

[olifolkerd]

Hey @leonardorame

If the header filter is a input element it will update on keyup, search, change or blur.

Most of these event bindings are specifically added to the header filter by Tabulator to allow the filters to apply as the user is typing.

You would need to create a custom editor and pass it to the headerFilter parameter to undo these extra event bindings, in the case of the input editor:

//input element
var inputHeaderFilter = function(cell, onRendered, success, cancel, editorParams){

	//create and style input
	var input = $("<input type='text'/>");

	input.css({
		"padding":"4px",
		"width":"100%",
		"box-sizing":"border-box",
	})
	.val(cell.getValue());

	//submit new value on enter
	input.on("keydown", function(e){
		if(e.keyCode == 13){
			success(input.val());
		}
	});

	//remove extra event bindings added by tabulator
	setTimeout(function(){
		input.off("change type search keyup")
	}, 100)

	return input;
},

The setTimeout function is a bit of a hack to allow Tabulator time to add the extra event bindings to the editor and the remove them.

Let me know if that helps.

Cheers

Oli :)

[leonardorame]

Hi Oli, can you re-open this?.

I tested your code, but found it only works on in non-ajax mode, how an I adapt this to work with ajax?.

[olifolkerd]

Hey @leonardorame

It works fine on both local and ajax my end (using chrome and the dev version of 3.5). the way the filtering is built should mean it isnt possible to only work one way, the filters are set before the filters are then triggered either locally or remotely.

Is the request not being triggered or does it not match up with the header filter?

Cheers

Oli :)

[leonardorame]

Sorry Oli, my fault. I was using a customPaginator that was removing the filters array.

By the way, is there a way to do a POST containing a JSON object with all the filters and sorters?. For me is difficult to parse the array sent in the GET request.

[olifolkerd]

Hey @leonardorame

You can use the ajaxConfig option for that:

$("#example-table").tabulator({
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
    ajaxConfig:"POST", //ajax HTTP request type
});

Cheers

Oli :)

[leonardorame]

Thanks, everything is working perfectly right now. You can close this.