server-side filtering issue

[jcf378Participant]

I am encountering a problem with server-side filtering, with an editable jqxGrid that I would like to also perform server-side filtering, sorting, and paging. The sorting and paging are working fine. I believe the problem is occurring somewhere in the proper transmission of the filter-specific “$GET[]” variables to the data.php file once the appropriate filter is selected in the client-side jqxGrid. I suspect this is where the problem is because I can manually append dummy paging/sorting/filtering $GET variables to the URL of my data.php file as such:

http://…data.php?pagenum=0&pagesize=100&filterscount=1&filtervalue0=samplecriteria&filtercondition0=EQUAL&filterdatafield0=field1&filteroperator0=AND

and this will return a text page of the appropriately filtered records in an array. So, I believe that suggests the data.php file is functioning properly, but somehow is not receiving the proper “$GET” variables when I choose the filter criteria on the client-side. Interestingly, when I do select a filter criteria, it renders the ‘filtered column’ with the appropriate CSS styling of a filtered column, but the data does not actually filter out. All of the appropriate CSS and jqwidget libraries are properly listed in the page’s header. Again, serverside sorting and paging are working fine.

Below are the relevant sections of my primary source code – I can provide the data.php as well, but again, I don’t think that’s necessarily where the bug is, but rather it lies somewhere in the source code transmission of the $GET variables to the data.php file:

  	var data = {};
 	var theme = 'shinyblack';
    	var source =
	{
        datatype: "json",
        datafields: [
		{ name: 'ID' },
		{ name: 'field0', type: 'date' },
		{ name: 'field1', type: 'string' },
		{ name: 'field2', type: 'string' }],
		id: 'ID',
        url: 'data.php',
	cache: false,
	root: 'Rows',
        sortcolumn: 'field0',                
	sortdirection: 'desc',
        beforeprocessing: function (data) {
           source.totalrecords = data[0].TotalRows;	},
  	sort: function (){
		$("#jqxgrid").jqxGrid('updatebounddata', 'sort');	},
        filter: function () {
            $("#jqxgrid").jqxGrid('updatebounddata', 'filter'); },
 	updaterow: function (rowid, rowdata, commit){
			var data = "update=true&" + $.param(rowdata);
			$.ajax({
				dataType: 'json',
				url: 'data.php',
				cache: false,
				data: data,
				success: function (data, status, xhr){
					commit(true);
				},
				error: function(jqXHR, textStatus, errorThrown){
					commit(false);
				}
			});
		   }
    		};
//////////////////////////////////////////////////////////////

	var dataAdapter = new $.jqx.dataAdapter(source);            
	var editrow = -1;
    	$("#jqxgrid").jqxGrid({
        source: dataAdapter,
	width: 1100,
	autoheight: true,
	pageable: true,
	pagesize: 100,
	pagermode: "simple",
	virtualmode: true,
        rendergridrows: function () {
          return dataAdapter.records;
          },
        theme: theme,
	rowsheight: 30,
	altrows: true,
	sortable: true,
	showsortcolumnbackground: false,
	showfiltercolumnbackground: true,
        filterable: true,
        columnsresize: true,
        autoshowfiltericon: false,
        columns: [
		{ text: 'ID', datafield: 'ID', width: 100 },
		{ text: 'field0', datafield: 'field0', width: 100 },
		{ text: 'field1', datafield: 'field1', width: 100 },
		{ text: 'field2', datafield: 'field2’, width: 100}.............
		{ text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
			return "Edit";
		}, buttonclick: function (row) {
			editrow = row;
			var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
			$("#ID").val(dataRecord.ID);
			$("#field0").val(dataRecord.field0);            
			$("#field1").val(dataRecord.field1);            
			$("#field2").val(dataRecord.field2);            
			$("#popupWindow").jqxWindow('open');
			}
		}]
	});

[Author]

Posts