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

随机推荐

http_load分析（转）
http://www.cnblogs.com/xuning/p/3954057.html 一.前言 http_load是一款测试web服务器性能的开源工具,从下面的网址可以下载到最新版本的http_l ...
Junit中Assert.assertEquals()和Assert.assertSame方法有什么异同
1)提供的接口数量不完全相同.assertEquals支持boolean,long,int等等java primitiveType变量.assertSame只支持Object. 2)比较的逻辑不同,结 ...
java实验（三）——课堂小测
这次的课堂小测是用以前生成的那些四则运算的代码,然后将这些题目写到一个文件中,再通过这个文件读取题目的信息,每读入一个答案的时候,遇到星号的时候,等待用户输入然后判断输入的答案是否正确,然后输出小一道 ...
springboot整合mybatis,freemarker
springboot 整合mybaits,,freemarker pom.xml文件 <?xml version="1.0" encoding="UTF-8&quo ...
使用Python实现一个简单的项目监控
在公司里做的一个接口系统,主要是对接第三方的系统接口,所以,这个系统里会和很多其他公司的项目交互.随之而来一个很蛋疼的问题,这么多公司的接口,不同公司接口的稳定性差别很大,访问量大的时候,有的不怎么行 ...
django 简易博客开发 1 安装、创建、配置、admin使用
首先贴一下项目地址吧 https://github.com/goodspeedcheng/sblog 到现在位置项目实现的功能有: 1.后台管理使用Admin ,前端显示使用bootstrap 2. ...
FTRL (Follow-the-regularized-Leader)算法
Online gradient descent(OGD) produces excellent prediction accuracy with a minimum of computing reso ...
[PythonCode]扫描局域网的alive ip地址
内网的主机都是自己主动分配ip地址,有时候须要查看下有那些ip在使用,就写了个简单的脚本. linux和windows下都能够用,用多线程来ping1-255全部的地址,效率不高.2分钟左右. 先凑合 ...
Guava ---- Concurrent并发
Guava在JDK1.5的基础上, 对并发包进行扩展. 有一些是易用性的扩展(如Monitor). 有一些是功能的完好(如ListenableFuture). 再加上一些函数式编程的特性, 使并发包的 ...
【Mongodb教程第一课补加课1 】windows7 下安装mongodb 开启关闭服务
mongodb在2.2版本开始就不支持windows xp了(我想现在用xp的应该也是带着情怀的一部分人吧,我只是一个工匠而已),windows下server8 R2,64位,32位,只是32位只支持 ...

JS 自写datapage.js 通用分页

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

随机推荐

热门专题