jquery自制分页，控制easyui datagrid分页，集中处理了一下前后台
2016-06-04 23:41
483 查看
因为客户需要特殊样式分页程序，本来用的是easyui的datagrid控件，但分页样式无法满足客户需求。所以把datagrid的分页属性去掉，自己写了一个分页。然后调用datagrid的 $("#test").datagrid("reload", url);
先看easyui的datagrid跟自写的分页怎么结合的吧:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Complex DataGrid - 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-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
url:'datagrid_data.aspx',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'Code',field:'code',width:80,sortable:true}
]],
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:220},
{field:'col4',title:'Col41',width:150}
]],
rownumbers:true,
onBeforeLoad: function(param){
param.page = param.requestPage || param.page || 1;
param.requestPage = undefined;
param.rows = 10;
$(".demo-info .page").html("向服务器请求的页码 page 为 " + param.page + "\r\n check it on server side by Request[\"page\"]");
}
});
});
function gotoPage(page){
$("#test").datagrid("reload", {requestPage:page});
}
</script>
</head>
<body>
<h2>Complex DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div class="page"></div>
</div>
<div style="margin:10px 0;">
<a href="###" onclick="gotoPage(1)">第一页 </a>
<a href="###" onclick="gotoPage(2)">第二页</a>
<a href="###" onclick="gotoPage(3)">第三页</a>
<a href="###" onclick="gotoPage(4)">4</a>
<a href="###" onclick="gotoPage(5)">5</a>
</div>
<table id="test"></table>
</body>
</html>
然后下一步就是写真正的 分页程序了，我只是做了一个实例，后台用了servlet获取了页数而已，弄了个大概。这个要真用在项目上需要根据项目自己修改，也算是个思路吧
。
<%@page import="org.apache.http.client.methods.HttpGet"%>
<%@page import="org.apache.http.impl.client.DefaultHttpClient"%>
<%@page import="org.apache.http.client.HttpClient"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>无标题页</title>
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var page = 1;
var pagesize = 5;
var s_name;
$(function() {
//------查询
$("#search").click(function() {
page = 1;
s_name = $("#txtSearch").val();
getAjaxData(s_name, page, pagesize);
});
});
//------封装分页方法开始
function getAjaxData(strwhere, page, pagesize) {
$.ajax({
type: "get",
url: "${pageContext.request.contextPath}/util/loginServlet",
datatype: "json",
contentType: "application/json;charset=utf-8",
//data:{ page: page, pagesize: pagesize,name: strwhere }, 或：
data: "name=" + strwhere + "&page=" + page + "&pagesize=" + pagesize,
success: function(data) {
var objs=eval(data); //解析json对象
console.info(objs);
console.info(objs[0].msg);
/* $.each(data, function(index, item) {
}); */
var htmlStr = "";
htmlStr += "<table>"
htmlStr += "<thead>"
htmlStr += "<tr><td>编号</td><td>姓名</td><td>年龄</td><td>备注</td></tr>"
htmlStr += "</thead>";
htmlStr += "<tbody>"
for (var i = 0; i < 5; i++) {
htmlStr += "<tr>";
htmlStr += "<td>" + 23 + "</td>"
+ "<td>" + 81 + "</td>"
+ "<td>" + 82 + "</td>"
+ "<td>" + 83 + "</td>"
htmlStr += "</tr>";
}
//如果查询出得结果总数小于pagesize则用空行填充
if (data.total< pagesize) {
for (var i = 0; i < pagesize - data.total; i++)
{
htmlStr += "<tr><td style='height:28px;'></td></tr>";
}
}
htmlStr += "</tbody>";
htmlStr += "<tfoot>";
htmlStr += "<tr>";
htmlStr += "<td colspan='4'>";
htmlStr += "<span>总:" + objs[0].msg + "条 当前:" + page + "/<span id='count'>" + (objs[0].msg % pagesize == 0 ? parseInt(objs[0].msg / pagesize) : parseInt(objs[0].msg / pagesize + 1)) + "</span>页" + "</span>";
htmlStr += "<a href='javascript:GoToFirstPage()'id='aFirstPage' >首 页</a>";
htmlStr += "<a href='javascript:GoToPrePage()' id='aPrePage' >上一页</a>";
htmlStr += "<a href='javascript:GoToNextPage()' id='aNextPage'>下一页</a>";
htmlStr += "<a href='javascript:GoToEndPage()' id='aEndPage' >尾 页</a>";
htmlStr += "<input type='text' /><input type='button' value='跳转' onclick='GoToAppointPage(this)' /> ";
htmlStr += "</td>";
htmlStr += "</tr>";
htmlStr += "</tfoot>";
htmlStr += "</table>";
$("#userlist").html(htmlStr);
},
error: function(error) {
alert(error);
}
});
}
//--------封装分页方法结束
//首页
function GoToFirstPage() {
page = 1;
getAjaxData(s_name, page, pagesize);
}
//前一页
function GoToPrePage() {
page = page-1<= 0 ? 1 : page-1;
getAjaxData(s_name, page, pagesize);
}
//后一页
function GoToNextPage() {
if (page + 1 <= parseInt($("#count").text())) {
page=page+1;
}
getAjaxData(s_name, page, pagesize);
}
//尾页
function GoToEndPage() {
page = parseInt($("#count").text());
getAjaxData(s_name, page, pagesize);
}
//跳转
function GoToAppointPage(e) {
var page_goto = $(e).prev().val();
if (isNaN(page_goto)) {
alert("请输入数字!");
}
else {
var tempPageIndex = page;
page = parseInt($(e).prev().val());
if (page < 0 || page >parseInt($("#count").text())) {
page = tempPageIndex;
alert("请输入有效的页面范围!");
}
a76b
else {
getAjaxData(s_name, page_goto, pagesize);
}
}
}
</script>
<!--简单样式 -->
<style type="text/css">
#userlist{border:1px solid gray; width:500px; height:215px;}
#userlist table{border-collapse: collapse; width:100%; height:auto;background:CFCFCF;}
#userlist table thead{ margin:0; padding:0; background-color:#CCCCCC;text-align:center; height:30px; line-height:30px;}
#userlist tbody tr{ height:28px; line-height:28px; text-align:center; }
#userlist tfoot tr{ height:30px; background:#CCCCCC;line-height:30px; text-align:center;}
#userlist tfoot tr td a{ text-decoration:none; margin:4px;}
#userlist tfoot tr td a:hover{ text-decoration:underline; color:Red;}
#userlist tfoot tr td input{ height:20px; width:40px; margin:4px;}
#userlist tfoot tr td input[type=text]{ background:white; border:0;}
#userlist tfoot tr td input[type=button]{ border:1px dashed; position:relative;top:0px;top:2px\0; cursor:pointer;}
</style>
</head>
<body>
用户姓名：<input type="text" name="name" id="txtSearch" /><input type="button" id="search"
value="查询" /><br />
<div id="userlist">
</div>
</body>
</html>
后台的servlet：
package util;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class loginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
//禁用缓存，确保网页信息是最新数据
resp.setHeader("Pragma","No-cache");
resp.setHeader("Cache-Control","no-cache");
resp.setDateHeader("Expires", -10);
PrintWriter out = resp.getWriter();
Json j = new Json();
j.setMsg("100");
JSONArray jsonArray = new JSONArray();
jsonArray.add(j);
System.out.println(jsonArray.toString());
out.write(jsonArray.toString());
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
简单的配置一下web.XMl:
<?xml version="1.0" encoding="GB18030"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<welcome-file-list>
<welcome-file>page.jsp</welcome-file>
</welcome-file-list>
<error-page>
<error-code>404</error-code>
<location>/sys/error/error404.jsp</location>
</error-page>
<servlet>
<servlet-name>loginServlet</servlet-name>
<servlet-class>util.loginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loginServlet</servlet-name>
<url-pattern>/util/loginServlet</url-pattern>
</servlet-mapping>
</web-app>
代码很乱，脑子有乱，感觉差不多就行，大概看看就能懂。。
先看easyui的datagrid跟自写的分页怎么结合的吧:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Complex DataGrid - 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-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
url:'datagrid_data.aspx',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'Code',field:'code',width:80,sortable:true}
]],
columns:[[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:220},
{field:'col4',title:'Col41',width:150}
]],
rownumbers:true,
onBeforeLoad: function(param){
param.page = param.requestPage || param.page || 1;
param.requestPage = undefined;
param.rows = 10;
$(".demo-info .page").html("向服务器请求的页码 page 为 " + param.page + "\r\n check it on server side by Request[\"page\"]");
}
});
});
function gotoPage(page){
$("#test").datagrid("reload", {requestPage:page});
}
</script>
</head>
<body>
<h2>Complex DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div class="page"></div>
</div>
<div style="margin:10px 0;">
<a href="###" onclick="gotoPage(1)">第一页 </a>
<a href="###" onclick="gotoPage(2)">第二页</a>
<a href="###" onclick="gotoPage(3)">第三页</a>
<a href="###" onclick="gotoPage(4)">4</a>
<a href="###" onclick="gotoPage(5)">5</a>
</div>
<table id="test"></table>
</body>
</html>
然后下一步就是写真正的 分页程序了，我只是做了一个实例，后台用了servlet获取了页数而已，弄了个大概。这个要真用在项目上需要根据项目自己修改，也算是个思路吧
。
<%@page import="org.apache.http.client.methods.HttpGet"%>
<%@page import="org.apache.http.impl.client.DefaultHttpClient"%>
<%@page import="org.apache.http.client.HttpClient"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>无标题页</title>
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var page = 1;
var pagesize = 5;
var s_name;
$(function() {
//------查询
$("#search").click(function() {
page = 1;
s_name = $("#txtSearch").val();
getAjaxData(s_name, page, pagesize);
});
});
//------封装分页方法开始
function getAjaxData(strwhere, page, pagesize) {
$.ajax({
type: "get",
url: "${pageContext.request.contextPath}/util/loginServlet",
datatype: "json",
contentType: "application/json;charset=utf-8",
//data:{ page: page, pagesize: pagesize,name: strwhere }, 或：
data: "name=" + strwhere + "&page=" + page + "&pagesize=" + pagesize,
success: function(data) {
var objs=eval(data); //解析json对象
console.info(objs);
console.info(objs[0].msg);
/* $.each(data, function(index, item) {
}); */
var htmlStr = "";
htmlStr += "<table>"
htmlStr += "<thead>"
htmlStr += "<tr><td>编号</td><td>姓名</td><td>年龄</td><td>备注</td></tr>"
htmlStr += "</thead>";
htmlStr += "<tbody>"
for (var i = 0; i < 5; i++) {
htmlStr += "<tr>";
htmlStr += "<td>" + 23 + "</td>"
+ "<td>" + 81 + "</td>"
+ "<td>" + 82 + "</td>"
+ "<td>" + 83 + "</td>"
htmlStr += "</tr>";
}
//如果查询出得结果总数小于pagesize则用空行填充
if (data.total< pagesize) {
for (var i = 0; i < pagesize - data.total; i++)
{
htmlStr += "<tr><td style='height:28px;'></td></tr>";
}
}
htmlStr += "</tbody>";
htmlStr += "<tfoot>";
htmlStr += "<tr>";
htmlStr += "<td colspan='4'>";
htmlStr += "<span>总:" + objs[0].msg + "条 当前:" + page + "/<span id='count'>" + (objs[0].msg % pagesize == 0 ? parseInt(objs[0].msg / pagesize) : parseInt(objs[0].msg / pagesize + 1)) + "</span>页" + "</span>";
htmlStr += "<a href='javascript:GoToFirstPage()'id='aFirstPage' >首 页</a>";
htmlStr += "<a href='javascript:GoToPrePage()' id='aPrePage' >上一页</a>";
htmlStr += "<a href='javascript:GoToNextPage()' id='aNextPage'>下一页</a>";
htmlStr += "<a href='javascript:GoToEndPage()' id='aEndPage' >尾 页</a>";
htmlStr += "<input type='text' /><input type='button' value='跳转' onclick='GoToAppointPage(this)' /> ";
htmlStr += "</td>";
htmlStr += "</tr>";
htmlStr += "</tfoot>";
htmlStr += "</table>";
$("#userlist").html(htmlStr);
},
error: function(error) {
alert(error);
}
});
}
//--------封装分页方法结束
//首页
function GoToFirstPage() {
page = 1;
getAjaxData(s_name, page, pagesize);
}
//前一页
function GoToPrePage() {
page = page-1<= 0 ? 1 : page-1;
getAjaxData(s_name, page, pagesize);
}
//后一页
function GoToNextPage() {
if (page + 1 <= parseInt($("#count").text())) {
page=page+1;
}
getAjaxData(s_name, page, pagesize);
}
//尾页
function GoToEndPage() {
page = parseInt($("#count").text());
getAjaxData(s_name, page, pagesize);
}
//跳转
function GoToAppointPage(e) {
var page_goto = $(e).prev().val();
if (isNaN(page_goto)) {
alert("请输入数字!");
}
else {
var tempPageIndex = page;
page = parseInt($(e).prev().val());
if (page < 0 || page >parseInt($("#count").text())) {
page = tempPageIndex;
alert("请输入有效的页面范围!");
}
a76b
else {
getAjaxData(s_name, page_goto, pagesize);
}
}
}
</script>
<!--简单样式 -->
<style type="text/css">
#userlist{border:1px solid gray; width:500px; height:215px;}
#userlist table{border-collapse: collapse; width:100%; height:auto;background:CFCFCF;}
#userlist table thead{ margin:0; padding:0; background-color:#CCCCCC;text-align:center; height:30px; line-height:30px;}
#userlist tbody tr{ height:28px; line-height:28px; text-align:center; }
#userlist tfoot tr{ height:30px; background:#CCCCCC;line-height:30px; text-align:center;}
#userlist tfoot tr td a{ text-decoration:none; margin:4px;}
#userlist tfoot tr td a:hover{ text-decoration:underline; color:Red;}
#userlist tfoot tr td input{ height:20px; width:40px; margin:4px;}
#userlist tfoot tr td input[type=text]{ background:white; border:0;}
#userlist tfoot tr td input[type=button]{ border:1px dashed; position:relative;top:0px;top:2px\0; cursor:pointer;}
</style>
</head>
<body>
用户姓名：<input type="text" name="name" id="txtSearch" /><input type="button" id="search"
value="查询" /><br />
<div id="userlist">
</div>
</body>
</html>
后台的servlet：
package util;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class loginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=UTF-8");
//禁用缓存，确保网页信息是最新数据
resp.setHeader("Pragma","No-cache");
resp.setHeader("Cache-Control","no-cache");
resp.setDateHeader("Expires", -10);
PrintWriter out = resp.getWriter();
Json j = new Json();
j.setMsg("100");
JSONArray jsonArray = new JSONArray();
jsonArray.add(j);
System.out.println(jsonArray.toString());
out.write(jsonArray.toString());
out.flush();
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}
}
简单的配置一下web.XMl:
<?xml version="1.0" encoding="GB18030"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<welcome-file-list>
<welcome-file>page.jsp</welcome-file>
</welcome-file-list>
<error-page>
<error-code>404</error-code>
<location>/sys/error/error404.jsp</location>
</error-page>
<servlet>
<servlet-name>loginServlet</servlet-name>
<servlet-class>util.loginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loginServlet</servlet-name>
<url-pattern>/util/loginServlet</url-pattern>
</servlet-mapping>
</web-app>
代码很乱，脑子有乱，感觉差不多就行，大概看看就能懂。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery EasyUI时间戳自定义时间显示格式类型
- 最好用的placeholder插件,jQuery插件EnPlaceholder
- jQuery（二）
- jQuery（一）
- jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传
- jQuery选择器
- jQuery Validate验证框架详解
- jquery,php之间的ajax关系以及json
- jQuery和DOM对象转化
- jQuery实现 全选/全不选
- jQuery EasyUI-validatebox验证框、实现自定义验证
- JQuery.cycle()实现图片轮播简单使用
- Jquery parent方法 IE8 不起作用
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- JavaScript jQuery 入门回顾 2
- jQuery中的.bind()、.live()和.delegate()之间区别分析，学习jquery
- JavaScript jQuery 事件、动画、扩展
- JQuery的异步回调支持 - Promise、Deferred
- js和jquery获取父级元素、子级元素、兄弟元素的方法
- 实现jquery DataTable前后台动态分页