Single Field Search in datagrid [Solved]

[Darrel]

Hello,

I'm trying to integrate the single search field in the datagrid referring the following post: http://www.jeasyui.com/forum/index.php?topic=3420.0
Changes have been done in the code referred from the thread. It works as expected.

However I'm facing one problem. Which is related to incorrect pagination options. Whenever I change the pageSize to some value greater than 10,
for example 50, and then enter my search criteria in the one search field, it filters and fetches the records, but the page size is set to 10 instead of being 50. I've tried the below code which works but filters and sets only the first 10 rows.

Code:

function doSearch(inp){
	var rows = [];
	var table_data = $('#dg').datagrid('getRows');

	inp = inp.toUpperCase();

	$.map(table_data, function(row){
		for(var p in row)
		{
			var v = row[p];
			var regExp = new RegExp(inp, 'i'); // i - makes the search case-insensitive. 

			if(regExp.test(String(v))) 
			{
				rows.push(row);
				break;
			}
		}
	});

	$('#dg').datagrid('loadData', rows);
}

When I use the below code, then the grid loads all the data instead of loading the data that had to be filtered. i.e the grid is loaded as if it was refreshed and
loads the initial data.

Code:

function doSearch(inp){
	var rows = [];
	var table_data = $('#dg').datagrid('getRows');

	inp = inp.toUpperCase();

	$.map(table_data, function(row){
		for(var p in row)
		{
			var v = row[p];
			var regExp = new RegExp(inp, 'i'); // i - makes the search case-insensitive. 

			if(regExp.test(String(v))) 
			{
				rows.push(row);
				break;
			}
		}
	});

	//$('#dg').datagrid('loadData', rows);
	$('#dg').datagrid({
		pageSize: $('#dg').datagrid('options').pageSize,
		loadData: rows
	});
}

Please could you tell me where I must be going wrong in setting the page size of the filtered criteria.

Also is it possible to create a single search field control and bind the doSearch() function with the input box as shown in the following link:
Thread link: http://www.jeasyui.com/forum/index.php?topic=3342.0
Fiddle link: http://jsfiddle.net/gdXCX/

Thanks & Regards,
Darrel

[Darrel]

Hello,

Referring to the following link:    http://www.jeasyui.com/forum/index.php?topic=3267.0
I was able to add the textbox search filter in the pagination section of the datagrid.
Also I was able to fix the pagSize issue as well

Below are the changes that I've carried out to accomplish the same.

HTML code:

Code:

<TABLE id="dg"></TABLE>

Javascript code:

Code:

var table_data = [];
var g_pageSize  = "";

//below function is used to temporarily store the records from the datagrid
function getTableData()
{
	table_data = $('#dg').datagrid('getRows');
	g_pageSize = $('#dg').datagrid('options').pageSize;
}

//below function is used to set the blur event for the pagination search box
function assignSearch()
{
	$('[name="srch_fld"]').blur(function(event) {
		//if (event.which == 13) {
			doSearch($(this).val());
		//}
	});
}

function fetchData()
{
	//code to fetch the date from the database.

	var pager = $('#dg').datagrid('getPager');
	var input = $('<input id="srch_fld" name="srch_fld" type="text" value="' + inp + '">').appendTo('body');
	//pager.pagination({buttons:input});
	pager.each(function(){
		$(this).pagination({
			buttons: input.clone()
			//buttons: $('#custommerButtons').clone()
		})
	});

	$("body > #srch_fld").remove();	 //removing the extra elements created due to clone() that are getting attached to the body directly.

	assignSearch();	//call to assign blur event
}

function doSearch(inp)
{
	var rows = [];

	inp = inp.toUpperCase();

	var l_pageSize = $('#dg').datagrid('options').pageSize;

	if(!table_data.length || l_pageSize != g_pageSize)
	{
		getTableData();
	}

	$.map(table_data, function(row){
		for(var p in row)
		{
			var v = row[p];
			var regExp = new RegExp(inp, 'i'); // i - makes the search case-insensitive. 

			if(regExp.test(String(v))) 
			{
				rows.push(row);
				break;
			}
		}
	});

	if(inp != "")
	{
		alert("Found records: " + rows.length);
		$('#dg').datagrid('loadData', rows);
	}
	else
	{
		$('#dg').datagrid({
			columns: col_data,
			url: testing_url,					//call to remotely load data
			singleSelect:true,
			pagination: true,
			pagePosition: 'both',
			pageSize:l_pageSize,
			multiSort:true,
			remoteSort:false,
			height:'auto'
		});
	}

	var pager = $('#dg').datagrid('getPager');
	var input = $('<input id="srch_fld" name="srch_fld" type="text" value="' + inp + '">').appendTo('body');
	//pager.pagination({buttons:input});
	pager.each(function(){
		$(this).pagination({
			buttons: input.clone()
			//buttons: $('#custommerButtons').clone()
		})
	});

	$("body > #srch_fld").remove();	 //removing the extra elements created due to clone() that are getting attached to the body directly.

	assignSearch();	//call to assign blur event
}


//call to the database
fetchData();

Regards,
Darrel Viegas