JS 分页实现
var pagesize = 5;
var pageindex = 1;
var pagetype;
var parms;
var nextSize = 1;
var target;
function AjaxGetData(_pagesize, _pageindex, _type, _parms, _target) {
pagesize = _pagesize;
pageindex = _pageindex;
pagetype = _type;
parms = _parms;
target = _target;
$.ajax({
url: "/pro/casxIndex.ashx?PageType=" + pagetype + "&time=" + Date.parse(new Date()) + "",
type: "post",
data: "PageSize=" + pagesize + "&PageIndex=" + pageindex + parms,
dataType: "json",
success: function (data) {
var targetHtml = "";
var targetEle = "";
if (target) {
targetEle = $(target)
};
if (data.result == 1) {
var returnJson = $.parseJSON(data.returnval);
targetHtml += MatchCss(pagetype, returnJson);
}
if (targetHtml != "undefined") {
if (data.result == "2") {
targetEle.html(data.returnval);
}
else {
targetEle.html(targetHtml);
}
}
}
})
}
function MatchCss(pagetype, returnJson) {
switch (pagetype.toLocaleLowerCase()) {
case "caseindex":
return caseIndexList("", returnJson);
break
}
}
function caseIndexList(url, returnJson) {
var targetHtml = "";
targetHtml += " <ul class=\"wms-caseList\"> ";
for (var i = 0; i < returnJson.length; i++) {
targetHtml += "<li>";
targetHtml += "<div><a href=" + returnJson[i].rootlist + " title=\"\"><img src=" + returnJson[i].ImageURL + " alt=" + returnJson[i].Title + " width=\"280\" height=\"156\"></a></div>";
targetHtml += "<dl>";
targetHtml += "<dt>";
targetHtml += "<a href=" + returnJson[i].rootlist + ">" + returnJson[i].Title + "</a>";
targetHtml += "<span style=\"font-size:xx-small;float:right;\">" + returnJson[i].AddTime + "</span>"
targetHtml += "</dt>";
targetHtml += "<dd>" + returnJson[i].Remark + "</dd>";
targetHtml += "</dl>";
targetHtml += "</li>"
}
targetHtml += "</ul>";
targetHtml += caseIndexPager(returnJson);
return targetHtml
}
function caseIndexPager(returnJson) {
var targetHtml = "";
if (parseInt(returnJson[0].count) > pagesize) {
targetHtml += "<div class=\"page\" >";
targetHtml += "<span style='display:none;'>共有记录" + returnJson[0].count + ";共<span id='count'>" + (returnJson[0].count % pagesize == 0 ? parseInt(returnJson[0].count / pagesize) : parseInt(returnJson[0].count / pagesize + 1)) + "</span>页</span>";
targetHtml += "<span class=\"sp11\"><a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' title='首页' >首页</a></span>\n";
targetHtml += "<span class=\"sp12\"><a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' title='上一页'>上一页</a></span>\n";
if (pagesize < parseInt(returnJson[0].count)) {
targetHtml += "<span class='num_2'>\n";
for (var i = 1; i < 6; i++) {
if (((nextSize) * 5 - 5 + i) <= (parseInt(returnJson[0].count) % pagesize == 0 ? parseInt(returnJson[0].count / pagesize) : parseInt(returnJson[0].count / pagesize + 1))) {
if ((nextSize) * 5 - 5 + i == pageindex) {
targetHtml += "<a style='color:red;' title='正在查询" + (((nextSize) * 5 - 5 + i - 1) * pagesize + 1) + " to " + ((((nextSize) * 5 - 5 + i) * pagesize) > returnJson[0].count ? returnJson[0].count : (((nextSize) * 5 - 5 + i) * pagesize)) + " / " + returnJson[0].count + "' href='javascript:void' onclick='GoToChoosePage(this)' id='aChoosePage" + i + "' title=''>" + ((nextSize) * 5 - 5 + i) + " </a>"
} else {
targetHtml += "<a title='正在查询" + (((nextSize) * 5 - 5 + i - 1) * pagesize + 1) + " to " + ((((nextSize) * 5 - 5 + i) * pagesize) > returnJson[0].count ? returnJson[0].count : (((nextSize) * 5 - 5 + i) * pagesize)) + " / " + returnJson[0].count + "' href='javascript:void' onclick='GoToChoosePage(this)' id='aChoosePage" + i + "' title=''>" + ((nextSize) * 5 - 5 + i) + " </a>"
}
} else {
break
}
}
targetHtml += "</span>\n"
} else {
targetHtml += "<a style='color:red;' title='正在查询" + ((pageindex - 1) * pagesize + 1) + " to " + returnJson[0].count + " / " + returnJson[0].count + "' href='javascript:void' onclick='GoToChoosePage(this)' id='aChoosePage' title=''>" + pageindex + " </a>"
}
targetHtml += "<span class=\"sp13\"><a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'title='下一页'>下一页</a></span>\n";
targetHtml += "<span class=\"sp14\"><a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' title='末页' >末页</a></span>\n";
targetHtml += "</div>"
}
return targetHtml
}
function GoToFirstPage() {
pageindex = 1;
nextSize = parseInt(pageindex / 5 + 1);
AjaxGetData(pagesize, pageindex, pagetype, parms, target)
}
function GoToPrePage() {
if (pageindex > 1) {
pageindex -= 1;
nextSize = parseInt((pageindex - 1) / 5 + 1);
pageindex = pageindex > 0 ? pageindex : 1;
AjaxGetData(pagesize, pageindex, pagetype, parms, target)
}
}
function GoToNextPage() {
if (pageindex < parseInt($("#count").text())) {
pageindex += 1;
nextSize = parseInt((pageindex - 1) / 5 + 1)
}
AjaxGetData(pagesize, pageindex, pagetype, parms, target)
}
function GoToEndPage() {
pageindex = parseInt($("#count").text());
nextSize = parseInt((pageindex - 1) / 5 + 1);
AjaxGetData(pagesize, pageindex, pagetype, parms, target)
}
function GoToChoosePage(mm) {
pageindex = parseInt(mm.innerHTML);
nextSize = parseInt((pageindex - 1) / 5 + 1);
AjaxGetData(pagesize, pageindex, pagetype, parms, target)
}
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
return format
}
JS 分页实现的更多相关文章
- js分页小结
今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- jsp、js分页功能的简单总结
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
- 一个重构的js分页类
// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...
- 面向对象版js分页
基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...
- 纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
- JS分页 + 获取MVC地址栏URL路径的最后参数
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- 浅谈js分页的几种方法
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...
- JS分页条插件
目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...
- js分页实例
js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...
随机推荐
- Linux部署walle
背景:Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用!支持git.svn版本管理,支持各种web代码发布,PHP,Python,JAVA等代码的发布.回滚,可以通过web来 ...
- React中state与props介绍与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- [原创]SQL表值函数:返回从当前周开始往回的自定义周数
一如往常一样,一篇简短博文记录开发过程中遇到的一个问题.初衷都是记录自己的一些Idea,也是希望能够帮助一些凑巧遇到此类需求的问题,这个需求的的开端是因为,要统计最近N周的销售数据. 接下来我们来看看 ...
- 5.5 Ubuntu无法访问windows上的文件
比如,我的文件都放在win10桌面上的Tools文件夹中,那么在Ubuntu中访问如下:当然,sunny在点击这个磁盘时,遇到了没有访问权限的问题. 解决方案:参考网址http://blog.csdn ...
- C语言实现wc项目
该World Count项目用的是C语言编写,只实现了-c.-w.-l.三个功能,由于简单全部代码均由小编自己编写,用的是VS2013只支持windows平台cmd运行. 木有图形界面,参考了Linu ...
- Codeforces Round #279 (Div. 2) C. Hacking Cypher (大数取余)
题目链接 C. Hacking Cyphertime limit per test1 secondmemory limit per test256 megabytesinputstandard inp ...
- 微信小程地图片未加载成功的情况 Failed to load local image resource
在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src= ...
- 【MYSQL】删除数据后自动增长列归0的问题
在清空数据表后发现自动增长id列在新增数据后仍然会按照之前的顺序生成 强迫症,就是想清空数据后让id从0开始,于是百度 执行以下sql语句可以让自动增长列归0 truncate table 表名 这是 ...
- [开源]OSharpNS 步步为营系列 - 5. 添加前端Angular模块[完结]
什么是OSharp OSharpNS全称OSharp Framework with .NetStandard2.0,是一个基于.NetStandard2.0开发的一个.NetCore快速开发框架.这个 ...
- java 提取(解压)rar文件中特定后缀的文件并保存到指定目录
内容简介 本文主要介绍使用junrar来提取rar压缩文件中特定后缀(如:png,jpg)的文件并保存到指定目录下. 支持v4及以下版本压缩文件,不支持v5及以上. 在rar文件上右键,查看属性,在压 ...