JQuery Easyui Data Grid Add pagination example

Source: Internet
Author: User


Create a data grid

To load data from a remote server, you should first set the URL attribute, and the server side will return the JSON-formatted data. View the data document for more data format information.

<table id= "tt" class= "Easyui-datagrid"

style= "width:600px;height:250px" url= "datagrid2_getdata.php" title= "Load Data" iconcls= "Icon-save"

rownumbers= "true" pagination= "true" >

<thead>

<tr >

<th field= "itemid" width= ">item id</th> <th field=" "ProductID" Width= ">product"

id</th>

<th field= "ListPrice" width= "align=" right ">list price</th>" <th

" UnitCost "width=" align= "right" >unit cost</th> <th field= "attr1" width= ">attribute</th"

>

field= "status" width= "<th" align= "center" >Stauts</th>

</tr>

</thead >

</table>

We define the data grid column and set the "pagination" property to True, so a paging toolbar is generated at the bottom of the data grid. Pagination will send two parameters to the server:

Page: page number, starting value 1
Rows: lines are displayed per page

Server-side code

 

  code is as follows

$page = isset ($_post[' page '])? Intval ($_post[' page '): 1;
$rows = isset ($_post[' rows '])? Intval ($_post[' rows ']): 10;
//...
$rs = mysql_query ("SELECT count (*) from item");
$row = mysql_fetch_row ($RS);
$result ["total"] = $row [0];
 
$rs = mysql_query ("SELECT * from Item limit $offset, $rows");
&NBSP
$items = Array ();
while ($row = Mysql_fetch_object ($rs)) {
Array_push ($items, $row);
}
$result [rows] = $items;
 
Echo json_encode ($result);

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.