easyui datagrid关于分页的问题
easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理。
但是,最近项目跟webgis有关,数据查询直接是从服务中查询出来,无法像关系数据库那样,在数据库端对查询结果进行分页
所以,采用在datagrid的前端进行“假分页”来达到分页效果
【1】分页操作
///easyui前台分页操作
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array
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;
} 【2】在datagrid进行数据绑定时,绑定上分页方法即可
///初始化项目列表
function InitProjectTab(data) {
debugger;
$("#ProjectTab").datagrid({ loadFilter: pagerFilter }).datagrid({
title: '项目列表',
//url: '',
data:data,
method: 'POST',
width: 600,
height: 500,
singleSelect: true,
autoRowHeight: false,
checkOnSelect: true,
selectOnCheck: true,
nowrap: false, //是否换行,True 就会把数据显示在一行里
striped: true, //True 奇偶行使用不同背景色
sortOrder: 'desc', //排序类型
remoteSort: true, //定义是否从服务器给数据排序
fitColumns: true,
columns: [[
{
title: 'OBJECTID', field: 'OBJECTID', width: 40, sortable: true,hidden:true
},
{
title: '项目ID', field: 'PRJID', width: 40, sortable: true
},
{
title: '项目名称', field: 'PRJNAME', width: 100, sortable: true
},
{
title: '项目地址', field: 'FADDRESS', width: 80, sortable: true
},
{
title: '建设单位', field: 'FCOMPANY', width: 80, sortable: true
},
]],
queryParams: { "action": "query" },
pagination: true, //是否开启分页
pageNumber: 1, //默认索引页
pageSize: 10, //默认一页数据条数
rownumbers: true,//行号
toolbar: '#projectBar',
onLoadSuccess: function (data, param) {
$("#projectBtn").fadeIn(100);
$("#projectDiv").css("right", "20px");
},
onClickRow: function (index, row) {
ShowRedLine(row.OBJECTID); //定位图形
}
});
}
easyui datagrid关于分页的问题的更多相关文章
- Easyui datagrid 修改分页组件的分页提示信息为中文
datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...
- EasyUi datagrid 表格分页例子
1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){ $.ajax({ url: a ...
- easyui datagrid 的分页刷新按钮
datagrid 刷新bug: 情形: 当用户A,B 同时操作 datagrid时(记录1,记录2.记录3).如果A如果删除记录1, B此时已选中了记录1 ,记录2 , 这时B点击分页中的刷新按 ...
- EasyUI DataGrid 获得分页信息
var b = $('#SBDiv_1_DateGrid').datagrid('options'); console.info(b); 具体需要哪些字段,可以通过火狐debug,然后自己找需要的信息 ...
- Asp.Net MVC EasyUI DataGrid查询分页
function doSearch() { //查询方法 var searchValue = $('#txtQueryTC001').textbox('getText'); $('#dgCMSTC') ...
- JQuery EasyUI datagrid pageNumber 分页 请求/加载 两次
解决方案: 原因是 jquery.easyui.min.js 源文件中,由于第1页的total和其他页的total不相等,EasyUI会重新发起第1页的请求!1.jQuery EasyUI 1.4.1 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- JQuery easyui Datagrid 分页事件
easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...
- EasyUI DataGrid 分页实现示例
使用easyui可以很方便的开发web程序,这儿仅展示一个后台使用mvc来实现分页的示例,截图如下 示例代码如下 1. 创建模型类,代码如下 using System; using System.Co ...
随机推荐
- Java中继承的规则
一.子类中对父类构造函数的调用规则 1.如果不显式指定,子类中的构造函数会默认调用父类中的无参构造 测试代码 package day07; import java.sql.Date; import j ...
- JAVAWeb SSH框架 利用POI 导出EXCEL,弹出保存框
导入包这一些不多说,直接贴出关键代码,JSP只要点一个Action链接就行. poi包我是用:poi-3.11-20141221.jar 亲测有效: 效果: Action 类代码: private I ...
- 记一次SQL xml字段关联查询
需求: 一张表是APP表,结构如下: app_category为该游戏所属的类别ID,xml字段类型 另一张表是类别表,就ID对应名称,这就不上图了. 还有一张表是每个游戏的下载记录,结构如下: Do ...
- ubuntu下sourceinsight的安装
转载自blog.csdn.net/zzobin/article/details/7376616 1. 安装wine 详看:http://wiki.ubuntu.org.cn/Wine sudo apt ...
- HDU 5241 Friends (大数)
题意:略. 析:答案就是32^n. 代码如下: import java.math.BigInteger; import java.util.Scanner; public class Main{ pu ...
- 1.jQuery入口函数 与javaScript入口函数
1.jQuery入口函数 与javaScript入口函数 JQ入口函数: $(document).ready(function(){ }); 或者 $(function(){ }) Js入口函数: w ...
- C#中的自动属性、隐式类型var、对象初始化器与集合初始化器、扩展方法
1.自动属性(Auto-Implemented Properties) //以前的写法 .net2.0 private string _userName; public string UserName ...
- UPCOJ9526(SG函数打表,nim游戏异或规则)
#include<bits/stdc++.h>using namespace std;int f[1007],SG[1007],S[1007];//f为可以选取的石头个数,SG为sg函数, ...
- (PHP)redis List(列表)操作
/** * * List操作 * 列表操作 * 可理解为数组操作 * 插入.删除数据按照一定规律排列的 * 元素可重复 * 适用于队列 * */ //在列表头部插入一个值one,当列表不存在时自动创建 ...
- Mybatis学习笔记之一——牛刀小试
1.Mybaits核心对象SqlSession的作用: (1)向SQL语句传入参数: (2)执行SQl语句: (3)获取执行SQL语句的结果: (4)事务的控制: 2.核心配置文件(Configrat ...