jQWidgets Forums

Tagged: grid, jquery grid ajax calls, jqwidgets grid with Ajax

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Filter grid by my checkboxes Posts

January 27, 2014 at 9:13 pm Filter grid by my checkboxes #48479

Participant

Hello, i am trying to filter grid with my checkboxes and filter button as you can see below but i don’t know how can i add my string to ajax calling with jqwidget for data.php, I have there my function in javascript which make the string with filters on the top.

The XHR is now data.php?filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=10&_=1390855573537

But i would like to add my string – below is what i mean
data.php?filter1=Owner&filter2=Sales Agent&filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=10&_=1390855573537

I use this jqwidget template phpdemos\server_side_grid_sorting_and_paging

<!DOCTYPE html>
<html lang="en">
<head>
 	<script type="text/javascript">

		function filterGrid()
		{
			var data = '';
			var checkField = document.forms["filterForm"].contactTitle.length;
			
                for (var i = 0; i < checkField; i++)	{
                    if (document.forms["filterForm"].contactTitle[i].checked) {
                        data += 'filter' + i + '=' + document.forms["filterForm"].contactTitle[i].value + '&';	
                    }
                }

			alert(data);		

			return data;
		}	
	</script>
	
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var theme = 'classic';
        
            var source =
            {
                 datatype: "json",
                 datafields: [
					 { name: 'CompanyName', type: 'string'},
					 { name: 'ContactName', type: 'string'},
					 { name: 'ContactTitle', type: 'string'},
					 { name: 'Address', type: 'string'},
					 { name: 'City', type: 'string'},
					 { name: 'Country', type: 'string'}
                ],
				cache: false,
			    url: 'data.php',
				root: 'Rows',
				beforeprocessing: function(data)
				{		
					source.totalrecords = data[0].TotalRows;
				},
				sort: function()
				{
					// update the grid and send a request to the server.
					$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
				}
            };		
			
		    var dataadapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 600,
			    source: dataadapter,
                theme: theme,
			    autoheight: true,
				pageable: true,
				virtualmode: true,
				sortable: true,
				rendergridrows: function()
				{
					  return dataadapter.records;     
				},
                columns: [
                      { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                      { text: 'Contact Name', datafield: 'ContactName', width: 200 },
                      { text: 'Contact Title', datafield: 'ContactTitle', width: 200 },
                      { text: 'Address', datafield: 'Address', width: 180 },
                      { text: 'City', datafield: 'City', width: 100 },
                      { text: 'Country', datafield: 'Country', width: 140 }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
	<form id="filterForm" action="" onsubmit="return false;" >
		<fieldset>
		<legend>Contact title filters</legend>
			<label for="SalesRep">
				<input type="checkbox" id="SalesRep" value="Sales Representative" name="contactTitle">Sales Representative</label>
			<label for="Owner">
				<input type="checkbox" id="Owner" value="Owner" name="contactTitle">Owner</label>
			<label for="SalesAg">
				<input type="checkbox" id="SalesAg" value="Sales Agent" name="contactTitle">Sales Agent</label>
			<label for="IT">
				<input type="checkbox" id="IT" value="IT" name="contactTitle">IT</label>
				<input type="submit" value="filter" onclick="filterGrid()">
		</fieldset>
	</form>
    <div id='jqxWidget'">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

January 28, 2014 at 6:31 am Filter grid by my checkboxes #48491

Peter Stoev

Keymaster

Hi Bushwacka,

For adding custom variables to the Grid’s Ajax requests, please look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.