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) + "&nbsp;to&nbsp;" + ((((nextSize) * 5 - 5 + i) * pagesize) > returnJson[0].count ? returnJson[0].count : (((nextSize) * 5 - 5 + i) * pagesize)) + "&nbsp;/&nbsp;" + returnJson[0].count + "' href='javascript:void' onclick='GoToChoosePage(this)' id='aChoosePage" + i + "' title=''>" + ((nextSize) * 5 - 5 + i) + "&nbsp;&nbsp;</a>"

} else {

targetHtml += "<a title='正在查询" + (((nextSize) * 5 - 5 + i - 1) * pagesize + 1) + "&nbsp;to&nbsp;" + ((((nextSize) * 5 - 5 + i) * pagesize) > returnJson[0].count ? returnJson[0].count : (((nextSize) * 5 - 5 + i) * pagesize)) + "&nbsp;/&nbsp;" + returnJson[0].count + "' href='javascript:void' onclick='GoToChoosePage(this)' id='aChoosePage" + i + "' title=''>" + ((nextSize) * 5 - 5 + i) + "&nbsp;&nbsp;</a>"

}

} else {

break

}

}

targetHtml += "</span>\n"

} else {

targetHtml += "<a style='color:red;' title='正在查询" + ((pageindex - 1) * pagesize + 1) + "&nbsp;to&nbsp;" + returnJson[0].count + "&nbsp;/&nbsp;" + returnJson[0].count + "' href='javascript:void' onclick='GoToChoosePage(this)' id='aChoosePage' title=''>" + pageindex + "&nbsp;</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 分页实现的更多相关文章

  1. js分页小结

     今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

  2. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  3. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  4. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  5. 面向对象版js分页

    基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...

  6. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  7. JS分页 + 获取MVC地址栏URL路径的最后参数

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  8. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  9. JS分页条插件

    目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...

  10. js分页实例

    js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

随机推荐

  1. Project Server 2016 RestAPI调用测试

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. .NET牛人养成计划

    六大喜讯:(1)对于小型平板等授权免费(2)编译平台Rosly开源,ASP.NET全系平台开源(ASP.NET,Web API):ASP.NET跨平台,Mono,让ASP.NET运行在Linux和Un ...

  3. 代码,用c++实现线性链表

    #include <iostream> #include <stdio.h> #include <malloc.h> using namespace std; #d ...

  4. arguments详解

    arguments 是什么? 是一个对象,一个 很像数组的对象 arguments内容是什么? 1是函数运行时的实参列表 2收到实参收集起来,放到一个arguments对象里 在词法分析中,首先按形参 ...

  5. [poj1390]Blocks(方块消除)

    题目大意:给定一序列,可点击某一位置消除与其相邻且相同的方块,得分为$len*len$,求最大得分. 解题关键:关键是状态的构造,首先离散化一下,令$dp[i][j][k]$表示序列$i-j$且后面有 ...

  6. #410div2D. Mike and distribution

    D. Mike and distribution time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  7. sell01 环境搭建、编写持久层并进行测试

    1 环境配置 JDK 1.8 MAVEN 3.5 MYSQL 5.7 VirtualBox 5.1 2 搭建MYSQL环境 下载 VM 和 虚拟镜像文件 虚拟镜像文件:点击前往 技巧01:安装完vir ...

  8. ubuntu判断系统是32位还是64位

    1. 打开终端. 2. 输入命令  sudo uname -m 3. 如果输出为 x86_64, 则说明是64位操作系统:如果输出为 i686,说明是32位操作系统.

  9. [转]hadoop运行mapreduce作业无法连接0.0.0.0/0.0.0.0:10020

    14/04/04 17:15:12 INFO mapreduce.Job:  map 0% reduce 0% 14/04/04 17:19:42 INFO mapreduce.Job:  map 4 ...

  10. 【转】Lucene不同版本中Field的Keyword、UnIndex,导致lucene 建立索引总是报错 急!!

    lucene 建立索引 总是报错 急!! http://zhidao.baidu.com/link?url=iaVs9JH4DfN6iwaWImt7VMJENWCWGGaWFGPjqhUw_jz7Fs ...