<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户端分页demo</title>
<%@include file="base.jsp"%>
</head>
<body>
<h2>客户端分页Demo</h2>
<table id="dg" title="Client Side Pagination" style="width:100%" data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<th field="inv" width="20%">姓名</th>
<th field="date" width="20%">年龄</th>
<th field="name" width="20%">性别</th>
<th field="amount" width="10%" align="right">班级</th>
<th field="price" width="10%" align="right">学号</th>
<th field="cost" width="10%" align="right">其他</th>
<th field="note" width="10%">备注</th>
</tr>
</thead>
</table>
<script>
function getData(){//模拟数据
var rows = [];
for(var i=1; i<=80000; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
//console.log(JSON.stringify(rows));
return rows;
}
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
$(function(){//加载数据
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
});
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Dialog - jQuery EasyUI Demo</title>
<%@include file="base.jsp"%>
<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>
分享到：
相关推荐
在这个"EasyUI分页的小例子"中，我们将探讨如何使用Java后端和EasyUI前端框架实现数据的分页展示。 在Web应用中，分页是一项常见的功能，它能帮助用户更有效地浏览大量数据，避免一次性加载过多内容导致页面响应慢...
这个主题涉及到的是 EasyUI 的两个核心功能：分页和编辑。在 Web 应用程序中，分页通常用于处理大量数据，提高用户体验，而编辑功能则允许用户对展示的数据进行增删改操作。下面我们将深入探讨这两个方面。 ### 1. ...
同时，更新EasyUI分页控件的状态，显示新的数据。 5. **响应处理**：服务器端接收到请求后，处理分页逻辑，返回分页数据。客户端接收到响应后，更新数据表格，并保持分页控件状态同步。 6. **用户交互**：用户可以...
在"easyui分页增删改"这个主题中，我们将深入探讨如何利用EasyUI实现数据的分页显示、添加、删除和修改等功能。 一、EasyUI 分页展示 EasyUI 提供了 `datagrid` 组件来展示表格数据，并且支持分页功能。通过设置 `...
### ASP.NET MVC与EasyUI实现分页操作详解 #### 一、项目背景及技术栈介绍 本案例旨在演示如何在ASP.NET MVC项目中利用EasyUI框架实现数据分页功能。项目使用的技术栈主要包括：ASP.NET MVC框架、EasyUI前端框架...
其中，"easyui分页"是EasyUI 提供的一个关键功能，用于处理大量数据的展示，避免一次性加载过多内容导致页面响应速度变慢。本篇文章将深入探讨EasyUI 分页技术及其在实际开发中的应用。 1. EasyUI 分页组件的基本...
1. **EasyUI 分页组件** - EasyUI 提供了一个强大的分页组件，可以轻松地在网页上实现数据的分页展示。分页组件包括“上一页”、“下一页”按钮、页码选择器以及每页显示条数的选择。 - 使用时，只需要在 HTML 中...
1. **代码扩展**：通过对原始jQuery EasyUI分页插件的源代码进行修改，增加新的功能或者调整原有行为。这可能涉及修改`jq.easyui_pagination.js`中的函数，添加新的配置选项，或者调整事件处理逻辑。这种方式需要...
#### 二、EasyUI分页插件基础 ##### 2.1 分页插件初始化 EasyUI中的分页插件主要通过`.pagination()`方法来实现。首先需要确保已经正确加载了EasyUI的相关脚本和样式文件。 ```javascript // 初始化分页 $('#...
1. 首先，我们需要在SpringMVC的Controller中创建一个接口，该接口将处理前端发送的分页请求。通常，这个请求会包含当前页码和每页记录数。 2. 在Controller中，使用MyBatis的SqlSession获取Mapper对象，Mapper对象...
EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，如对话框、表单、菜单、分页等，帮助开发者快速构建用户界面。在本案例中，我们将重点讨论如何利用 EasyUI 实现分页功能。 在网页应用中，...
在本篇文章中，我们将探讨“jQuery EasyUI分页实现”的相关知识点，这在处理大量数据展示时尤其重要，因为它能够帮助用户以更易管理的方式浏览信息。 1. **jQuery EasyUI简介** jQuery EasyUI 是一套基于jQuery的...
### jQuery EasyUI 分页功能详解 #### 一、概述 在使用jQuery EasyUI进行Web开发时，分页是一项非常实用且常见的功能。它能够帮助我们有效地处理大量的数据，提高用户体验。本文将详细介绍如何在jQuery EasyUI中...
4. **EasyUI分页功能实现**：EasyUI的分页功能主要体现在其DataGrid组件上。DataGrid可以显示大量数据，并支持分页、排序和过滤。在后端，我们需要在SSM项目中实现分页查询的逻辑，通常会结合MyBatis的动态SQL来完成...
在 EasyUI 中，分页功能是十分常见且重要的，尤其在处理大量数据时，它可以提高页面性能，改善用户体验。 **分页原理** 分页的基本原理是将大数据集分成多个小部分（页）进行显示，而不是一次性加载所有数据。当...
【标题】"springboot+mybatis+easyui增删改查分页Demo"是一个基于Spring Boot、MyBatis和EasyUI实现的Web应用程序示例，主要用于演示如何在这些技术栈中进行基本的数据操作，如添加（Add）、删除（Delete）、修改...
2. **EasyUI分页**: EasyUI的`datagrid`组件支持分页功能，通过设置`pagination`属性为`true`，并定义`pageNumber`、`pageSize`、`total`等参数，可以实现前端的分页展示。同时，`datagrid`的`onLoadSuccess`事件...
本教程将深入讲解如何在.NET环境中利用EasyUI的DataGrid实现分页功能，同时也会涉及列的操作。 首先，我们需要理解什么是分页。分页是当数据量过大时，为了提高用户界面的响应速度和用户体验，将数据分成若干页进行...
"spring springmvc mybatis easyui分页" 这个标题指的是一个集成Spring、SpringMVC、MyBatis以及EasyUI的Web应用示例，特别关注于实现数据的分页功能。Spring是Java企业级应用的基石，提供依赖注入（DI）和面向切面...