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 面向对象_3

    析构函数:实例被销毁时候自动调用的方法,(例如关闭数据库,可以将关闭数据库的代码写到析构函数里) class Person: def __init__(self): print('构造函数') def ...

  2. 查看SSL证书的别名

    1.把java目录下的keytool拷贝到证书目录下:2.进入证书目录,然后输入命令keytool -list -v -keystore file.jks -storepass password,发现 ...

  3. AngularJS的目录结构

    templates/ _login.html _feed.html app/ app.js controllers/ LoginController.js FeedController.js dire ...

  4. BZOJ 3786: 星系探索 ETT

    Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅有一个依赖星球.主星球 ...

  5. sh_04_判断考试成绩

    sh_04_判断考试成绩 # 练习2: 定义两个整数变量 python_score.c_score,编写代码判断成绩 python_score = 50 c_score = 50 # 要求只要有一门成 ...

  6. 【Python】学习笔记九:面向对象拓展

    调用类的其他信息 在定义方法的时候,必须有self这一参数.这个参数表示某个对象,对象拥有类的所有性质.那么我们可以通过self,调用类属性 class people(object): action ...

  7. 多层全连接神经网络实现minist手写数字分类

    import torch import numpy as np import torch.nn as nn from torch.autograd import Variable import tor ...

  8. 什么是webpack以及为什么使用它

    什么是webpack以及为什么使用它 新建 模板 小书匠  在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具.因为开发时用的是高级语法开发,效率非常高,但很可惜的是,浏览器未必会支持或认识 ...

  9. ubuntu 18.04 gcc g++降级4.8版

    $ sudo apt-get install -y gcc-4.8 $ sudo apt-get install -y g++-4.8 $ cd /usr/bin $ sudo rm gcc $ su ...

  10. fedora从22开始就用dnf代替yum了

    yum有一些不好的缺点, 从fc22开始, 就用 dnf代替yum了 dnf: "毒奶粉" yum: "黄狗" dnf的用法根yum的用法完全一样, 只是用dn ...