<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}html{font-size: 12px;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}table{border-collapse:collapse;border-spacing:0;}q:before,q:after{content:'';}object,embed{vertical-align:top;}hr,legend{display:none;}img,abbr,acronym,fieldset{border:0;}ul li{list-style-type:none;}a,label{cursor:pointer;}img{vertical-align:bottom;margin:0;padding:0;}a{text-decoration:none;outline: none;}.clearfix:after{content: "."; visibility: hidden; display: block; height: 0.1px; font-size:0.1em; line-height: 0; clear: both;}.clearfix {*zoom:1;}input ,textarea,select{outline: none;border:1px solid #bfbfbf;}th{font-weight: 400;}
button{cursor: pointer;border:none;outline: none;}textarea{border: 1px solid #ccc;resize: none;outline: none;overflow: hidden;padding: 5px;}select{outline: none;}.text_overflow{overflow:hidden;white-space: nowrap;
text-overflow: ellipsis;}
html {
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
font-size:14px;
color: #5c5d5e;
}
/* 公共分页模块 */
.index-page {
float:right;
padding-top:10px;
}
.index-page .index-target {
width:25px;
height:14px;
line-height: 14px;
padding:3px 5px;
border-radius:2px;
vertical-align: middle;
}
.index-page .target {
margin-right:30px;
color:#808080;
}
.index-page .page-main {
float:right;
margin-top:-10px;
}
.index-page .page-main li {
display: none;
float:left;
width:37px;
height:37px;
border:1px solid #e6e6e6;
text-align:center;
line-height:37px;
margin-right: 5px;
}
.index-page .page-main .block {
display: block;
}
.index-page .page-main a {
display:block;
height:100%;
color:#c0c0c0;
}
.index-page .page-main a:hover ,
.index-page .page-main .active {
background-color:#f75000;
color:#fff;
}
.index-page .page-main .unable-page {
cursor: not-allowed;
background-color: #dedede;
}
.index-page .page-main .unable-page:hover {
background-color: #dedede;
}
.index-page .page-main .prev ,
.index-page .page-main .next {
display: block;
height: 9px;
padding: 13px 14px 15px 15px;
}
.index-page .page-main .prev-i ,
.index-page .page-main .next-i {
display:block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 8px solid #c0c0c0;
border-bottom: 6px solid transparent;
}
.index-page .page-main .next-i {
border-top: 6px solid transparent;
border-right: none;
border-left: 8px solid #c0c0c0;
border-bottom: 6px solid transparent;
}
</style>
</head>
<body>
<div class="index-page" id="pageBox"></div>
<script type="text/javascript" src="http://static.nysochina.com/static/js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.pageing = function(options ,fn){
// 注入的html结构
var html = '总<span class="allNum"></span>条数据 <span class="now-page"></span>/<span class="allPage"></span>页 至 <input type="text" class="index-target" /> 页 <a href="###" class="target" class="goPage">跳转</a><ul class="page-main" id="pageMain"><li class="block"><a href="###" class="prev unable-page"><i class="prev-i"></i></a></li><li class="block last"><a href="###" class="next"><i class="next-i"></i></a></li></ul>';

// 初始化
$(this).html('').append(html);
var oThis = $(this).find('ul'),//容器
nowPage = $('#pageBox .now-page') || options.nowPage,//目前多少页元素(显示)
indexTarget = $('#pageBox .index-target') || options.indexTarget,//目前多少页元素（输入框）
target =$('#pageBox .target') || options.target,//跳转元素
prev = options.prev || $('#pageBox .prev'),//上一页元素
next = options.next || $('#pageBox .next'),//下一页元素
last = next.parent(),
allNum = options.allNum,//总数据条数
pageNum = options.pageNum,//总页数
index = options.index || 1;
eachPage = options.eachPage || 10,//每页显示多少条记录
max = options.max || 5,//最多显示多少页数
min = 0,
page = null,
fn = fn || function() {};
nowPage.text(index);
$('#pageBox .allNum').text(allNum);
$('#pageBox .allPage').text(pageNum);
if( pageNum === 1 ) {
next.addClass('unable-page');
}
$('#pageBox .page').remove();
for(var i = 1;i<= pageNum ; i++) {
var $li = $('<li class="page"></li>');
var $a = $("<a href='###'></a>");
if( i === index ) {
$a.addClass('active');
}
$a.text( i );
$li.append($a);
last.before($li);
}
page = $('.page');
page.hide();
show(index);
showPageindex(0,max, index-1);
// 点击事件
oThis.find('a').on('click' , function() {
oThis.find('li').each(function() {
if( $(this).children('a').hasClass('active') ) {
index = $(this).index();
}
});
if( $(this).hasClass('unable-page') ) {
return;
} else if($(this).hasClass('prev') ) {
index --;
} else if( $(this).hasClass('next') ) {
index ++;
} else {
index = $(this).parent().index();
}
show(index);
showPageindex(min , max, index-1);
fn(index);
});

// 点击跳转按钮
target.click(function() {
index = indexTarget.val();
if( index !== '' ) {
index = parseInt(indexTarget.val()) ;
if( index < 1 ) {
alert('输入页数不能小于1！');
return false;
} else if (index > pageNum) {
alert('输入页数不能大于总页数！');
return false;
} else {
showPageindex(min , max, index-1);
show(index);
fn(index);
}
} else {
alert('请输入页数');
}
});

// 限制只能输入数字
indexTarget.keyup(function() {
var value = $(this).val();
$(this).val(value.replace(/\D/g,""));
}).keydown(function() {
var value = $(this).val();
$(this).val(value.replace(/\D/g,""));
});

// 样式控制
function show(index){
oThis.find('a').removeClass('unable-page');
if(index === 1) {
prev.addClass('unable-page');
}
if(index === pageNum ) {
next.addClass('unable-page');
}
oThis.find('a').removeClass('active');
page.eq(index-1).children('a').addClass('active');
nowPage.text(index);
}
//控制哪些页码显示
function showPageindex(min , max , index){
if( index <= max/2) {
min = 0;
max = max;
} else if(pageNum - index <= Math.ceil(max/2) ){
min = pageNum - max;
max = pageNum;
} else {
min = Math.round(index - max/2);
max = Math.round(index + max/2);
}
page.hide();
for(var i = min; i< max ; i++) {
page.eq(i).show();
}
}
};
})(jQuery);

var options = {
index :1,//当前页
allNum: 1,//总共多少数据
eachPage : 3,//每页显示数据条数
pageNum : 10,//一共多少页数据
max : 5//最多显示多少页
};
$('#pageBox').pageing(options);
</script>
</body>
</html>

JS，分页的更多相关文章

  1. js分页小结

     今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

  2. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  3. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  4. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  5. 面向对象版js分页

    基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...

  6. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  7. JS分页 + 获取MVC地址栏URL路径的最后参数

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  8. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  9. JS分页条插件

    目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...

  10. js分页实例

    js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

随机推荐

  1. Storm实战：在云上搭建大规模实时数据流处理系统（Storm+Kafka）

    在大数据时代,数据规模变得越来越大.由于数据的增长速度和非结构化的特性,常用的软硬件工具已无法在用户可容忍的时间内对数据进行采集.管理和处理.本文主要介绍如何在阿里云上使用Kafka和Storm搭建大 ...

  2. Hadoop Streaming框架使用（一）

      Streaming简介 link:http://www.cnblogs.com/luchen927/archive/2012/01/16/2323448.html Streaming框架允许任何程 ...

  3. 两种不同png图片的在项目中的运用

    png图片主要分为两种 png-8和png-24. PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值.”8″代表2的8次方也就是256色,而24则代表2的24次方大概有1 ...

  4. 如何让代码实现C++

    其实本来就知道 但是主要突然忘了去怎样实现C++代码  ,所以写个笔记记忆一下 让代码实现C++ 只需要修改.m文件为 .mm  就可以了  突然是不是很像打脸. 不过希望能给不知道的小伙伴一点帮助哦 ...

  5. Flex在Win10，Chrome浏览器上汉字乱码的问题

    今天遇到一个超级郁闷的问题,之前好好的程序.但是因为客户升级了客户端操作系统.由Win7升级到Win10,就出现乱码了. 找了好多原因和办法都没解决. (1)IE浏览器正常 (2)Win7,Windo ...

  6. 模拟淘宝使用cookie记录登录名，

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. Android多次点击事件的监听和处理

    package com.example.administrator.mystudent.MoreClick; import android.os.SystemClock; import android ...

  8. thinkphp上传至服务器后模板无法解析原因

    前几日做好的响应式静态页面上传至虚拟空间,打开网址地址出现: 模板不存在:./app/Home/View/Index/index.html 错误位置 FILE: /home/u333385714/pu ...

  9. js的关联数组

    我自己感觉js是不支持关联数组的,只有索引数组.想要实现js关联数组的效果,就使用js的对象,使用键值对.如果对数组动态处理用push函数,取值用pop函数.此外,对数组操作有几个比较好的函数,joi ...

  10. PHP后门新玩法：一款猥琐的PHP后门分析

    0x00 背景 近日,360网站卫士安全团队近期捕获一个基于PHP实现的webshell样本,其巧妙的代码动态生成方式,猥琐的自身页面伪装手法,让我们在分析这个样本的过程中感受到相当多的乐趣.接下来就 ...