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关于分页的问题的更多相关文章

  1. Easyui datagrid 修改分页组件的分页提示信息为中文

    datagrid 修改分页组件的分页提示信息为中文 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 默认分页组件为英文展示,如下,希望改成中文展示 ...

  2. EasyUi datagrid 表格分页例子

    1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js //源数据 function Async(action,args,callback){  $.ajax({  url: a ...

  3. easyui datagrid 的分页刷新按钮

    datagrid  刷新bug: 情形: 当用户A,B  同时操作 datagrid时(记录1,记录2.记录3).如果A如果删除记录1,  B此时已选中了记录1 ,记录2 , 这时B点击分页中的刷新按 ...

  4. EasyUI DataGrid 获得分页信息

    var b = $('#SBDiv_1_DateGrid').datagrid('options'); console.info(b); 具体需要哪些字段,可以通过火狐debug,然后自己找需要的信息 ...

  5. Asp.Net MVC EasyUI DataGrid查询分页

    function doSearch() { //查询方法 var searchValue = $('#txtQueryTC001').textbox('getText'); $('#dgCMSTC') ...

  6. JQuery EasyUI datagrid pageNumber 分页 请求/加载 两次

    解决方案: 原因是 jquery.easyui.min.js 源文件中,由于第1页的total和其他页的total不相等,EasyUI会重新发起第1页的请求!1.jQuery EasyUI 1.4.1 ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  8. JQuery easyui Datagrid 分页事件

    easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...

  9. EasyUI DataGrid 分页实现示例

    使用easyui可以很方便的开发web程序,这儿仅展示一个后台使用mvc来实现分页的示例,截图如下 示例代码如下 1. 创建模型类,代码如下 using System; using System.Co ...

随机推荐

  1. ES6学习之Class

    一.定义类(ES6的类,完全可以看做是构造函数的另一种写法) class Greet { constructor(x, y) { this.x = x; this.y = y; } sayHello( ...

  2. C#设计模式(10)——组合模式

    一.概念 组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦. 二.组 ...

  3. C# 判断路径和文件存在

    1.判断路径是否存在,不存在则创建路径: if (!System.IO.Directory.Exists(@"D:\Export")) { System.IO.Directory. ...

  4. 关于audio.js的研究

    ——杂言:audio.js结合使用html5的audio组件实现了音频的原位播放功能.虽然项目里已经使用一段时间了,不过我是最近才开始有所接触,惭愧.个人见解若有不对,请帮忙纠正,谢谢. 官方相关链接 ...

  5. Docker Compose实例

    采用java -jar启动 nohup java -jar web--SNAPSHOT.jar --spring.profiles.active=test --server.port= & 采 ...

  6. [xjtu21]wmq的午餐 计数问题

    http://oj.xjtuacm.com/problem/21/ 对13进行分析,每种价格出现的次数: $(C_m^1 + C_m^2 + ... + C_m^m)(C_{n - m}^0 + C_ ...

  7. Spring的@value注解

    Spring 3支持@value注解的方式获取properties文件中的配置值,大简化了读取配置文件的代码. 1.在applicationContext.xml文件中配置properties文件 & ...

  8. 怀旧系列(3)----Pascal

    Pascal语言是高中时代2000年左右为了参加计算机竞赛学习的一门语言(Turbo Pascal7.0).据说这么语言的结构化非常好,非常适合青少年形成一定的编程思想.但是现在的角度想想都是扯淡,现 ...

  9. .NET Core 3.0 可回收程序集加载上下文

    一.前世今生 .NET诞生以来,程序集的动态加载和卸载都是一个Hack的技术,之前的NetFx都是使用AppDomain的方式去加载程序集,然而AppDomain并没有提供直接卸载一个程序集的API, ...

  10. 学习RadonDB源码(一)

    1. 可能是开始也可能是结束 RadonDB是国内知名云服务提供商青云开源的一款产品,下面是一段来自官方的介绍: QingCloud RadonDB 是基于 MySQL 研发的新一代分布式关系型数据库 ...