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,
            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.trim()) < 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));
    }

    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();
    }

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

原文地址:https://www.cnblogs.com/xtreme/p/10986525.html

时间: 2024-08-18 22:28:39

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

js 前端分页空间控件

现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便.当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦. 本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象

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

    在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码贴出来大家一起相互学习下. 在项目中时常会用到前端分页的效果,使用grid来进行分页, 在源代码中\examples\ux\data\PagingMemoryProxy.js,此时要使用该js文件,在项目引用该文件. <script type="text/javascript" sr

纯手写完美实现前端分页效果

经常听人提到前端分页技术,却总也没有完全的实现过,作为做过多年前后端的老码工,真的有必要好好研究一番,以飨读者; 在这里不只是有前端分页页面效果,更有真实数据的展示,实现了真正的分页哦! 内容导读 1.页面设计 2.jQuery之ajax与JSON数据 3.运行效果 说明: (1)需要将源码导入HBuilder中,打开HBuilder直接通过内置服务器运行页面即可实现分页效果 (2)一个分页小技术有时也是让人挠头,这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到

jqgrid 前端分页

前提: 不能进行后台分页,或者后台添加分页比较麻烦的话, 打算采取前端分页 后台只需要查询全部数据,返回到前端 jqgrid需要后台返回的参数 { page:当前页(默认第一页 =1), total :总页数 (数据库返回总条数/页面分页配置显示的条数), records:数据库查询完的总条数, rows : 数据库查询的数据 } 转成json值,返回到前端 jqgrid初始化时 修改 datatype: "local", 添加 loadonce: true, 查询数据时,加载方式:

jQuery插件实例六:jQuery 前端分页

先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEvent':function(){ console.log('取数据Ajax'); } }); JS代码 //分页Pagination ; (function ($, window) { var defaults = { rowCount: 400, //总数据行数 navPage: 10, //每次显示多少页导

前端分页(输入页号)

$('#submitgo').click(function(){        if($('#fillNum').val()!=''){ var u = location.href.toString(); if(u.indexOf('page') >=0){                var url=replaceParamVal('page',$('#fillNum').val());                location.href=url;            }else{

前端分页插件pagination

摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉淀 在线预览:http://baixuexiyang.github.io/pagination/ 项目地址:https://github.com/baixuexiyang/pagination 注意: 后面我还要将自己在开发中写到的插件都总结下分享给大家,如果你喜欢用可以star或者fork,或者你

锋利的js前端分页之jQuery

原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 1 /** 2 * pageSize, 每页显示数 3 * pageIndex, 当前页数 4 * pageCount 总页数 5 * url 连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize

python2.0_day19_前端分页功能的实现

我们前面完成的客户纪录展示,只有4条,如果有上百条就不能在1页中全部展示了,那样是不人性化的.另外一次性取出来,数据量也比较大.假如现在有95条数据,我们想实现一个每页展示20条,那就分为5页.假如我们实现了,那么前端每一次请求就需要给后台提供参数了.这个参数就是告诉views里的视图函数我取第几页.需求分析: 95条,每页20条 第一次请求 返回20条,并且后端返回当前返回是第几页 ,所以第一次返回是1 点击下一页 1+1=2 ,把2传给后端,后端拿到后在把第二页的内容返回给前端,并且把当前返