前端写分页(用了自己同事写的插件)
记录一下
首先需要在页面上引用分页的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
前端写分页(用了自己同事写的插件)相关推荐
- GridView 自写分页 存储过程
GridView 自写分页 存储过程 前两天写了个分页的存储过程,今天把前台也写了,代码贴出来给大家分享下,有什么建议请赐教啊~ <asp:GridView ID="GridView1 ...
- html 前端分页代码怎么写,前端js写分页
一个朋友要写分页 问我怎么写我就给写了一个demo感兴趣的可以参考下 一共三个文件 page.js page.html index.json 这三个文件要放在同一个目录下 这里面有ajax请求所以必须 ...
- html一个页面分页代码怎么写,纯JS前端实现分页代码
先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页 ...
- java如何写ajax,java,jq,ajax写分页
1.先写好html基础样式 我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页 下一页 2.编写servlet 2.1 先写查询 ...
- 腻害了!同事写了个隐藏 Bug,我排查了 3 天才解决问题!
作者 | 栈长 来源 Java技术栈 最近线上监控 SFTP 连接频繁爆表,通过重启某个系统,连接数迅速下降,系统就能恢复正常,初步判断是应用程序连接未关闭的问题导致的. 栈长通过 IDE 全局搜索 ...
- ant中的table和pagination表格分页结合使用 手写分页
表格部分 <a-table:row-selection="rowSelection" :columns="columns":data-source=&qu ...
- 手写分页 个人感觉还能优化,甚至抽象出来,需要高手讲解
本来就是想来学习下手写分页或者自己写下分页逻辑,就当是一次练习,数据用的是sql2005,数据量是432W. 首先先感谢国家.然后在感谢csdn和群里的朋友跟我一起讨论.当然拉我知道我的做法不是最好的 ...
- 同事的你--写给那些离职的同事们
同事的你 --写给那些离职的同事们 明天你是否会想起 昨天你写的程序 明天你是否还惦记 曾经爱编程的你 领导们都已想不起 曾经加班的你 我也是偶然看程序 才想起同事的你 谁聘了牛B烘烘的你 ...
- PageHelper分页插件失效的原因,PageHelper手写分页用法
导包错误(以下是正确的) import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; PageHel ...
最新文章
- 高级软件工程第五次作业:东理三剑客团队作业-2
- python上下文管理关键字_[宜配屋]听图阁
- mvc中ajax的跳转,springmvc ajax 跳转的学习笔记
- linux环境中,top命令中,对command的命令进行扩展查看详情?
- java线程的创建与执行_Java多线程的创建和运行
- el-calendar 怎么设置上一年和下一年_为什么香港硕士一年的含金量那么高?
- 访问服务器的速度由哪些因素决定?
- 我的第一本算法书(图解算法)——什么是二叉查找树
- 【LeetCode刷题】23. 合并K个排序链表
- 潘建伟团队再次刷新世界纪录:实现18个光量子比特纠缠
- 令用EclipseJ2EE创建的Dynamic Web project目录结构与用MyEclipse创建的Web project一样
- 显示已暂停_美国大学这类研究生项目真的要凉?盘点美国暂停招生的研究生项目~...
- DDC传输协议以及显示器EDID结构介绍
- STM32F072RB 实作笔记(一)- Keil 安装
- 翻译狗文档免费下载手册(补充版)
- 老农的计算机学习笔记(二)硬件篇
- Vcenter无法登录,“根证书错误”,“签名证书无效”
- 如何找回OneNote 误删、丢失的笔记
- 使用Mathematica绘制蔓叶线图形(Cissoid of Diocles)
- 剪映电脑版使用教程(超详细)
热门文章
- mysql的zip包的安装方法
- 用vue开发顶端粘滞效果的页面
- 《HTML5 开发实例大全》——1.26 使用鼠标光标拖动网页中的文字
- 英文聊天常用缩写单词
- 修改的梅花雪的日期控件。。只是一些小改动
- php软件开发--nginx服务器(待补充)
- android按钮周围阴影,Android 上的按钮填充和阴影
- 对于python的感受_聊聊我对python的感受
- posix是什么_什么是POSIX? 理查德·斯托曼(Richard Stallman)解释
- devops 开源工具链_使用开源工具构建DevOps管道的初学者指南