Title: Datagrid pagination trouble
Post by: sidkdbl07 on August 10, 2012, 09:19:38 AM
I'm using .Net MVC 3 and loading a datagrid via JSON. The HTML: .... <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: 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: [ {"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: 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: [HttpPost] public JsonResult GetJSONItemsList(int ID) { Category aCategory = new Category(ID); List<Item> itemsInCategory = aCategory.GetItemsInCategory(); return this.Json(itemsInCategory, JsonRequestBehavior.AllowGet); }
Title: Re: Datagrid pagination trouble
Post by: stworthy on August 12, 2012, 03:11:03 AM
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
Title: Re: Datagrid pagination trouble
Post by: Ellipsis on January 17, 2013, 04:59:04 AM
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.
Title: Re: Datagrid pagination trouble
Post by: dtucker on November 04, 2013, 04:06:06 PM
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. $('#dgMostVisitedPages').datagrid({ url: 'MostVisitedPages/MostVisitedPages.php?orgid='+ _selectedOrganization, pagination:'true', singleSelect:'true', striped:'true', fitColumns:'true' });
<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
Title: Re: Datagrid pagination trouble
Post by: acreonte82 on November 05, 2013, 01:42:23 AM
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... $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 $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 $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
Title: Re: Datagrid pagination trouble
Post by: dtucker on November 05, 2013, 07:32:30 AM
My server side code is: <?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
|