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

随机推荐

Java实现敏感词过滤代码
原文:http://www.open-open.com/code/view/1445762764148 import java.io.BufferedReader; import java.io.Fi ...
Oracle 10g 升级至10.2.0.4
http://weihaoluo.blog.163.com/blog/static/224418832010112102355652/ 单实例环境 Vmware Server 1.0.6 +Cen ...
【stl学习笔记】deques
deque双向队列是一种双向开口的连续线性空间,可以高效的在头尾两端插入和删除元素,deque在接口上和vector非常相似.deque的实现比较复杂,内部会维护一个map(注意!不是STL中的map ...
【APUE】线程与信号
每个线程都有自己的信号屏蔽字,但是信号的处理是进程中所有线程共享的.进程中的信号是递送到单个线程的. 线程中pthread_sigmask函数类似与进程的sigprocmask函数,可以用来阻塞信号. ...
Office EXCEL 如何实现在单元格内换行
按A/T+回车可以实现手动换行
CSDN-markdown基本的语法说明
文件夹概述简介Markdown CSDN Markdown的功能支持标题 Setext形式 atx形式区块引用分隔线强调列表无序列表有序列表注意事项链接自己主动链接普通文本链 ...
[Hibernate Search] (3) 基础查询
基础查询眼下我们仅仅用到了基于keyword的查询,实际上Hibenrate Search DSL还提供了其他的查询方式,以下我们就来一探到底. 映射API和查询API 对于映射API.我们能够通过 ...
数据结构-二叉树的遍历（类C语言描写叙述）
遍历概念所谓遍历(Traversal)是指沿着某条搜索路线.依次对树中每一个结点均做一次且仅做一次訪问.訪问结点所做的操作依赖于详细的应用问题. 遍历是二叉树上最重要的运算之中的一个,是二叉 ...
[转] 买彩票的利器--gun
源链接还在自己买彩票吗,有个现成的:GNU shuf命令. shuf -i - -n | 这样就会产生两组彩票(1~36个数字任选) 当然还可以派其他用途,比如: shuf -e clubs hea ...
UIButton的图片和文字相对位置调整
通常.假设直接设置UIButton的图片和文字,默认的两者相对位置可能不是我们想要的,那么须要进行调整. 须要用到的函数例如以下: UIEdgeInsetsMake(CGFloat top, CGFl ...

JS 自写datapage.js 通用分页

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

随机推荐

热门专题