YouTip

jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Create CRUD Application jEasyUI Create CRUD DataGrid jEasyUI Form CRUD Application jEasyUI Create RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Create Drag and Drop Shopping Cart jEasyUI Create School Timetable jEasyUI Menu and Button jEasyUI Create Simple Menu jEasyUI Create Link Button jEasyUI Create Menu Button jEasyUI Create Split Button jEasyUI Layout jEasyUI Create Border Layout jEasyUI Create Complex Layout jEasyUI Create Accordion jEasyUI Create Tabs jEasyUI Dynamically Add Tabs jEasyUI Add Auto Play Tabs jEasyUI Create XP Style Left Panel jEasyUI DataGrid jEasyUI Convert HTML Table to DataGrid jEasyUI Get Selected Row Data jEasyUI Add Search Functionality jEasyUI Add Toolbar jEasyUI Create Complex Toolbar jEasyUI Set Frozen Columns jEasyUI Dynamically Change Columns jEasyUI Format Columns jEasyUI Set Sorting jEasyUI Custom Sorting jEasyUI Create Column Group jEasyUI Add Checkbox jEasyUI Custom Pagination jEasyUI Enable Row Editing jEasyUI Extend Editor jEasyUI Column Calculation jEasyUI Merge Cells jEasyUI Create Custom View jEasyUI Create Footer Summary jEasyUI Conditional Row Background Color jEasyUI Create PropertyGrid jEasyUI Expand Row Details jEasyUI Create SubGrid jEasyUI Display Massive Data jEasyUI Add Pagination Component jEasyUI Window jEasyUI Create Simple Window jEasyUI Custom Window Toolbar jEasyUI Window and Layout jEasyUI Create Dialog jEasyUI Custom Dialog jEasyUI Tree jEasyUI Create Tree with Markup jEasyUI Create Async Tree jEasyUI Tree Add Nodes jEasyUI Create Tree with Checkbox jEasyUI Tree Drag and Drop Control jEasyUI Tree Load Parent/Child Nodes jEasyUI Create Basic TreeGrid jEasyUI Create Complex TreeGrid jEasyUI TreeGrid Dynamic Load jEasyUI TreeGrid Add Pagination jEasyUI TreeGrid Lazy Load Nodes jEasyUI Form jEasyUI Create Async Submit Form jEasyUI Form Validation jEasyUI Create Tree ComboBox jEasyUI Format ComboBox jEasyUI Filter ComboBox DataGrid jEasyUI Reference jQuery EasyUI Plugins jQuery EasyUI Extensions jQuery EasyUI DataGrid – Display Massive Data with Virtual Scroll View jEasyUI Create Simple Window Deep Dive Programming Software Utilities Public Speaking Computer Servers Software Technical Reference Information Web Scripts Web Design and Development Development Tools jQuery EasyUI DataGrid - Adding Pagination Component This example demonstrates how to load data from a server-side and how to add a pagination component to a DataGrid. Create DataGrid To load data from a remote server-side, you should set the 'url' property, and your server-side should return JSON format data. Please see the DataGrid documentation for more information about its data format.

Item ID	Product ID	List Price	Unit Cost	Attribute	Stauts

We define the DataGrid columns and set the 'pagination' property to true, which will generate a pagination toolbar at the bottom of the DataGrid. The pagination will send two parameters to the server: page: The page number, starting from 1. rows: The number of rows per page. Server-side Code $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 = $row; $rs = mysql_query("select * from item limit $offset,$rows"); $items = array(); while($row = mysql_fetch_object($rs)){ array_push($items, $row); } $result = $items; echo json_encode($result); Download jQuery EasyUI Example jeasyui-datagrid-datagrid2.zip jQuery EasyUI DataGrid – Display Massive Data with Virtual Scroll View jEasyUI Create Simple Window