easyui 前端分页及前端查询
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 前端分页及前端查询的更多相关文章
- Bootstrap table前端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
- vue+element实现分页--之--前端分页
效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...
- EasyUI表格DataGrid前端分页和后端分页的总结
Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...
- Extjs中grid前端分页使用PagingMemoryProxy【二】
在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...
- bootStrap-table服务器端后台分页的使用,以及自定义搜索框的实现,前端代码到数据查询超详细讲解
关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...
- 【转载】H5页面列表的无线滚动加载(前端分页)
本代码基于Vue的架构 1.首先,要滚动的内容放在一个‘id=box’ 的div里,对div进行scroll事件的监听 <div id="box" class="m ...
- js 前端分页空间控件
现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查 ...
- django项目一 分页器(前端分页和后端分页区别)
1. 客户信息展示 1. 母版和继承 {% extends 'layout'%} {% load static%} {% static '文件路径' %} block css js content 2 ...
- Django中前端界面实现级联查询
Django前端界面实现级联查询 一.前端界面中 <span scope="col" colspan="6"> 院系:<select id=& ...
随机推荐
- linux-文件系统-5
cat /proc/partions cat /proc/mounts mount [options] -o [option] -t 文件类型 设备 挂载目录 设备: (1)设备文件:例如/dev/s ...
- C# 更改 Hashtable key 名称
Hashtable ht = new Hashtable(); ht[; ht["B"] = ht["标题"]; ht.Remove("标题" ...
- Netty 介绍和应用场景(一)
1.为什么选择Netty 需要了解了Socket通信(IO/NIO/AIO)编程,对于通信模型已经有了一个基本的认识.,果想把这些真正的用于实际工作中,那么还需要不断的完善.扩展和优化.比如经典的TC ...
- 从源码编译安装PCL并运行第一个小例子
如何通过源码编译方式安装PCL 对于很多想学习PCL的同学而言,往往会被如何安装困扰很长时间.我就是这其中的一员,为了不让大家在安装问题上浪费太多时间,我决心写下这篇小小的随笔,希望对大家有所帮助. ...
- Oracle升级11.2.0.3-11.2.0.4(Windows)
背景:解决11.2.0.3带来的ora-08103错误,将数据库seinescm升级到11.2.0.4版本方法:另辟路劲安装11.2.0.4版本数据库软件,再对现有的数据库进行升级步骤:1. 检 ...
- 测试常用命令之awk篇
awk/gawk 1,内置变量 FILENAME:输入文件名称 FNR:当前数据文件中的数据行数 NF:数据文件中的字段总数 NR:已处理的输入数据行数目 FS:输入数据段分隔符 RS:输入数据行分隔 ...
- 微信小程序那些开发缺点
早闻微信小程序是个坑,结果名不虚传,细数一下我开发小程序遇过到坑. UI组件过度封装. 微信小程序的组件是模仿react.js或vue.js的web组件设计的,并且封装了weui.css样式. PS: ...
- ES6 暂时性死区
在ES6中,声明变量新增了两个关键字:let命令和const命令 如果在区块中存在let或者const命令时,任何变量都必须在声明之前使用,无论是区块外部的全局变量或者是区块内部的变量: /* 区块外 ...
- nw.js node-webkit基本程序结构与配置package.json配置说明
(一)基本程序结构 如上图,是一个nw程序的基本组织结构,在根目录下有package.json(程序的配置文件)和index.html(可以是任意名称,应用的启动页面):js/css/resource ...
- 吃着火锅唱着歌学会Docker
第一篇:Docker概述 第二篇:Docker之版本与安装 第三篇:Docker之镜像 第四篇:Docker之容器 第五篇:Dcoker之容器与镜像 第六篇:Docker之网络管理 第七篇:Docke ...