JS 自写datapage.js 通用分页

var Page = function () { };

Page.prototype = {

Loading: "<img src=‘/Content/Scripts/Datapager/loading.gif /><span>正在加载数据，请稍等...</span>",

NoResult: "暂无相关数据！",

Count: 10,

Current: 1,

Total: 0,

Url: "",

Dom: null,

Container: null,

Data: {},

EXP: null,//扩展参数

type: 0,

CallBack: null,

GetPageData: function () {

$this = this;

//if ($this.Dom) {

//   $this.Data = new JSONSerializer().Serialize($this.Dom);

//}

this.Data.PageSize = this.Count;

this.Data.PageNum = this.Current;

this.Data.type = this.type;

this.Data.EXP = this.EXP;

this.Data._ = Math.random();

$("#filter").hide();

$("#dataArea").hide();

$("#caption").html($this.Loading);

$.ajax({

url: $this.Url,

async: false,

cache: false,

dataType: "json",

data: $this.Data,

success: function (result) {

if (result.ReturnType) {

if (result.ReturnCount > 0) {

$("#pagers").show();

if ($this.CallBack) {

if ($this.Container) {

$this.Container.empty();

}

$this.CallBack(result.ReturnData);

// $this.Total = result.ReturnData[0].TotalItems;//原来写法

$this.Total = result.ReturnCount;//当前写法

}

}

else {

if ($this.Container) {

$this.Container.empty();

}

$("#mtitle").html("信息提示");

$("#msg").html(result.ReturnMsg);

$("#msg_btn").html("<a class=\"btn btn-warning\" style=‘border-radius:6px;‘  data-dismiss=\"modal\">OK</a>");

$(‘#alertModel‘).modal(‘show‘);

$("#pagers").hide();

}

}

else {

if ($this.Container) {

$this.Container.empty();

}

$("#mtitle").html("信息提示");

$("#msg").html(result.ReturnMsg);

$("#msg_btn").html("<a class=\"btn btn-warning\" style=‘border-radius:6px;‘  data-dismiss=\"modal\">OK</a>");

$(‘#alertModel‘).modal(‘show‘);

$("#pagers").hide();

}

},

complete: function () {

$this.Paged();

}

});

},

Paged: function () {

var max = Math.ceil(this.Total / this.Count);

$this = this;

$("#btnSearch").unbind("click").click(function () {

$this.Current = 1;

$this.GetPageData();

});

$("#firstPage").unbind("click").click(function () {

$this.Current = 1;

$this.GetPageData();

});

$("#prePage").unbind("click").click(function () {

if ($this.Current > 1) {

$this.Current--;

$this.GetPageData();

}

});

$("#nextPage").unbind("click").click(function () {

if ($this.Current < max) {

$this.Current++;

$this.GetPageData();

}

});

$("#lastPage").unbind("click").click(function () {

if ($this.Current < max) {

$this.Current = max;

$this.GetPageData();

}

});

if ($this.Current == 1) {

$("#firstPage,#prePage").addClass("disabled");

$("#prePage").unbind("click");

if ($this.Current == max) {

$("#lastPage,#nextPage").addClass("disabled");

}

else {

$("#lastPage,#nextPage").removeClass("disabled");

}

}

else if ($this.Current == max) {

$("#lastPage,#nextPage").addClass("disabled");

$("#firstPage,#prePage").removeClass("disabled");

}

else {

$("#lastPage,#nextPage,#firstPage,#prePage").removeClass("disabled");

}

$("#pages").val("当前第" + $this.Current + "页 共" + max + "页");

$("#pages").unbind("blur").blur(function () {

var page = parseInt($("#pages").val());

if (page > 0 && page < max + 1) {

$this.Current = page;

$this.GetPageData();

}

else {

$("#pages").val("当前第" + $this.Current + "页 共" + max + "页");

}

});

$("#pages").unbind("focus").focus(function () {

var page = $("#pages").val("");

});

},

Pchange: function () {

$this.Count = parseInt($("#selelct_PageCount").val());

$this.Current = 1;

$this.GetPageData();

}

}

//初始化分页

$(function () {

$("#selelct_PageCount").change(function () {

var page = new Page();

page.Pchange();

});

});

分页样式HTML

<!--start 分页-->

<div class="content-body" style="border: none; " id="pagers">

<div class="gigantic pagination" style="margin-top: 10px; float:left; width: 322px;">

<a class="first" data-action="first" id="firstPage"><i class="fa fa-angle-double-left" style="font-size: 25px;"></i></a>

<a class="previous" data-action="previous" id="prePage"><i class="fa fa-angle-left" style="font-size: 25px"></i></a>

<input type="text" id="pages" />

<a class="next" data-action="next" id="nextPage"><i class="fa fa-angle-right" style="font-size: 25px"></i></a>

<a class="last" data-action="last" id="lastPage"><i class="fa fa-angle-double-right" style="font-size: 25px"></i></a>

</div>

<div>

<select id="selelct_PageCount" style="margin-left: 330px; margin-top: 10px; height: 37px; width: 55px;" class="maoxian">

<i class="fa-caret-down"></i>

<option value="2">2</option>

<option value="3">3</option>

<option value="5">5</option>

<option selected="selected" value="10">10</option>

<option value="20">20</option>

<option value="30">30</option>

<option value="50">50</option>

<option value="100">100</option>

<option value="200">200</option>

<option value="500">500</option>

</select>

</div>

<div class="clearfix"></div>

</div>

<!--end 分页-->

css文件

.pagination {

position:absolute;

display: inline-block;

border:1px solid #cecece;

width:320px;

height:37px;

border-radius: 3px; }

.pagination a {

background-color:#1fb5ac;

display: block;

float: left;

width: 30px;

height: 30px;

outline: none;

color: #1fb5ac;

vertical-align: middle;

text-align: center;

text-decoration: none;

font-weight: bold;

font-size: 16px;

font-family: Times, ‘Times New Roman‘, Georgia, Palatino;

/* ATTN: need a better font stack */

background-color: #1fb5ac;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));

background-image: -webkit-linear-gradient(#fff, #fff);

background-image: linear-gradient(#fff, #fff); }

.pagination a:hover, .pagination a:focus, .pagination a:active {

background-color: #fff;

color: #000;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece));

background-image: -webkit-linear-gradient(#e4e4e4, #e4e4e4);

background-image: linear-gradient(#e4e4e4, #e4e4e4);

background-image: -webkit-linear-gradient(#fff, #fff);

background-image: linear-gradient(#fff, #fff);

cursor:pointer;

}

.pagination a.disabled, .pagination a.disabled:hover, .pagination a.disabled:focus, .pagination a.disabled:active {

background-color: #fff;

background-image: -webkit-linear-gradient(#fff, #fff);

background-image: linear-gradient(#fff, #fff);

color: #cecece;

cursor: default;

background-color: #f3f3f3;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));

background-image: -webkit-linear-gradient(#fff, #fff);

background-image: linear-gradient(#fff, #fff);

color: #a8a8a8;

cursor:not-allowed;

}

.pagination a:first-child {

border: none;

border-radius: 2px 0 0 2px; }

.pagination a:last-child {

border: none;

border-radius: 0 2px 2px 0; }

.pagination input {

float: left;

margin: 0;

padding: 0;

width: 125px;

height: 20px;

outline: none;

border: none;

vertical-align: middle;

text-align: center; }

/* gigantic class for demo purposes */

.gigantic.pagination {

margin: 30px 0; }

.gigantic.pagination a {

z-index:1000;

height: 35px;

width: 35px;

font-size: 31px;

line-height: 31px; }

.gigantic.pagination input {

width: 178px;

height: 35px;

font-size: 14px;

line-height: 30px;

border-left:1px solid #cecece;

border-right:1px solid #cecece;

}

/* log element for demo purposes */

.log {

display: none;

background-color: #EDEDED;

height: 300px;

width: 524px;

overflow: auto;

margin-left: 0;

list-style: none;

padding: 10px; }

.log li {

margin-top: 0;

margin-bottom: 5px; }

select.maoxian {

border:1px solid #cecece;

-webkit-appearance: none;

-moz-appearance: none;

-appearance: none;

background               : url(/images/basic/down.png) 85% / 15% no-repeat #fdfdfd;

border-radius: 3px;

cursor:pointer;

font-size:0.7em;

}

select.maoxian:hover {

border:1px solid #cecece;

-webkit-appearance: none;

-moz-appearance: none;

-appearance: none;

background               : url(/images/basic/down-hover.png) 85% / 15% no-repeat #fdfdfd;

border-radius: 3px;

cursor:pointer;

font-size:0.7em;

}

select.hetong {

border:1px solid #cecece;

-webkit-appearance: none;

-moz-appearance: none;

-appearance: none;

background               : url(/images/basic/down.png) 93% / 7% no-repeat #fdfdfd;

border-radius: 3px;

cursor:pointer;

font-size:0.7em;

}

select.hetong:hover {

border:1px solid #cecece;

-webkit-appearance: none;

-moz-appearance: none;

-appearance: none;

background               : url(/images/basic/down-hover.png) 93% / 7% no-repeat #fdfdfd;

border-radius: 3px;

cursor:pointer;

font-size:0.7em;

}

原文地址：https://www.cnblogs.com/dullbaby/p/9181362.html

时间： 2024-10-24 23:17:05

JS 自写datapage.js 通用分页的相关文章

写个js 分页玩玩（原创）

<ul id="page"> <li class="pagetest">1</li> <li class="pagetest">2</li> <li class="pagetest">3</li> <li class="pagetest">4</li> <li class="paget

JS 通用分页

1 //上一页 2 function nextPager(href, pageindex, pagecount) { 3 4 if (pageindex > pagecount) { 5 pageindex = pagecount; 6 } else { 7 pageindex = pageindex + 1; 8 } 9 pager(href, pageindex); 10 } 11 //下一页 12 function upPager(href, pageindex) { 13 14 if (

JS小插件之1——pager 分页

学习JS大半年之久,第一次自己尝试写一些小插件,写法参考网上某位牛人写代码的思路. 此处代码写的是静态分页.如果需动态分页,还可以修改下.第一次写,还有很多地方可以优化.希望各位大牛踊跃拍砖. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <t

jQuery表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

写个js小工具自动生成博文目录

我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了,最终效果如下: 下面来介绍一下这个小工具的实现. 一.

轮播图--JS手写

轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Test</title> <script src="~/Scripts/jq

写个js动态调整图片宽高 （原创）

<body style="TEXT-ALIGN: center;"> <div id="testID" style="background:red;MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:173;height:184"> <img src="http://e.hiphotos.baidu.com/image/pic/item/024f78f0f736afc3

自己写的JS排序算法

这学期刚刚学完数据结构,之前就自己写了一点东西,现在整理一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>JS实现排序</title> <meta name

js手写&#39;Promise&#39;

/* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(executor) {// 执行器 this.status = 'pending'; this.value = undefined; this.reason = undefined; this.fulfilledCallback = []; this.rejectCallback = []; let resolve = (value)=>{ if(this.