工作中遇到这一需求,时间仓促赶着演示,只用了1个多小时随随便便做的,满足自定义以及同页面多块分页同时进行,多的不说,直接上demo,工作忙,没时间细化,希望哪位路过优化细化后共享下,最后附上使用说明

1、自己刚刚开始整合的小类库

View Code

String.prototype.trim = function () {return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.ltrim = function () {return this.replace(/(^\s*)/g, "");
}
String.prototype.rtrim = function () {return this.replace(/(\s*$)/g, "");
}
String.prototype.isNumber = function () {return this != "" && !isNaN(this);
}
String.prototype.toFix = function (fix) {///    <summary>///        去掉多余小数并且不四舍五入///    </summary>///    <param name="fix" type="Number">///        要保留的小数位数///    </param>///    <returns type="Number" />if (this.isNumber() && fix.isNumber()) {var array = this.split('.');if (array.length > 1 && fix.split('.').length == 1) {if (fix == 0) {return Number(array[0]);}return Number(array[0] + "." + array[1].substring(0, fix));}}return this;
}
Number.prototype.toFix = function (fix) {return this.toString().toFix(fix.toString());
}

2、主要js代码

View Code

function myAjaxOperation(dom, currentIndex, pageSize, pageCount) {this.dom = dom;this.currentIndex = currentIndex;this.pageSize = pageSize;this.pageCount = pageCount;
}
myAjaxOperation.prototype.paging = function () {///    <summary>///        通过ajax获取分页数据并分页///    </summary>///    <param name="dom" type="jQuery">///        要填充数据的dom,以及在dom下方生成分页条///    </param>///    <param name="currentIndex" type="Int">///        获取第几页///    </param>///    <param name="pageSize" type="Int">///        每页获取多少条数据///    </param>///    <param name="pageCount" type="Int">///        分页条显示多少页///    </param>///    <returns type="html" />if (this.dom == "undefined" || $(this.dom).attr("class") != "ajaxRequest") {return;}var dom = this.dom;var currentIndex = 1;var pageSize = 10;var pageCount = 10;if (this.currentIndex != "undefined" && this.currentIndex.toString().isNumber()) {currentIndex = Number(this.currentIndex);}if (this.pageSize != "undefined" && this.pageSize.toString().isNumber()) {pageSize = Number(this.pageSize);}if (this.pageCount != "undefined" && this.pageCount.toString().isNumber()) {pageCount = Number(this.pageCount);}var total; //总共多少条数据 var totalpage; //总共多少页var preNO; //分页条当前页之前显示多少页var nextNO; //分页条当前页之后显示多少页if (pageCount % 2 == 0) {preNO = pageCount / 2;nextNO = (pageCount / 2) - 1;}else {preNO = (pageCount / 2).toFix(0);nextNO = (pageCount / 2).toFix(0);}var url = $(dom).attr("destination");$.get(url, { pageSize: pageSize, pageIndex: currentIndex }, function (msg) {var resultDom = $(msg);$(dom).html(resultDom);total = Number($(resultDom).find("table").attr("total"));if ((total / pageSize) > (total / pageSize).toFix(0)) {totalpage = ((total / pageSize) + 1).toFix(0);}else {totalpage = total / pageSize;}var pagingBar = $('<div class="paging"><ul></ul></div>');if (currentIndex != 1) {$(pagingBar).children("ul").append($('<li index="1"><a href="#">首页</a></li>'));$(pagingBar).children("ul").append($('<li index="' + (currentIndex - 1) + '"><a href="#">上一页</a></li>'));}for (var i = 1; i <= pageCount && currentIndex - preNO + 1 <= totalpage && i <= totalpage; i++) {var index = i;if (currentIndex > preNO && (totalpage - currentIndex) >= nextNO) {index += (currentIndex - preNO);}else if (totalpage < pageCount) { }else {if (totalpage - currentIndex < nextNO) {index = totalpage - pageCount + index;}}$(pagingBar).children("ul").append($('<li index="' + index + '" ' + (index == currentIndex ? 'class="pagingli"' : '') + '><a href="#">' + index + '</a></li>'));}if (currentIndex != totalpage) {$(pagingBar).children("ul").append($('<li index="' + (currentIndex + 1) + '"><a href="#">下一页</a></li><li index="' + totalpage + '"><a href="#">末页</a></li>'));}$(pagingBar).children("ul").append($('<li>共 ' + total + '条,' + totalpage + '页</li>'));$(pagingBar).children().find("li").bind('click', function () {$(this).addClass("liloading");getDataList($(dom), $(this).attr("index"), pageSize, pageCount);});$(dom).next(".paging").remove();$(dom).after(pagingBar);});}function getDataList(dom, currentIndex, pageSize, pageCount) {var myAjax = new myAjaxOperation();myAjax.dom = $(dom);myAjax.currentIndex = currentIndex;myAjax.pageSize = pageSize;myAjax.pageCount = pageCount;myAjax.paging();
}

3、获取的数据的格式,注意table有个自定义属性 总数total用来显示总共多少条数据

View Code

<div><table cellpadding="0" cellspacing="0" width="100%"  total="@ViewBag.total">@if (ViewBag.IsComplate == "0"){
@*未完成*@     <thead><tr><td class="leftborder">流程名称</td><td>流程交易号</td><td>操作名称</td><td>操作人</td><td>操作人部门</td><td>创建时间</td><td class="rightborder">已过时间</td></tr></thead><tbody>@{foreach (var item in ViewData["AllOpreation"] as List<AllOpreationModel>){<tr><td>@item.ProcessName</td><td><a href="javascript:void(0)" οnclick="OpenCurrentProcess('@item.ProcessTransactionsNumber')">[@item.ProcessTransactionsNumber]</a> @*<a href="javascript:void(0)" οnclick="currentPro(1)">@item.ProcessTransactionsNumber</a>*@</td><td>@item.OperationName</td><td><a href="javascript:void(0)">@item.Operator</a></td><td>@item.OperatorSector</td><td>@item.CreationTime</td><td>@item.Overtime</td></tr>}}</tbody>}else{
@*已完成*@<thead><tr><td class="leftborder">流程名称</td><td>流程交易号</td><td>操作名称</td><td>操作交易号</td><td>操作结果</td><td>操作人</td><td>操作人部门</td><td>待办创建时间</td><td>完成时间</td><td class="rightborder">历时</td></tr></thead><tbody>@{foreach (var item in ViewData["AllOpreation"] as List<AllOpreationModel>){<tr><td>@item.ProcessName</td><td><a href="javascript:void(0)" οnclick="OpenCurrentProcess('@item.ProcessTransactionsNumber')">[@item.ProcessTransactionsNumber]</a> @*<a href="javascript:void(0)" οnclick="currentPro(1)">@item.ProcessTransactionsNumber</a>*@</td><td>@item.OperationName</td><td>@Html.ActionLink("[" + item.OperatingTransactionNumber + "]", "FormView", "../uWorkflow/Task", new { code = item.OperatingTransactionNumber }, new { target = "_blank" })</td><td>@item.OperatingResult</td><td><a href="javascript:void(0)">@item.Operator</a></td><td>@item.OperatorSector</td><td>@item.CreationTime</td><td>@item.CompletionTime</td><td>@item.Overtime</td></tr>}}</tbody>}</table>
</div>

4、如何使用,@*之间的内容是MVC的注释,分页条自动生成,不用写的*@

html:

View Code

@*@Html.Action("_WaitingOperationPart", "Opreation")*@<div class="ajaxRequest" destination="/uProcess/Opreation/_WaitingOperationPart" pageSize="10" pageCount="5">@*This data list get by ajax.Please set class 'ajaxRequest' and set a custom attribute 'destination'.pageSize :每页获取多少条数据pageCount : 分页条显示多少页*@</div>@*<div class="paging"><ul><li><a href="#">首页</a></li><li><a href="#">上一页</a></li><li class="pagingli"><a href="#">1</a></li> pagingli 当前页样式<li class="liloading"><a href="#">2</a></li> liloading 点击后显示加载图标<li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">下一页</a></li><li><a href="#">末页</a></li></ul></div>*@

js:pageSize和pageCount也可以不初始化,默认都是10

$(".ajaxRequest").each(function (index) {if (window["console"])console.log(index);var myAjax = new myAjaxOperation();myAjax.dom = $(this);myAjax.currentIndex = 1;myAjax.pageSize = $(this).attr("pageSize").trim();myAjax.pageCount = $(this).attr("pageCount").trim();myAjax.paging();});

5、截图赏析 样式自己调

6、不善写作,如果还是不懂就给我留言,我会在收到留言的第一时间回复你

转载于:https://www.cnblogs.com/ahjesus/archive/2012/06/04/2535087.html

ajax获取数据自动创建分页,支持自定义显示数据量以及分页数量相关推荐

  1. linux ls 显示文件年份 并支持自定义显示年月日时分秒

    linux ls 显示文件年份 并支持自定义显示年月日时分秒 #linux ls 显示文件年份 并支持自定义显示年月日时分秒 默认情况下ls -l命令只显示月和日,不显示年份: $ ls -l lrw ...

  2. R语言为散点图添加凸包(convex hull):数据预处理(创建一个包含每组数据凸包边界的数据集)、ggplot2使用geom_polygon函数为可视化图像添加凸包(convex hull)

    R语言为散点图添加凸包(convex hull):数据预处理(创建一个包含每组数据凸包边界的数据集).ggplot2使用geom_polygon函数为可视化图像添加凸包(convex hull) 目录

  3. 2019-7-26 [MySQL] 安装与介绍 语句分类/语法 数据类型 DDL数据定义:创建/查看/删除/使用 DML数据操作:增删改 主键约束 自动增长列 非空约束 默认值 Navicat

    文章目录 0.知识回顾 1.数据库介绍 1.1 数据库概述 1.1.1 什么是数据库 1.1.2 什么是数据库管理系统 1.1.3 数据库与数据库管理系统的关系 1.2 数据库表 1.3 表数据 1. ...

  4. java动态是如何根据实体建表_传入Java对象 自动创建动态表 并录入数据

    看到Hibernate你给一个对象,他就能动态的创建配置文件里面指定的表名,然后把数据录入到数据库,当初感觉是很神奇,不过,好像 Hibernate不能动态的分表创建表和录入数据 我这里写了一个公用的 ...

  5. Access和SQL server开启表间关系,并实现更新或删除母表数据自动更新或删除子表数据...

    1.Access开启表间关系,并实现删除母表数据自动删除子表数据: 在Tables等界面 - > 右键 - > Relationships... -> 弹出Relationships ...

  6. 数据透视创建传统布局_更改数据透视图布局

    数据透视创建传统布局 Recently, someone asked me why all the columns in their pivot chart were the same colour. ...

  7. python中texttable库显示实时数据_用Python串口实时显示数据并绘图pyqtgraph

    用Python串口实时显示数据并绘图 使用pyserial进行串口传输 一.安装pyserial以及基本用法 在cmd下输入命令pip install pyserial 注:升级pip后会出现 &qu ...

  8. 大数据bug-wps(一:wps显示数据量问题)

    wps显示数据量 wps的EXCEL最多支持1048576行. xls格式的表格文件最多支持65536行. 如果数据量过多,我们可以选择其他的工具进行数据的展示. 例如:notpad++.

  9. sqlitepython导入数据_python从sqlite读取并显示数据的方法

    这篇文章主要介绍了 python 从 sqlite 读取并显示数据的方法 , 涉及 Python 操作 SQLite 数据库的读取及显示相关技巧 , 需要的朋友可以参考下 import cgi, os ...

最新文章

  1. Table布局及其它布局
  2. Linux中的一个命令行计算器bc简介
  3. 寄存器计算软件/寄存器小精灵
  4. C# 之 Math取整
  5. CPU和GPU擅长和不擅长的方面
  6. 快速排序简便记_建立和测试股票交易策略的快速简便方法
  7. 如何安装python3.8.1_python3.8.1 安装
  8. HashTable,Dictionary,ConcurrentDictionary 的应用场景,区别,用法统计
  9. 【linux】telnet ctrl+c 不退出问题解决
  10. java中跑批指的是什么_DB2几个问题的处理(三)
  11. 计算机在机械设制造中的应用实例,三维设计软件和技术在机械设计中的应用
  12. matlab 图像保存为视频教程,山东大学《数字图像处理(MATLAB)》江铭炎视频教程
  13. Linux查看当前时间
  14. Delphi惹谁了?
  15. Bugku旧平台crypto writeup
  16. jupyter notebook如何自动生成目录(extensions)
  17. USB设备运行不正常,windows无法识别的问题
  18. 行车记录仪android,车叮咚:一款搭载 Android 系统的行车记录仪是怎样的?
  19. USB鼠标设备驱动程序简单实现(一)
  20. Ubuntu16.04 rc.local不生效,启动过程中报“Failed to start /etc/rc.local Compatibility”错误

热门文章

  1. 不借助第三方 Windows 7搞定无法删除文件
  2. 禁止解析某目录的php,限制访问user_agent,php相关配置
  3. 后APP时代的破局之路 :阿里技术“三大容器五大方案”亮相,百川开放全面升级...
  4. python多重继承
  5. python中string的操作函数
  6. 使用visual studio code调试php代码
  7. 开源BTS产品中存在多处漏洞,攻击者或可劫持手机通讯基站
  8. 智简全渠道孟伟:做CRM十六年,企业的一百种死法
  9. “智慧城市”背后的安全隐患
  10. RelativeLayout不能居中的解决的方法