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

言归正传,最近刚进新公司,上头要求我先熟悉熟悉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. Python:numpy.ma模块

    翻译总结自:The numpy.ma module - NumPy v1.21 Manual 前言 ma是Mask的缩写,关于Mask的解释,如果有PS的基础,可以理解为蒙版,如果有计算机网络的基础, ...

  2. Qt:Qt资源系统

    学习自 Qt 资源系统(Qt Resource System) - 知乎 1.什么是Qt 资源系统 Qt资源系统是一种将图片.数据存储于二进制文件中的一套系统.这些图片.数据会被我们的程序使用,它们称 ...

  3. Java:Path与Paths

    0.说明 用于读Path操作的接口(Path)与实现类(Paths) 1.模块:java.nio.file.Path.java.nio.file.Paths 2.方法 2.1.Paths 只有两个静态 ...

  4. matplotlib补充知识及数据清理方法

    今日内容概要 数据操作 数据清洗理论 数据清洗实操 数据操作 read_csv read_excel read_hdf read_html read_json read_msgpack read_sq ...

  5. vue--axios异步请求及文件目录结构分析(个人记录)

    我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...

  6. 【面经】Java面试突击

    基础语法 基本数据结构 Java 的基本数据类型有 8 种,包括 6 种数字类型.1 种字符类型和 1 种布尔类型. 基本数据类型总览 数字类型包括 4 种整数类型和 2 种浮点数类型,4 种整数类型 ...

  7. php 数组汇总

    PHP 5 Array 函数 函数 描述 array() 创建数组. array_change_key_case() 返回其键均为大写或小写的数组. array_chunk() 把一个数组分割为新的数 ...

  8. 云原生技术赋能ISV实现应用现代化

    日前,由BP商业伙伴主办,中国开源云联盟和云原生应用现代化联盟协办的2021-2022云计算生态峰会成功举办.头部ISV代表.最终用户和云原生技术专家等与会各方围绕"云原生技术赋能ISV&q ...

  9. 初学者都能学会的ElasticSearch入门实战

    大家好,我是咔咔 不期速成,日拱一卒 项目中准备使用ElasticSearch,之前只是对ElasticSearch有过简单的了解没有系统的学习,本系列文章将从基础的学习再到深入的使用. 咔咔之前写了 ...

  10. 和风天气WebApi使用教程

    1.首先进入和风天气开发平台,点击右上角的注册进行注册 和风天气开发平台 2.填写注册用的邮箱和密码完成注册,可能还需要手机号,按提示注册完成即可. 3.从和风天气开发平台右上角进入控制台,输入你刚刚 ...