jQuery Flexigrid AJAX Asynchronous Search

Flexigrid is one cool lightweight jquery plugin to create javascript ajax dynamic table. It’s official site define flexigrid as Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Moreover, we can use flexigrid to show search results asynchronously (without reloading page) based on user’s keywords.

Javascript code

$("form[name='filter']").submit(function(){ //invoke function when user click search button
	var start_date = this.start_date.value; //start_date input by user

	$("#grid").flexOptions({
		params: [
			{ name: 'start_date', value: start_date }
		]
	});
	$("#grid").flexReload();

	return false; //prevent form to reload page
});

Server side (PHP) code. PHP can read start_date variable sent by flexigrid using

$_POST["start_date"];

And voila!

Leave a Reply

Your email address will not be published. Required fields are marked *