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=& ...
随机推荐
- java 上传大文件以及文件夹
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- Quartz监听器
1.概念Quartz的监听器用于当任务调度中你所关注事件发生时,能够及时获取这一事件的通知.类似于任务执行过程中的邮件.短信类的提醒.Quartz监听器主要有JobListener.TriggerLi ...
- 技术干货:Python解析CSV
1. 什么是CSV CSV(Commma-Separated Value)是都好分隔符,其文件以纯文本形式存储表格数据(数字和文本). 案例: 2. 为什么要使用CSV 与专有的二进制文件格式截然不同 ...
- QT 信号槽 异步事件驱动 单线程 多并发
利用好Qt 模块的异步信号槽,单线程同样可是实现很强悍的的并发能力.应付正常的功能是足够的. 需要注意的是:该模式本质上为 单线程 事件驱动异步模式,所以需要做的事优化你的业务代码构架以应付性能与并发 ...
- HDU1429--胜利大逃亡(续)(BFS+状态压缩)
Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- DVWA--XSS(反射型)
0X01爱之初介绍 虽然XSS已经做了两节了 但是还是还是简单解释一下 前言:跨站脚本(Cross-Site Scripting,XSS)是一种经常出现在Web应用程序中的计算机安全漏洞,是由于Web ...
- 浅谈javaweb三大框架和MVC设计模式
一.MVC设计模式 1.MVC的概念 首先我们需要知道MVC模式并不是javaweb项目中独有的,MVC是一种软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(Vie ...
- 每日踩坑 2019-07-30 H5 使用 iframe 底部有白边
用个iframe累死累活的 用 js 动态计算高度, 结果明明px都对,然后却把页面滚动条也整出来了. 查看元素盒模型也一切正常. 然后仔细观察就发现是下边多了几个像素的白色边. 然后就 百度呗 以下 ...
- 在word中的表格指定位置插入一行
//创建一个Document类对象,并加载Word文档 Document doc = new Document(); doc.LoadFromFile(@"C:\Users\Administ ...
- 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_4 Mybatis中使用Dao实现类的执行过程分析-查询方法
delete方法没有并SqlSession的delete方法,而是调用的Upadte方法. 在测试类这里加断点. 实际的方法体内也加断点 运行测试方法,选择debug的方式 走到断点这里.会看到fac ...