<!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. Cellular Automata编写历程

    2016.10.14:完成大致框架编写,控制台下实现 取点方式:南北半球对称取点;同一半球同一经度相邻点之间弧长相等;同一纬度相邻点之间弧长相等;不同纬度的圆周长度不等 地图设定为球形 2016.10 ...

  2. Unity 状态转化机器

    using System; using System.Collections; using System.Collections.Generic; using UnityEngine; /** 有限状 ...

  3. echarts.js 做图表的插件

    <scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...

  4. CentOS6.4 增加一个SFTP上传的用户

    #创建sftp组 groupadd sftp #创建一个用户dsideal useradd -g sftp -s /bin/false dsideal #设置dsideal用户的密码 passwd d ...

  5. Codeforces Round #235 (Div. 2) B. Sereja and Contests

    #include <iostream> #include <vector> #include <algorithm> using namespace std; in ...

  6. 简单图解设置MYSQL可以通过其他机器远程访问,开启远程访问权限

    开始,运行---cmd,然后cd到mysql.exe目录,然后照着下图红色框中输入 注意: 1.MySQL 5.7查询时候应该输入select host,user,authentication_str ...

  7. Java中UIManager的几种外观的详细讲解

    Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...

  8. 纪念逝去的岁月——C/C++排序二叉树

    1.代码 2.运行结果 3.分析 1.代码 #include <stdio.h> #include <stdlib.h> typedef struct _Node { int ...

  9. Nginx做NodeJS应用负载均衡配置实例

    这篇文章主要介绍了Nginx做NodeJS应用负载均衡配置实例,本文直接给出配置实例,需要的朋友可以参考下. 负载均衡可以把用户的请求分摊到多个服务器上进行处理,从而实现了对海量用户的访问支持.负载均 ...

  10. javax.servlet.jsp cannot be resolved to a type

    参考链接 :http://www.tuicool.com/articles/7Njmqy