第一次写技术方面的文章,有点忐忑,总怕自己讲的不对误导别人。但是万事总有个开头,有不足错误之处,请各位读者老爷指出。

言归正传,最近刚进新公司,上头要求我先熟悉熟悉easyui这个组件库。在涉及到datagrid组件的分页功能时,遇到了一点问题。

我们在处理分页时,通常有两种方式,前端分页和后台分页。前端分页会将后台数据一次性全部查询返回,然后在前端存储处理。这样的方式缺点很明显,如果数据量非常大,存储在前端显然是一种非常不明智的方式,对于性能有明显影响。

那我们来看看easyui处理分页的方式。

  <table  class="easyui-datagrid" title="学生信息" style="width:700px;height:250px;"
data-options="singleSelect:true,collapsible:true,url:'http://localhost:3000/ge',method:'get',pagination:true" toolbar="#tool">
<thead>
<tr>
<th data-options="field:'name',width:150,align:'center'">姓名</th>
<th data-options="field:'num',width:150,align:'center'">学号</th>
<th data-options="field:'school',width:150,align:'center'">学校</th>
<th data-options="field:'major',width:150,align:'center'">专业</th>
<th data-options="field:'xuewei',width:100,align:'center'">操作</th>
</tr>
</thead>
</table>

以上是页面上的代码,当设置pagination属性为true时,easyui会自动加上一个分页器。这个分页器,当页面加载或者是用户改变当前页面时,easyui会以ajax的方式发送给后台两个参数:page和row。page是指当前页码,row指一页显示多少条信息。

我们这边用nodejs搭建一个简单的web服务器,来看看后台是怎么进行分页的。定义一个json对象,模拟一下数据库里的数据。由于数据较多,这边不予展示。当easyui发送请求过来时,我们先获取它带的参数,这两个参数是以query方式带过来的。

var page = req.query.page;//page当前页
var row = req.query.rows;//页面最多几条
var start = (page-1)*row;//查询起始位置
var end = page*row-1;//查询结束位置

根据拿到的page和row两个值确定该页面返回的数据。返回的数据必须是符合easyui要求的json数据,格式如下:


{"total":length,"rows":returnArray}

必须带有total属性,属性值为总共的数据条数,returnArray是这一页的数据内容,以数组对象的形式返回。返回前端后,easyui会自动帮你把数据填充。这样一来,我们就理解了这个分页的原理。

但是问题来了,easyui每一次改变当前页码,都会向后台发起一次请求。我们知道,在web项目中,大量的http请求会影响性能,easyui如此频繁的请求操作,是不是也值得商榷呢?这也导致了大量的重复对数据库的查询操作,因为我们要根据页码来获取不同区间的数据集。

不知道大家有没有什么好的方法呢?欢迎指正。

本文转载于猿2048:jq easyui数据网络的分页过程

jq easyui数据网络的分页过程的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加分页组件

    jQuery EasyUI 数据网格 - 添加分页组件 本实例演示如何从服务器端加载数据,如何添加分页组件(pagination)到数据网格(datagrid). 创建数据网格(DataGrid) 为 ...

  3. Linux内核--网络栈实现分析(七)--数据包的传递过程(下)

    本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7545855 更多请查看专栏,地 ...

  4. Linux内核--网络栈实现分析(二)--数据包的传递过程--转

    转载地址http://blog.csdn.net/yming0221/article/details/7492423 作者:闫明 本文分析基于Linux Kernel 1.2.13 注:标题中的”(上 ...

  5. 利用EasyUI 数据网格(DataGrid)的loader属性实现后端分页

    该属性在easyui官方文档中并没有详细阐述,通过简单的资料查询和摸索,实现了easyUI数据网格的后端分页功能. 在官网文档中这样阐述loader属性: 定义如何从远程服务器加载数据.返回false ...

  6. [转]Linux网络 - 数据包的发送过程

    转, 原文:https://segmentfault.com/a/1190000008926093 -------------------------------------------------- ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据

    jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

    jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格( ...

  9. SpringMVC结合easyUI中datagird实现分页

    SpringMVC结合easyUI中datagird实现分页 DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.轻量级,单元格合并.多列标题.冻结列和页脚只是其中 ...

随机推荐

  1. c语言刷 DFS题记录

    144. 二叉树的前序遍历 /** * Definition for a binary tree node. * struct TreeNode { * int val; * struct TreeN ...

  2. 任意文件夹打开CMD命令窗口

    1:打开任意文件夹 2:按住Shift键,鼠标右键单击 3:该文件夹下的命令窗口已打开,方便快捷

  3. WPF页面后台代码InitializeComponent()报错

    InitializeComponent(); 报错: 查看对应的前台xaml文件中,主标签中是否缺失引用: x:class="命名空间.类名"

  4. 教你如何解决JS/TS里特定String进行拆分然后遍历各个元素

    摘要:我们需要先判断特定String里是否包含我们需要的元素,针对这个元素对这个字符串进行拆分,遍历各个元素. 本文分享自华为云社区<JavaScript/TypeScript项目里如何对特定S ...

  5. PHP-制作验证码

    <?php //11>设置session,必须处于脚本最顶部 session_start(); $image = imagecreatetruecolor(100, 30); //1> ...

  6. git常用命令及问题

    Git基本操作 git init 创建新的git仓库 git clone [url] 使用 git clone 拷贝一个 Git 仓库到本地 git status 查看工作区 git stash li ...

  7. ubuntu目录结构

    /:根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中 /bin:/usr/bin:可执行二进制文件的目录,如常用的命令ls. ...

  8. Django基础四之测试环境和ORM查询

    Django基础四之测试环境和ORM查询 目录 Django基础四之测试环境和ORM查询 1. 搭建测试环境 1.1 测试环境搭建方法: 1.2 使用测试环境对数据库进行CURD 1.3 返回Quer ...

  9. Java工具之Myeclipse程序调试

    步骤1: 分析错误,设置断点 步骤2: 启动调试 步骤3: 单步运行 (1)调试启动后,运行到设置断点的代码行将停住 (2)点击F6键可以单步运行程序,观察程序运行过程. (3)使用F5进入方法中进行 ...

  10. 安装Win7与Ubuntu16.04双系统操作教程

    安装主要分为以下几步: 一. 下载Ubuntu 16.04镜像软件: 二. 制作U盘启动盘使用ultraISO: 三. 安装Ubuntu系统: 四. 用EasyBCD 创建启动系统启动引导: (根据个 ...