Datagrid pagination trouble

[sidkdbl07]

I'm using .Net MVC 3 and loading a datagrid via JSON.

The HTML:

Code:

    ....
    <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.blockUI.js" type="text/javascript"></script>
    <link href="../../Content/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/themes/default/tree.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/themes/default/datagrid.css" rel="stylesheet" type="text/css" />
    ...
    <table id="ListItemsGrid"></table>
    ...

The Javascript to instantiate the Datagrid:

Code:

jQuery("#ListItemsGrid").datagrid({
   title: "Inventory List",
   url: "/Categories/GetJSONItemsList",
   queryParams: { ID: '1' }, // This is hard-coded
   pagination: true,
   width: 600,
   height: 300,
   columns: 
                        [[
                            {   field: 'ID',
                                title: 'ID',
                                sortable: true,
                                width: 65 
                            },
                            {   field: 'Name',
                                title: 'Name',
                                sortable: true,
                                width: 400 
                            },
                            {   field: 'Location',
                                title: 'Location',
                                sortable: true,
                                width: 100 
                            }
                        ]]
      });

The output of /Categories/GetJSONItemsList:

Code:

[
{"ID":1,"Name":"Canon Sureshot V098","Location":"Vernon"},
{"ID":2,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":3,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":4,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":5,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":6,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":7,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":8,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":9,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":10,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":11,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":12,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":13,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":14,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":15,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":16,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":17,"Name":"Canon Rebel X2i","Location":"Calgary"}
]

I've attached a screen capture of the resulting Datagrid (capture.png). If I click on the "next page" pagination button, all of the elements appear (all 17 on one page). I've included a screen shot of that too (capture2.png).

EDIT:
When I add the following code:

Code:

jQuery("#ListItemsGrid").datagrid({
...
 onLoadSuccess: function (data) {
    jQuery.each(data, function (index, o) {
       alert(o);
    })

I first get an alert that says "17" and then i get a second alert that says "[object: Object],[object: Object],[object: Object],[object: Object]......" 17 times.
However, when I just call /Categories/GetJSONItemsList I get the JSON array shown previously.

My MVC Controller is as follows:

Code:

        [HttpPost]
        public JsonResult GetJSONItemsList(int ID)
        {
            Category aCategory = new Category(ID);
            List<Item> itemsInCategory = aCategory.GetItemsInCategory();
            return this.Json(itemsInCategory, JsonRequestBehavior.AllowGet);
        }

[stworthy]

When set pagination to true, the datagrid will send page and rows parameters that indicate the page number and the record count per-page to server. The server should get page and rows parameters and then return the specified records.
Please refer to the pagination tutorial:
http://www.jeasyui.com/tutorial/datagrid/datagrid2.php

[Ellipsis]

When I enable pagination the requerst does not contain extra parameters like page or rows....

What can I be doing wrong?

Update: bug when using loader, new post under Bugs.

[dtucker]

I still can't get this to work. Can you see if I'm missing something. I tried following the example but it is not working. It is failing at ".splice == 'function'" because I'm returning json data. My grid populates just not paging correctly.

Code:

$('#dgMostVisitedPages').datagrid({
		                  url: 'MostVisitedPages/MostVisitedPages.php?orgid='+ _selectedOrganization,
		                  pagination:'true', 
		                  singleSelect:'true', 
		                  striped:'true', 
		                  fitColumns:'true'
		                  
		              });

Code:

<table id="dgServiceCategory" title="Service Categories" class="easyui-datagrid" toolbar="#toolbarServiceCategory" singleSelect="true">
				<thead>
					<tr>
						<th data-options="field:'categoryid',width:80" hidden="true">ID</th>
						<th data-options="field:'category',width:50" >Category</th>
					</tr>
				</thead>
			</table>
			<div id="toolbarServiceCategory">
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="AddServiceCategory()">New Category</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="EditServiceCategory()">Edit Category</a> 
				<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="DeleteServiceCategory()">Remove Category</a>
			</div>

Thanks
Dennis

[acreonte82]

I don't know how is your server side code ...

But I post the solution using PHP:

First : I take the parameters post from datagrid and then I calculate the offset... and some variables declarations...

Code:

$results=array();
$crud=array();

$page=isset($_POST['page']) ? intval($_POST['page']): 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']): 10;
$offset=($page-1)*$rows;

Second : I need to know the number of rows of my query

Code:

$sql=$dbh->query("SELECT * FROM table WHERE some_condition");
$sql->execute();
$result=$sql->fetchAll(PDO::FETCH_ASSOC);
$results["total"]=count($result);

If you see, and as the guide suggest, I put the total number of rows in the array called "results" with the field "total".

Third: retrive data from my query.. so I re-build a second query and put the $offset and the $rows variables in the LIMIT condition

Code:

$sql=$dbh->query("SELECT * FROM table WHERE some_condition LIMIT  ".$offset.",".$rows.";");
$rows=$sql->fetchAll(PDO::FETCH_ASSOC);

	foreach($rows as $row){
	
		array_push($crud, $row);  
	}  
	$results["rows"]=$crud;
	
	echo json_encode($results);  

I believe that code is very easy to understand..

Hope this can help you

[dtucker]

My server side code is:

Code:

<?php

$OrgID = $_REQUEST['orgid'];
$ServiceID =  (isset($_REQUEST['serviceid']) ? $_REQUEST['serviceid'] : 'null');

$ch = curl_init();

$headers = array(
		"Authorization: Bearer ymDgEVplomtSrLilwlztwCFOOika",
);
curl_setopt_array($ch, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_HTTPHEADER => $headers,
CURLOPT_URL => "http://ipaddress:port/agency/1.0/Select_Keyword?OrgID=" . $OrgID . "&ServiceID=" . $ServiceID . "&KeywordID=null"
		));
		$response = curl_exec($ch);
		curl_close($ch);
			
		$xml = preg_replace("/(<\/?)(\w+):([^>]*>)/", "$1$2$3", $response);
		$xml = simplexml_load_string($xml);
		
		$results = xml2array($xml);
		
		
		if (count($results) > 0)
		{
			if(isset($results['keyword'][0]))
			{
				$results = $results['keyword'];
			}
		}
		
		echo json_encode($results);
		
		function xml2array($xml)
		{
			$arr = array();
		
			foreach ($xml->children() as $r)
			{
				$t = array();
				if(count($r->children()) == 0)
				{
					$arr[$r->getName()] = strval($r);
				}
				else
				{
					$arr[$r->getName()][] = xml2array($r);
				}
			}
			return $arr;
		}

Also, I was wondering how to do it client side instead of server side.

The problem is the grid populates just fine just that the paging is messed up. Am i not returning the data correctly?

Thanks