记录一下

首先需要在页面上引用分页的js

  1 //分页插件
  2 $(function () {
  3     var pagingObj = $(".js_paging");
  4     var pagingEmptyObj = $(".js_pagingEmpty");//页面配置的数据没有情况下的显示(默认)  使用页面配置 例如:pagingEmpty:'.js_pagingEmpty' by cp 2016 1 14
  5     if (!pagingObj) {
  6         return;
  7     }
  8
  9     $(document).ready(function(){
 10         $.paging.search();
 11     });
 12
 13     //默认分页的配置
 14     var pagingConfig = {
 15         pageIndex: 1,
 16         pageSize: 10,
 17         url: "",
 18         data: {},
 19         appendTo: "",
 20         beforeSuccess: undefined,
 21         success: ajaxSuccess,
 22         isLockLoding: false //是否锁定加载,true为锁定,无数据或正在请求时锁定
 23     };
 24
 25     //配置等于当前页面配置合并默认配置
 26     var _curConfig = $(pagingObj).attr("data-options");
 27     if (_curConfig) {
 28         _curConfig = eval("({" + _curConfig + "})");
 29         pagingConfig = $.extend({}, pagingConfig, _curConfig);
 30     }
 31
 32     //window滚动到底部时触发
 33     $("body").on('touchmove', function (e) {
 34         if (!pagingConfig.isLockLoding) {
 35             //判断底部有无  在计算触发下拉刷新的位置
 36             if ($("footer").length) {
 37                 var lastScreen = parseInt($(window).scrollTop()) + parseInt($(window).innerHeight()) - 50 < pagingObj.position().top * 1 ? false : true;
 38             } else {
 39                 var lastScreen = parseInt($(window).scrollTop()) + parseInt($(window).innerHeight()) +3 < pagingObj.position().top * 1 ? false : true;
 40             }
 41
 42             if (lastScreen && pagingConfig.isLockLoding == false) {//到达需要加载的位置,且并未锁定加载
 43                 ajaxLoading();
 44             }
 45         }
 46     });
 47
 48     //拓展分页函数
 49     $.extend({
 50         paging: {
 51             search: function () {
 52                 pagingConfig.pageIndex = 1;
 53                 pagingConfig.isLockLoding = false;
 54                 ajaxLoading();
 55             },
 56             updateDataAndSearch: function (searchData) {
 57                 pagingConfig.pageIndex = 1;
 58                 pagingConfig.isLockLoding = false;
 59                 pagingConfig.data = $.extend(pagingConfig.data,searchData);
 60                 ajaxLoading();
 61             }
 62         }
 63     });
 64
 65     //请求分页数据,成功后调用success方法
 66     function ajaxLoading() {
 67         if (!pagingConfig.isLockLoding) {
 68             pagingConfig.isLockLoding = true;
 69             $.ajax({
 70                 type: "post",
 71                 url: pagingConfig.url,
 72                 data: $.extend(pagingConfig.data, { pageIndex: pagingConfig.pageIndex, pageSize: pagingConfig.pageSize }),
 73                 dataType: "json",
 74                 beforeSend: function () {
 75                     pagingObj.text("加载中...")
 76                 },
 77                 error: function () {
 78                     //showWrong("加载失败,请重试");
 79                     pagingConfig.isLockLoding = false;
 80                     pagingObj.text("");
 81                 },
 82                 isShowLoad:false,
 83                 success: pagingConfig.success
 84             });
 85         }
 86     }
 87
 88     //默认的ajaxSuccess方法,成功后会解析分页模板生成HTML
 89     function ajaxSuccess(data) {
 90         pagingConfig.isLockLoding = false;
 91         if (pagingConfig.pageIndex == 1) {
 92             $(pagingConfig.appendTo).empty();
 93         }
 94
 95         //如果定义了beforeSuccess函数,且return false则不执行解析html
 96         if (pagingConfig.beforeSuccess) {
 97             if (pagingConfig.beforeSuccess(data.Body) == false) {
 98                 return;
 99             }
100         }
101         if (data.DictJsonStatus == 200) {
102             datalist = data.Body.hasOwnProperty("DataList") ? data.Body.DataList : data.Body.List;
103             var templateHtml;
104             if (pagingConfig.template) {
105                 templateHtml = $(pagingConfig.template).html();
106             } else {
107                 templateHtml = pagingObj.next().html();
108             }
109             var regex = /(\$\{+[^\}]*[\}]+)/g;
110             var result = templateHtml.match(regex);
111
112             for (var j in datalist) {
113                 var model = datalist[j];
114                 var appendHtml = templateHtml.replace(regex, function (word) {
115                     return eval(word.substring(2, word.length - 1));
116                 });
117                 var r = $(pagingConfig.appendTo).append(appendHtml);
118             }
119             pagingConfig.pageIndex++;
120             if (data.Body.Total == 0) {//判断没有数据存在时的显示   by cp 2016 1 14
121                 pagingObj.hide();
122                 if (pagingConfig.pagingEmpty) {//pagingConfig.pagingEmpty 页面配置的数据没有情况下的显示  例如:".js_pagingEmpty"
123                     $(pagingConfig.pagingEmpty).show();
124                 } else {
125                     pagingEmptyObj.show();
126                 }
127             }
128             //如果得到的数据比每页数据量小,说明已经没有数据了
129             else if (datalist.length < pagingConfig.pageSize) {
130                 pagingObj.text("没有更多数据");
131                 pagingConfig.isLockLoding = true;
132             }
133             else {
134                 pagingObj.text("请下拉加载数据");
135             }
136         } else {
137             //showWrong(rq.Msg);
138             pagingObj.text("");
139         }
140     }
141
142 });
143 //搜索后得到的数据 显示提示信息 与条数
144 function showTipsTotal(data) {
145     var total = data.Total;
146     $(".js_num").html(total)
147 }

分页插件的js代码

模板:

 <div class="js_list"></div><!-- 分页控制 --><!-- js_paging 分页插件里的元素  data-options 打开的url   appendTo 放到哪个地方去   --><div class="commloadList js_paging" data-options="url:'/OACustomer/SearchCustomer',appendTo:'.js_list',data:searchData"></div><!--这个隐藏的div就放下面--><div style="display: none">   <!--模板   需要显示的重复的分页内容--> <div class="item-list  poabo js_openPage" data-url="/OACustomer/CustomerDetail?Id=${model.Id}">${formateOperate(model)}  <!-- ${model.Id} 后台给的绑定数据源 也可以直接放${自定义的一个方法(model)} --><img class="open" src="../../images/v1/open.png" alt="" /></div></div>

  

    

  

  

 

转载于:https://www.cnblogs.com/yinhuaboke/p/6757359.html

前端写分页(用了自己同事写的插件)相关推荐

  1. GridView 自写分页 存储过程

    GridView 自写分页 存储过程 前两天写了个分页的存储过程,今天把前台也写了,代码贴出来给大家分享下,有什么建议请赐教啊~ <asp:GridView ID="GridView1 ...

  2. html 前端分页代码怎么写,前端js写分页

    一个朋友要写分页 问我怎么写我就给写了一个demo感兴趣的可以参考下 一共三个文件 page.js page.html index.json 这三个文件要放在同一个目录下 这里面有ajax请求所以必须 ...

  3. html一个页面分页代码怎么写,纯JS前端实现分页代码

    先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页 ...

  4. java如何写ajax,java,jq,ajax写分页

    1.先写好html基础样式 我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页 下一页 2.编写servlet 2.1 先写查询 ...

  5. 腻害了!同事写了个隐藏 Bug,我排查了 3 天才解决问题!

    作者 | 栈长 来源  Java技术栈 最近线上监控 SFTP 连接频繁爆表,通过重启某个系统,连接数迅速下降,系统就能恢复正常,初步判断是应用程序连接未关闭的问题导致的. 栈长通过 IDE 全局搜索 ...

  6. ant中的table和pagination表格分页结合使用 手写分页

    表格部分 <a-table:row-selection="rowSelection" :columns="columns":data-source=&qu ...

  7. 手写分页 个人感觉还能优化,甚至抽象出来,需要高手讲解

    本来就是想来学习下手写分页或者自己写下分页逻辑,就当是一次练习,数据用的是sql2005,数据量是432W. 首先先感谢国家.然后在感谢csdn和群里的朋友跟我一起讨论.当然拉我知道我的做法不是最好的 ...

  8. 同事的你--写给那些离职的同事们

    同事的你       --写给那些离职的同事们 明天你是否会想起 昨天你写的程序 明天你是否还惦记 曾经爱编程的你 领导们都已想不起 曾经加班的你 我也是偶然看程序 才想起同事的你 谁聘了牛B烘烘的你 ...

  9. PageHelper分页插件失效的原因,PageHelper手写分页用法

    导包错误(以下是正确的) import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; PageHel ...

最新文章

  1. 高级软件工程第五次作业:东理三剑客团队作业-2
  2. python上下文管理关键字_[宜配屋]听图阁
  3. mvc中ajax的跳转,springmvc ajax 跳转的学习笔记
  4. linux环境中,top命令中,对command的命令进行扩展查看详情?
  5. java线程的创建与执行_Java多线程的创建和运行
  6. el-calendar 怎么设置上一年和下一年_为什么香港硕士一年的含金量那么高?
  7. 访问服务器的速度由哪些因素决定?
  8. 我的第一本算法书(图解算法)——什么是二叉查找树
  9. 【LeetCode刷题】23. 合并K个排序链表
  10. 潘建伟团队再次刷新世界纪录:实现18个光量子比特纠缠
  11. 令用EclipseJ2EE创建的Dynamic Web project目录结构与用MyEclipse创建的Web project一样
  12. 显示已暂停_美国大学这类研究生项目真的要凉?盘点美国暂停招生的研究生项目~...
  13. DDC传输协议以及显示器EDID结构介绍
  14. STM32F072RB 实作笔记(一)- Keil 安装
  15. 翻译狗文档免费下载手册(补充版)
  16. 老农的计算机学习笔记(二)硬件篇
  17. Vcenter无法登录,“根证书错误”,“签名证书无效”
  18. 如何找回OneNote 误删、丢失的笔记
  19. 使用Mathematica绘制蔓叶线图形(Cissoid of Diocles)
  20. 剪映电脑版使用教程(超详细)

热门文章

  1. mysql的zip包的安装方法
  2. 用vue开发顶端粘滞效果的页面
  3. 《HTML5 开发实例大全》——1.26 使用鼠标光标拖动网页中的文字
  4. 英文聊天常用缩写单词
  5. 修改的梅花雪的日期控件。。只是一些小改动
  6. php软件开发--nginx服务器(待补充)
  7. android按钮周围阴影,Android 上的按钮填充和阴影
  8. 对于python的感受_聊聊我对python的感受
  9. posix是什么_什么是POSIX? 理查德·斯托曼(Richard Stallman)解释
  10. devops 开源工具链_使用开源工具构建DevOps管道的初学者指南