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=& ...
随机推荐
- 15. ClustrixDB 管理数据分布
本节使用的关键术语: Relation — ClustrixDB中的每个表都被称为“关系”. Representation — 在ClustrixDB中,每个索引都称为一个“Representatio ...
- Linux 查看内存(free)、释放内存(基本操作)
原文链接:http://blog.51cto.com/11495268/2384147 1.简介 1.1 介绍 很多时候,服务器 负载 很高(执行操作 很慢),很多 原因 造成 这种 现象(内存不足 ...
- ZOJ 1610 Count the Colors (线段树成段更新)
题意 : 给出 n 个染色操作,问你到最后区间上能看见的各个颜色所拥有的区间块有多少个 分析 : 使用线段树成段更新然后再暴力查询总区间的颜色信息即可,这里需要注意的是给区间染色,而不是给点染色,所以 ...
- tf.InteractiveSession() 和 tf.Session() 的区别
tf.InteractiveSession():它能让你在运行图的时候,插入一些计算图,这些计算图是由某些操作(operations)构成的.这对于工作在交互式环境中的人们来说非常便利,比如使用IPy ...
- sqli-labs(28a)
0X01构造闭合 爆字段数 /?id=') order by 1%23 ?id=') order by 5%23 偷看一下源码 就只过滤了union select 闭合') 那我们来尝试一下 0X02 ...
- [CSP-S模拟测试]:山屋惊魂(模拟)
题目传送门(内部题90) 输入格式 前四行依次表示每种属性:$Might$.$Speed$.$Sanity$.$Knowledge$.每行一个$8$位数表示该属性的$8$个档的值,第二个数表示初始在哪 ...
- css命名和书写规范
前言 在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下... 1.命名规则说明 所有的命名最好都小写 属性的值 ...
- mysql 安装相关
Mysql 是基于C/S端的管理文件的服务器软件. Mysql简单分为两个软件:1服务器软件 2客户端软件 对于服务器软件中的socket服务器是一只开着的,客户端需要连接,并且还有创建文件删除文件等 ...
- 屏蔽ffmpeg命令的所有提示
有时候需要隐蔽的执行ffmpeg不希望输出任何日志,提示.这个时候只需要多添加这个参数即可 -loglevel quiet
- 基于DRF的图书增删改查练习
功能演示 信息展示 添加功能 编辑功能 删除功能 DRF构建后台数据 本例的Model如下 from django.db import models class Publish(models.Mode ...