jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下：
一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。
这里重点用到了pagination的监听，以及JS数组的slice方法来完成。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link href="js/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet"/>
<link href="js/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>
<script type="text/javascript">
// 表格数据源
var data = [];
// 用代码造30条数据
for (var i = 1; i < 31; ++i) {
data.push({
"id":i,
"name":"Student" + i
})
}
$(function () {
$("#dd").datagrid({
title:"测试本地分页",
rownumbers:true,
fitColumns:true,
pagination:true,
data:data.slice(0,10),
columns:[
[
{field:'id', align:"center", title:"编号",width:100},
{field:'name', align:"center", title:"姓名",width:100}
]
]
});
var pager = $("#dd").datagrid("getPager");
pager.pagination({
total:data.length,
onSelectPage:function (pageNo, pageSize) {
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$("#dd").datagrid("loadData", data.slice(start, end));
pager.pagination('refresh', {
total:data.length,
pageNumber:pageNo
});
}
});
});
</script>
</head>
<body>
<div id="dd"></div>
</body>
</html>
运行效果如下图所示：
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
jQuery scroll事件实现监控滚动条分页示例
scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了 $(window).scroll(function () { //$(window).scrollTop()这个方法是当前滚动条滚动的距离 //$(window).height()获取当前窗体的高度 //$(docume
-
深入理解jQuery layui分页控件的使用
$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d
-
基于jQuery的实现简单的分页控件
1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla
-
layui分页效果实现代码
本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body
-
JQuery+Ajax无刷新分页的实例代码
先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单 就四个字段 分别是News_id News_title News_time News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server"> <title>JQuery无刷新分页</title> <link hre
-
用jQuery中的ajax分页实现代码
功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur
-
基于JQuery的Pager分页器实现代码
实例效果图如下 使用说明 需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1) 素材准备 分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css 复制代码 代码如下: #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list
-
jQuery EasyUI API 中文文档 - Pagination分页
用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n
-
jQuery中jqGrid分页实现代码
(1)页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT
-
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex