1、静态分页核心方法

// 前端分页 -- 将datagrid的loadFilter属性设置为这个方法名即可
function partPurchasePagerFilter(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); if(opts.queryParams.searchText && opts.queryParams.likeFields) {// 实现前端查询过滤
var sTxt = (opts.queryParams.searchText || '').trim(),
fields = opts.queryParams.likeFields;
var nRows = data.originalRows.filter(function(row){
var isMatch = false;
fields.split(',').map(function(field) {
if (sTxt && row[field] && row[field].indexOf(sTxt) < 0) { } else if(row[field]){
isMatch = true
}
});
return isMatch;
});
data.total = nRows.length;
data.rows = (nRows.slice(start, end));
}else {
data.rows = (data.originalRows.slice(start, end));
data.total = data.originalRows.length;
} return data;
}

2、前端查询过滤方式

   /**
* 前端方式查询表格
* @param tb (object): 表格对象
* @param fields(string): 匹配的字段属性(多个以逗号分隔)
* @param text(string): 检索的文本
* @eg: searchFun($('#userTable'), 'name,sex', '赵公子');
**/
function searchFun(tb,fields,text) {
// 传递查询参数
$.extend(tb.datagrid('options').queryParams,{searchText: text,likeFields: fields});
// 触发表格数据前端刷新
tb.parents('.datagrid-wrap').find('.pagination-load').click();
}

至此完整的前端分页算完成<(* ̄▽ ̄*)/

easyui 前端分页及前端查询的更多相关文章

  1. Bootstrap table前端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

  2. vue+element实现分页--之--前端分页

    效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...

  3. EasyUI表格DataGrid前端分页和后端分页的总结

    Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...

  4. Extjs中grid前端分页使用PagingMemoryProxy【二】

        在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...

  5. bootStrap-table服务器端后台分页的使用,以及自定义搜索框的实现,前端代码到数据查询超详细讲解

    关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...

  6. 【转载】H5页面列表的无线滚动加载(前端分页)

    本代码基于Vue的架构 1.首先,要滚动的内容放在一个‘id=box’ 的div里,对div进行scroll事件的监听 <div id="box" class="m ...

  7. js 前端分页空间控件

    现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查 ...

  8. django项目一 分页器(前端分页和后端分页区别)

    1. 客户信息展示 1. 母版和继承 {% extends 'layout'%} {% load static%} {% static '文件路径' %} block css js content 2 ...

  9. Django中前端界面实现级联查询

    Django前端界面实现级联查询 一.前端界面中 <span scope="col" colspan="6"> 院系:<select id=& ...

随机推荐

  1. Python爬虫十六式 - 第四式: 使用Xpath提取网页内容

    Xpath:简单易用的网页内容提取工具 学习一时爽,一直学习一直爽 !   Hello,大家好,我是Connor,一个从无到有的技术小白.上一次我们说到了 requests 的使用方法.到上节课为止, ...

  2. Qt类图

    Qt对象命名与类图 QWidget=Windows get,即获得窗体,凡是我们能看到的界面都是从QWidget继承而来的. QDialog QAbstractButton 这是一个抽象类,不能直接使 ...

  3. 如何查看运行的docker container 的 执行 docker run的命令

    前言 就是我备份了一下 mysql_container, 然后我想启用 新的备份的mysql_container 但是之前的docker run image xxxxxx这些都已经忘记了 我想找一下之 ...

  4. Windows和Linux下搭建J2sdk的环境

    J2SDK 作为jsp系统配置中必不可少的组件,越来越多的得到应用.下来是我整理的以往工作时搜集的资料.使用时方便查询,希望对广大的工程师有帮助. windows服务器环境下 j2sdk 的安装和环境 ...

  5. qtp识别验证码

    花了两天时间才完整的完成识别验证码的登录操作,在网上看到很多关于验证码识别的方法,但是我用的qtp版本比较高级,所以还是要自己花心思研究.po上我的识别验证码的详细历程: 一.读取浏览器中的图片验证码 ...

  6. shell基础操作

    一.字符串 字符串是shell编程中最常用的数据类型,字符串可以用单引号,也可以用双引号,也可以不用引号. 单引号 name='xiaoxi' 单引号的限制: 单引号里的任何字符都会原样输出,单引号中 ...

  7. 大数据笔记(二十九)——RDD简介、特性及常用算子

    1.什么是RDD? 最核心 (*)弹性分布式数据集,Resilent distributed DataSet (*)Spark中数据的基本抽象 (*)结合源码,查看RDD的概念 RDD属性 * Int ...

  8. 20175201张驰 实验四 Android 开发

    4-1:[Android Studio安装]安装过程中出现的错误:参考https://blog.csdn.net/weixin_38277423/article/details/80254483 1. ...

  9. Nova 的高性能虚拟机支撑

    目录 目录 CPU 计算平台体系架构 SMP 架构 NUMA 结构 MMP 结构 Nova 的高性能虚拟机 Nova 虚拟机 CPU/RAM 设计的背景 操作系统许可(Licensing) 性能(Pe ...

  10. FireMonkey 绘图(1)

    FireMonkey 绘图(1) FMX 的 Canvas 在不同的系统上会分别使用:WinVista.Win7: D2D (FMX.Canvas.D2D.pas)WinXP: GDI+ (FMX.C ...