一，前端，使用EasyUI进行分页简单快捷，但是官网上的demo和网上的资料都没有一个很好的解释，因为官网上的分页说明中url指向的是返回json的后台方法，所有网上很多的介绍也是前端结合后台struts2的使用，但是大多数情况下人们的开发不一定使用到这个框架，所以自己改了一下前端供大家参考；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Custom DataGrid Pager</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can append some buttons to the standard datagrid pager
bar.</div>
</div>
<div style="margin:10px 0;"></div>
<table id="dg" class="easyui-datagrid" style="width:700px;height:250px">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List
Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit
Cost</th>
<th data-options="field:'attr1',width:240">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function getData(id, name, page, pageSize) {
$.post('../../../../services/TR/test', {
id : '34',
name : '56',
page : page,
pageSize : pageSize
}, function(rs) {
var rsJ = eval('(' + rs + ')');
var rows = rsJ.rows;
var total = rsJ.total;
$('#dg').datagrid("loadData", rsJ);
});
}
$(function() {
getData('ij', 'zhang', 1, 10);
$('#dg').datagrid({
title : '分页表测试',
pagination : true,//分页控件
rownumbers : true,//行号
//添加复选框
//frozenColumns : [ [ {
//field : 'ck',
//checkbox : true
//} ] ],
//顶部工具了
toolbar : [ {
text : '添加',
iconCls : 'icon-add',
handler : function() {
//数据添加处理
}
}, '-', {
text : '修改',
iconCls : 'icon-edit',
handler : function() {
//数据修改处理
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
//数据删除处理
}
} ]
});
var pager = $('#dg').datagrid('getPager'); // get the pager of datagrid
pager.pagination({
displayMsg : '当前显示{from}-{to}条记录 共{total}条记录',
beforePageText : '第',
afterPageText : '页 共 {pages} 页',
//点击下、前一页，首页、末页的时候做的事情
onSelectPage : function(pageNumber, pageSize) {
getData('ij', 'zhang', pageNumber, pageSize);
},
//改变一页大小后做的事情
onChangePageSize : function(pageSize) {
alert(pageSize);
},
//点击刷新按钮在刷新之前做的事情
onBeforeRefresh : function(pageNumber, pageSize) {
alert(1);
},
//点击刷新按钮在刷新之后做的事情
onRefresh : function(pageNumber, pageSize) {
alert(2);
}
//与分页效果在一块的底部工具栏
// buttons:[{
// iconCls:'icon-search',
// handler:function(){
// alert('search');
// }
// },{
// iconCls:'icon-add',
// handler:function(){
// alert('add');
// }
// },{
// iconCls:'icon-edit',
// handler:function(){
// alert('edit');
// }
// }]
});
});
</script>
</body>
</html>
二，后台，我后台使用的是注解式Jersey，你们也可以改成其他的方法。另外我里面的数据使用的是假数据，你们尽可以改为你们所需的数据，传的参数也尽可以改为你们查询时所传递的实际有效参数，@FormParam("page") int page, @FormParam("pageSize") int pageSize这些参数就是你们查数据的时候所用到的。
package cn.tongmap.mf.resource;
import javax.ws.rs.FormParam;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
/**
*
* @author lxzqz
*
*/
@Path("TR")
public class TestResource {
@POST
@Path("test")
@Produces("text/plain")
public String test(@FormParam("id") String id, @FormParam("name") String name, @FormParam("page") int page, @FormParam("pageSize") int pageSize) {
System.out.println(id + ";" + name);
String str1 = "{'total':13,'rows':[" +
"{'productid':'FI-SW-01','productname':'Koi','unitcost':10.00,'status':'P','listprice':36.50,'attr1':'Large','itemid':'EST-1'}," +
"{'productid':'K9-DL-01','productname':'Dalmation','unitcost':12.00,'status':'P','listprice':18.50,'attr1':'Spotted Adult Female','itemid':'EST-10'}," +
"{'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':38.50,'attr1':'Venomless','itemid':'EST-11'}," +
"{'productid':'RP-SN-01','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':26.50,'attr1':'Rattleless','itemid':'EST-12'}," +
"{'productid':'RP-LI-02','productname':'Iguana','unitcost':12.00,'status':'P','listprice':35.50,'attr1':'Green Adult','itemid':'EST-13'}," +
"{'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':158.50,'attr1':'Tailless','itemid':'EST-14'}," +
"{'productid':'FL-DSH-01','productname':'Manx','unitcost':12.00,'status':'P','listprice':83.50,'attr1':'With tail','itemid':'EST-15'}," +
"{'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':23.50,'attr1':'Adult Female','itemid':'EST-16'}," +
"{'productid':'FL-DLH-02','productname':'Persian','unitcost':12.00,'status':'P','listprice':89.50,'attr1':'Adult Male','itemid':'EST-17'}," +
"{'productid':'AV-CB-01','productname':'Amazon Parrot','unitcost':92.00,'status':'P','listprice':63.50,'attr1':'Adult Male','itemid':'EST-18'}" +
"]}";
String str2 = "{'total':13,'rows':[" +
"{'productid':'zhang','productname':'Koi','unitcost':10.00,'status':'P','listprice':36.50,'attr1':'Large','itemid':'EST-1'}," +
"{'productid':'quan','productname':'Dalmation','unitcost':12.00,'status':'P','listprice':18.50,'attr1':'Spotted Adult Female','itemid':'EST-10'}," +
"{'productid':'zhong','productname':'Rattlesnake','unitcost':12.00,'status':'P','listprice':38.50,'attr1':'Venomless','itemid':'EST-11'}" +
"]}";
if(page == 1) {
return str1;
} else {
return str2;
}
}
}
相关推荐
在本案例中，我们关注的是"jquery easyui pagination 分页插件扩展"，这是一个用于增强默认分页功能的自定义插件。 分页在数据展示中扮演着重要的角色，特别是在处理大量数据时，它能让用户按需加载和浏览数据，...
在本文中，我们将深入探讨如何将jQuery EasyUI的pagination分页功能与普通的HTML表格结合使用。jQuery EasyUI是一个基于jQuery的轻量级框架，它提供了一系列的UI组件，包括分页，这对于处理大量数据的展示非常有用。...
要实现jQuery EasyUI的分页功能，首先需要在HTML中引入EasyUI的CSS和JavaScript文件，并在需要分页的表格下方添加`<div>`元素，设置class为"easyui-pagination"。然后，通过JavaScript设置分页参数，如每页显示的...
总的来说，jQuery EasyUI 的 datagrid 分页机制为开发者提供了灵活且方便的方式来处理大量数据。选择哪种方法取决于项目需求，第一种方法更简单直接，适用于大多数情况；第二种方法则允许更复杂的交互和控制。
### jQuery EasyUI 分页功能详解 #### 一、概述 在使用jQuery EasyUI进行Web开发时，分页是一项非常实用且常见的功能。它能够帮助我们有效地处理大量的数据，提高用户体验。本文将详细介绍如何在jQuery EasyUI中...
5. **导航组件**：`tabs`（选项卡）、`accordion`（折叠面板）和`pagination`（分页）等组件，帮助组织和导航页面内容。 6. **其他组件**：如`tooltip`（提示信息）、`linkbutton`（链接按钮）、`switchbutton`...
通过设置`pagination`属性为`true`，并指定每页的记录数（`pageSize`），DataGrid会自动显示分页条。同时，它还支持页码跳转和记录总数的动态计算。 至于后端，`servlet`在这里扮演了处理HTTP请求的角色。当用户在...
这个框架的官方API中文版是开发者的重要参考资料，它详细解释了每个组件的用法、属性、方法和事件，使得国内开发者能够更加方便地理解和使用jQuery EasyUI。 首先，我们要理解jQuery EasyUI的核心概念。它主要基于...
- **属性（Options）**：每个组件都有多种可配置的属性，例如DataGrid的pagination（分页）、fitColumns（自适应列宽）等，通过设置这些属性可以定制组件的行为。 - **事件（Events）**：如onClick、onLoadSuccess...
### jQuery EasyUI 中文文档知识点概述 #### 一、jQuery EasyUI 概述 jQuery EasyUI 是一个基于 jQuery 的简化用户界面插件集合。它提供了一系列丰富的用户界面组件，可以帮助开发者快速构建美观且功能强大的 Web ...
本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档（完整）目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...
另外，还有诸如 `tabs`（选项卡）、`pagination`（分页）、`slider`（滑块）和 `datebox`（日期选择器）等组件，它们都是网页开发中的常见需求，jQuery EasyUI 都提供了对应的解决方案。 在使用过程中，遇到问题时...
jQuery EasyUI 是一款基于 jQuery 的前端开发框架，用于构建用户界面。它提供了许多方便的组件，如对话框、表格...在实际应用中，jQuery EasyUI 的 `Pagination` 分页组件能够极大地提升网页的用户体验和数据管理效率。
文档中提到了多个jQuery EasyUI的组件，例如Parser（解析器）、EasyLoader（简单加载）、Draggable（拖动）、Droppable（放置）、Resizable（调整大小）、Pagination（分页）、SearchBox（搜索框）、ProgressBar...
- **Pagination（分页）**：提供分页功能。 - **SearchBox（搜索框）**：带有搜索按钮的输入框。 - **ProgressBar（进度条）**：显示操作进度的进度条。 - **Tooltip（提示框）**：为元素添加悬停提示。 - **Mobile...
EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的功能，如表格布局、数据分页、排序、过滤等，常用于Web应用的数据展示。在本项目中，"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...
5. **交互组件**：如`dialog`（对话框）、`tooltip`（提示）、`pagination`（分页）等，增强用户交互体验。 6. **工具栏和按钮**：如`toolbar`（工具栏）、`button`（按钮），提供操作指令。 7. **其他组件**：还...
5. **属性（Attributes）**：组件可以通过设置不同的属性来改变其行为，例如设置表格的分页属性（pagination）、窗口的大小（width, height）等。 6. **插件（Plugins）**：EasyUI 还支持一些扩展插件，如拖放...
- **组件丰富**：EasyUI 提供了如对话框（dialog）、表单（form）、数据网格（datagrid）、树形视图（tree）、下拉菜单（combobox）、分页（pagination）等多种常用的UI组件，满足各种应用场景。 - **主题支持**：...