jQuery

  var Pager = function (ops) {
this._ops = {
count: ops.count || 0,
selectedIndex: ops.selectedIndex || 1,
size: ops.size || 0
};
this._element = ops.element || document.getElementsByTagName('body');
this._init()
._create()
._initMember()
._createPagerBtn()
._initEventBind()
this._inputValue = 1;
}; Pager.prototype = {
_initId: function () {
uuid++;
this._pagerId = "ui-pager-" + uuid;
},
_init: function () {
this._element.id = this._pagerId;
$(this._element).addClass('ui-pager-container')
return this;
}, _create: function () {
var fragement = [], h = -1;
fragement[++h] = "<div class=\"ui-pager-trangleBtn\">";
fragement[++h] = "<button class=\"ui-pager-triangle-left-as\"></button>";
fragement[++h] = "</div>"; fragement[++h] = "<div class=\"pager-content\">";
fragement[++h] = "</div>"; fragement[++h] = "<div class=\"ui-pager-trangleBtn\">";
fragement[++h] = "<button class=\"ui-pager-triangle-right-as\"></button>";
fragement[++h] = "</div>"; fragement[++h] = "<div class=\"ui-pager-go\">";
fragement[++h] = "<input type=\"text\" class=\"ui-pager-go-input\" value=\"1\" />";
fragement[++h] = "<button class=\"ui-pager-go-btn\">GO</button>";
fragement[++h] = "</div>";
$(this._element).append(fragement.join(''));
return this;
}, _createPagerBtn: function () {
this.$pagerElBtnGroup.empty();
var
fragement = [], h = -1;
if (this._ops.count <= 5) {
for (var i = 0; i < this._ops.count; i++) {
if (i + 1 == this._ops.selectedIndex)
fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + ">";
else
fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">";
fragement[++h] = i + 1;
fragement[++h] = "</button>";
}
this.$pagerElBtnGroup.append(fragement.join(''));
} else {
for (var i = 0; i < this._ops.count; i++) {
if (this._ops.selectedIndex <= 4 || this._ops.selectedIndex == this._ops.count) {
if (i + 1 <= 4) {
if (i + 1 == this._ops.selectedIndex)
fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
else
fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
} else if (i + 1 == this._ops.count) {
var m = h + 1;
if (i + 1 == this._ops.selectedIndex)
fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
else
fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
} else {
fragement[h + 1] = "<button class=\"button-bald\" disabled>...</button>";
}
} else if (this._ops.selectedIndex == 1 || this._ops.selectedIndex >= this._ops.count - 3) {
if (i + 1 == 1) {
if (i + 1 == this._ops.selectedIndex)
fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
else
fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
} else if (i + 1 >= this._ops.count - 3) {
var m = h + 1;
if (i + 1 == this._ops.selectedIndex)
fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
else
fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + ">" + (i + 1) + "</button>";
h = m;
} else {
fragement[h + 1] = "<button class=\"button-bald\" disabled>...</button>";
}
} else if (this._ops.selectedIndex > 4 && this._ops.selectedIndex < this._ops.count - 3) {
if (i + 1 == 1) {
if (i + 1 == this._ops.selectedIndex)
fragement[++h] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
else
fragement[++h] = "<button class=\"pager-content-btn\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
} else if (i + 1 == this._ops.selectedIndex - 1 || i + 1 == this._ops.selectedIndex || i + 1 == this._ops.selectedIndex + 1) {
var m = h + 1;
if (i + 1 == this._ops.selectedIndex)
fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
else
fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
h = m;
} else if (i + 1 == this._ops.count) {
var m = h + 1;
if (i + 1 == this._ops.selectedIndex)
fragement[++m] = "<button class=\"pager-content-btn active\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
else
fragement[++m] = "<button class=\"pager-content-btn\" value=" + (i + 1) + "> " + (i + 1) + "</button>";
h = m;
} else {
fragement[h + 1] = "<button class=\"button-bald\" disabled>...</button>";
}
}
}
this.$pagerElBtnGroup.append(fragement.join(''));
}
return this;
}, _initMember: function () {
this.$leftBtn = $("#" + this._pagerId + " .ui-pager-triangle-left-as");
this.$rightBtn = $("#" + this._pagerId + " .ui-pager-triangle-right-as");
this.$goBtn = $("#" + this._pagerId + " .ui-pager-go-btn");
this.$pagerElBtnGroup = $("#" + this._pagerId + " .pager-content");
this.$input = $("#" + this._pagerId + " .ui-pager-go-input");
return this;
}, _initEventBind() {
this.$leftBtn.on('click', this._leftBtnClick.bind(this));
this.$rightBtn.on('click', this._rightBtnClick.bind(this));
this.$goBtn.on('click', this._goBtnClick.bind(this));
this.$pagerElBtnGroup.on('click', this._pageBtnClick.bind(this));
}, _leftBtnClick: function () {
if (this._ops.selectedIndex != 1)
this._ops.selectedIndex -= 1;
else
return;
this._setSelectIndex(this._ops.selectedIndex);
}, _rightBtnClick: function () {
if (this._ops.selectedIndex != this._ops.count)
this._ops.selectedIndex += 1;
else
return;
this._setSelectIndex(this._ops.selectedIndex);
}, _pageBtnClick: function (e) {
var
selectedIndex = parseInt(e.target.value);
this._setSelectIndex(selectedIndex);
}, _goBtnClick: function () {
var value = this.$input.val();
if (value == '') throw new Error('Value i error.');
var targetIndex = parseInt(value);
this._setSelectIndex(targetIndex);
}, _setSelectIndex: function (index) {
var selectedIndex = index || 1;
var $element = $(this._element);
$$.trigger("selectedPageChanged", $element, $$.Event({
element: $element,
oldValue: null,
newValue: selectedIndex
}));
this._ops.selectedIndex = selectedIndex;
this._createPagerBtn();
},

React

import ReactWidget from '../react-widget';

class Pager extends ReactWidget {
constructor(props) {
super(props);
} componentWillReceiveProps(newProps) {
//this.element.setOptions({
// items: newProps.items,
// selectedIndex: newProps.selectedIndex
//});
} componentDidMount() {
this.element = new aui.Pager({
element: ReactDOM.findDOMNode(this),
size: this.props.pageSize,
count: this.props.pageCount,
selectedIndex: this.props.selectedPage
});
$(ReactDOM.findDOMNode(this)).on('selectedPageChanged', this.props.selectedPageChanged.bind(this));
} render() {
return <div>
</div>
}
} window.$$.Pager = Pager;

less

.ui-pager-container {
.ui-pager-trangleBtn {
display: inline-block;
margin: 0 10px; & > button {
padding: 5px;
border-radius: 10px;
} .ui-pager-triangle-left-as {
&::before {
content: '\25C4'
}
} .ui-pager-triangle-right-as {
&::before {
content: '\25BA'
}
}
} .pager-content {
display: inline-block; & > button {
padding: 5px 8px;
margin: 0 5px;
} .button-bald {
border: 0;
background: 0 0;
} .active {
background: #9D9D9D;
color: #fff;
}
} .ui-pager-go {
display: inline-block; .ui-pager-go-input {
display: inline-block;
width: 20px;
padding: 5px;
} .ui-pager-go-btn {
margin: 0 10px;
padding: 5px;
}
}
}

样式:

Pager的更多相关文章

  1. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

  2. 自己写的一个Pager分页组件,WebForm,Mvc都适用

    我一说写这个功能的时候,好多人估计有疑问.分页功能网上多的是,搜一个不就行了,你这样不是浪费时间么.你说这句话的时候,我是比较信的,首先自己写一些东西是很耗时,有这些时间又能多打几盘LOL了.但是我觉 ...

  3. 用jquery.pager.js实现分页

    1.html <link href="/stylesheets/Pager.css" rel="stylesheet" type="text/c ...

  4. asp.net mvc 自定义pager封装与优化

    asp.net mvc 自定义pager封装与优化 Intro 之前做了一个通用的分页组件,但是有些不足,从翻页事件和分页样式都融合在后台代码中,到翻页事件可以自定义,再到翻页和样式都和代码分离, 自 ...

  5. asp.net mvc 简易通用自定义Pager实现分页

    asp.net mvc 自定义Pager实现分页 Intro 一个WEB应用程序中经常会用到数据分页,本文将实现一个简单通用的分页组件,包含一个 PagerModel (用来保存页码信息),一个 Ht ...

  6. SQLite学习笔记(九)&&pager模块

    概述 通过上一篇文章的分析,我们知道了pager模块在整个sqlite中所处的位置.它是sqlite的核心模块,充当了多种重要角色.作为一个事务管理器,它通过并发控制和故障恢复实现事务的ACID特性, ...

  7. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. PHP通用分页(Pager)类

    三种不同展示方式 附上style~ 1. 效果图1 2.效果图2    3. 效果图3 4. 分页类主体 <?php /** * PHP通用分页类 * show(2) 1 ... 62 63 6 ...

  10. Last time, I wrote a pager, but now it seems this no longer has use, so I want to paste it here.

    public class Pager<T> where T : new() { private IEnumerable<T> _all; private IEnumerable ...

随机推荐

  1. LCA统计

    读入挂 inline void read(int &v) { v = ; ; ; ') { if (c == '-') { p = -; } c = getchar(); } ') { v = ...

  2. hdu 6205 card card card 最大子段和

    #include<iostream> #include<deque> #include<memory.h> #include<stdio.h> #inc ...

  3. [易学易懂系列|rustlang语言|零基础|快速入门|系列文章]

    简单易懂的rustlang入门教程. [易学易懂系列|rustlang语言|零基础|快速入门|(1)|开篇] [易学易懂系列|rustlang语言|零基础|快速入门|(2)|VCCode配置] [易学 ...

  4. 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结

    前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...

  5. 【NOIP2016提高A组集训第3场10.31】高维宇宙

    题解 分析 因为只有奇数和偶数配对才有可能得出质数, 暴力求出每一对\(a_i+a_j\)为质数,将其中的奇数想偶数连一条边. 二分图匹配,匈牙利算法. #include <cmath> ...

  6. 图片转base64使用JSON传输

    要传输的JSON格式: { "orderId":"0001", "cargoReceiptNo":"iVBORw0KGgoAAAA ...

  7. PHP 字符串相关常识

    0x00 前言 第一次遇见字符串这个概念是在学 C 语言的时候,那时候觉得字符串也没有什么难的,不就是一个以 \0 结尾的 char 数组而已咯.后来在学习 PHP 的过程中也同样保持这个观念,不过在 ...

  8. 计算器work_day05

    day_work_05 ------Python是一个优雅的大姐姐 作业计算器 设计思路 按照运算优先级和正则先算括号内的值,提出来判断符号问题,然后依次计算. 分析题目设计了四个函数,分别为a)去括 ...

  9. POJ 1573 Robot Motion(模拟)

    题目代号:POJ 1573 题目链接:http://poj.org/problem?id=1573 Language: Default Robot Motion Time Limit: 1000MS ...

  10. db2表结构导出导入,数据库备份

    1.新增用户组.用户和查看所有用户: 新增系统用户组: #groupadd jldb //增加用户组jldb 需使用root权限 useradd jldb -g jldb //将新增用户赋值到jldb ...