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插件的写法 ; ( ...

随机推荐

Distinct Subsequences (dp)
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
学习日常笔记<day15>mysql基础
1.数据库入门 1.1数据库软件数据库:俗称数据的仓库,方便管理数据的软件(或程序) 1.2市面上数据库软件 Oracle,甲骨文公司的产品. 当前最流行应用最广泛的数据库软件.和java语言兼容非 ...
关键字检索高亮标出-javasript/jQuery代码实现
原文:http://www.open-open.com/code/view/1454504432089 此方法传入2个参数,一个是被检索内容所在的表单或者HTML元素的ID,另一为关键字,多个关键字的 ...
OSChinaclient源代码学习（3）--轮询机制的实现
主要以OSChina Androidclient源代码中Notice的轮询机制进行解读. 一.基础知识一般IM(即使通讯)的实现有两种方式:推送和轮询,推送就是server主动向client发送消息 ...
全文搜索引擎 Elasticsearch 安装
全文搜索引擎 Elasticsearch 安装学习了:http://www.ruanyifeng.com/blog/2017/08/elasticsearch.html 拼音:https://www ...
CentOS7 设置系统时间
在CentOS 6版本,时间设置有date.hwclock命令, 硬件时钟和系统时钟 (1) 硬件时钟 RTC(Real-Time Clock)或CMOS时钟,一般在主板上靠电池供电,服务器断电后也会 ...
MySQL5.6 怎样优化慢查询的SQL语句 -- 慢日志介绍
近期有个开发团队抱怨我们平台包括的mysql cluster不行,总是报mysql的"heartbeat Error".分析了他们收集的日志.没有发现mysql cluster节点 ...
Node 即学即用笔记思维导图
Node即学即用 REPL(Read-Evaluate-Print-Loop) console.log .clear .help .exit require('http') ...
Axure使用笔记
软件设置类两个矩形的双边框,边框重合: 项目---项目设置---边界对齐---内边界对齐. 自动备份时间设置文件-自动备份设置-默认15分钟,根据电脑硬件可以调整. Axure 8 可以不用安装 ...
BestCoder #49 Untitled HDU 5339
BestCoder #49 Untitled HDU 5339 题目: http://acm.hdu.edu.cn/showproblem.php? pid=5339 本题採用深搜, 数据量小,先做 ...

JS 自写datapage.js 通用分页

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

随机推荐

热门专题