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

</div>

<div>

</select>

</div>

</div>

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));

.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));

cursor:pointer;

}

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

background-color: #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));

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;

}

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

js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
前端要革命？看我在js里写SQL
在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句为什么要在js里写SQL? ...
常见的JS手写函数汇总（代码注释、持续更新）
最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...
jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
asp.net尽量不在js里写<%%>
asp.net尽量不在js里写<%%> eg: <script type="text/javascript"> var rootsid="&quo ...
轮播图--JS手写
轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...
基于c#+xaml的前台采用IE的js引擎写后台
基于c#+xaml的前台采用IE的js引擎写后台的猜想参考上一篇文章基于js的开发wp8界面的猜想知道可以使用 js的window.external.notify调用c# c#可以用InvokeS ...
给JS包写TypeScript用的类型申明文件
TS (TypeScript)区别于JS (JavaScript)一个最大的不同是TS增加了类型.当一些TS代码要使用JS包的时候,最好这些JS包都有类型介绍,比如这个变量是什么类型,那个函数参数的什 ...
如何写一个Js上传图片插件。
项目里面需要一个上传图片的插件,找了半天没有找到满意的,算了不找了,自己写一个吧,顺便复习一下js方面的知识.完成之后效果还不错,当然还要继续优化,源码在最后. 介绍一种常见的js插件的写法 ; ( ...

随机推荐

strcpy c标准库函数
C语言标准库函数strcpy,把从src地址开始且含有NULL结束符的字符串复制到以dest开始的地址空间. 已知strcpy函数的原型是: char *strcpy(char *dst, const ...
asterisk 相关数据库配置使用
Linux/Unix下ODBC的安装: 先下载最新的unixODBC源码包(http://www.unixodbc.org/unixODBC-2.2.1.tar.gz)放到/usr/local下,然后 ...
Linux终端Shell下的常用快捷键收集
删除 [Ctrl]+[D]删除光标所在位置上的字符相当于VIM里x或者dl [Ctrl]+[H]删除光标所在位置前的字符相当于VIM里hx或者dh [Ctrl]+[K]删除光标后面所有字符相当于VIM ...
框架-弹出选择框（Jquery传递Json数组）
给一个button按钮,执行方法 Json传值$("body").on("click", "#btnsure", function() { ...
【APUE】信号量、互斥体和自旋锁
http://www.cnblogs.com/biyeymyhjob/archive/2012/07/21/2602015.html http://blog.chinaunix.net/uid-205 ...
day5-WordCount
1. wordcount示例开发 1.1. wordcount程序整体运行流程示意图 map阶段: 将每一行文本数据变成<单词,1>这样的kv数据 reduce阶段:将相同单词的一组k ...
Deepin-安装QQ音乐（Windows程序）
打开命令行,输入: sudo apt-get install wine 安装完成后,下载QQ音乐的安装包然后安装示例:wine xx.exe 实例:wine QQMusic.exe 安装完成,启动 ...
【java项目实战】一步步教你使用MyEclipse搭建java Web项目开发环境（一）
首先.在開始搭建MyEclipse的开发环境之前.还有三步工具的安装须要完毕,仅仅要在安装配置成功之后才干够进入以下的java Web项目开发环境的搭建. 1.安装工具第一步,下载并安装JDK,到官 ...
Hibernate之三态篇
一.概况 (一)瞬时状态(暂时态) 在对象中假设对象刚被创建但没有被持久化的话就是瞬时态特点: (1) 不和 Session 实例关联 (2)在数据库中没有和瞬时对象关联的记录 (二)持久状态持久 ...
Linux —— 压缩文件
Linux——压缩文件为什么需要压缩文件? 文件在传输过程中,可能由于文件过大,传输所需时间过多.减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传 ...

JS 自写datapage.js 通用分页

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

随机推荐

热门专题