js简单的分页器插件代码实例

来源:脚本之家  责任编辑:小易  

如果是从DB查询数据的话你可以在Servlet中控制分页没有什么简单不简单的

这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

JS版本的信息分页就是所谓的DIV隐藏及显示的切换哦 把所有的信息分解到各个

自己引入jquery插件,我的demo是引入的自己本地的query

这是按标签[NextPage]来分页的,要在哪里分页就在哪里插入[NextPage]这个标签 <

代码如下

给你做个参考:****************************注意:请将里面中文

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; font-family: "微软雅黑"; } li { list-style: none; } div.main-wrap { width: 1200px; height: 800px; position: relative; margin: 0 auto; } div.main-wrap div.paging-content { width: 100%; } div.main-wrap div.paging-content ul.pageItem { width: 100%; overflow: hidden; display: none; } div.main-wrap div.paging-content ul.pageItem.active { display: block; } div.main-wrap div.paging-content ul.pageItem li { width: 200px; height: 300px; margin: 10px; float: left; background: yellowgreen; border-radius: 8px; cursor: pointer; font-size: 50px; color: #fff; text-align: center; line-height: 300px; } div.main-wrap div.paging { position: absolute; bottom: 50px; left: 50%; margin-left: -200px; height: 28px; width: 400px; } div.main-wrap div.paging > span { display: block; width: 26px; height: 26px; border: 1px solid #999; cursor: pointer; float: left; } div.main-wrap div.paging span.prev { margin-right: 4px; background: url(../img/prevbtn.png) center no-repeat; } div.main-wrap div.paging span.next { margin-left: 4px; background: url(../img/nextbtn.png) center no-repeat; } div.main-wrap div.paging div.page-btn { width: 180px; height: 28px; overflow: hidden; float: left; position: relative; } div.main-wrap div.paging div.page-btn ul { width: 1000px; height: 28px; position: absolute; left: 0; top: 0; } div.main-wrap div.paging div.page-btn ul li { float: left; height: 26px; line-height: 28px; padding: 0 6px; font-size: 20px; color: #666; cursor: pointer; } div.main-wrap div.paging div.page-btn ul li.active { border-bottom: 2px solid #9ACD32; } </style> </head> <body> <div class="main-wrap"> <div class="paging-content"> <ul class="pageItem paging1 active"> <li>1</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="pageItem paging2"> <li>2</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="pageItem paging3"> <li>3</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="pageItem paging4"> <li>4</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="pageItem paging5"> <li>5</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="pageItem paging6"> <li>6</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="pageItem paging7"> <li>7</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="pageItem paging8"> <li>8</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="paging"> <span class="prev"></span> <div class="page-btn"> <ul class="btn-list"> <li class="active">2016</li> <li>2015</li> <li>2014</li> <li>2013</li> <li>2012</li> <li>2011</li> <li>2010</li> <li>2009</li> </ul> </div> <span class="next"></span> </div> </div> </body> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript"> $(function(){ createPage(".main-wrap",".pageItem",".prev",".next","div.page-btn",".btn-list","li",4).init(); /* wrap:最外层的dom pageItem:每页内容的wrap prev:上一页的按钮 next:下一页的按钮 btnWrap:分页器的页数的外层dom,注意:这个dom不包含prev和next btnBox:每个分页点的dom外层 btn:分页点的dom showBtn:展示个数,默认为3个 * */ function createPage(wrap,pageItem,prev,next,btnWrap,btnBox,btn,showBtn){ var fn = {}; var $wrap =$(wrap), $pageItem = $wrap.find(pageItem), $prev = $wrap.find(prev), $next = $wrap.find(next), $btnWrap = $wrap.find(btnBox), $btnList = $btnWrap.find(btn), currActive = 0, prevActive = 0, maxLen = $pageItem.length, showBtn = showBtn || 3, btnWidth = $btnList.outerWidth(), currLeft = 0; fn.init = function(){ fn.Layer(); fn.prev(); fn.next(); fn.btn(); }; fn.Layer = function(){ $wrap.find(btnWrap).css("width",showBtn*btnWidth); }; fn.prev = function(){ $prev.on("click",function(){ currActive--; if(currActive < 0){ currActive = maxLen-1; } fn.changed(currActive); }); }; fn.next = function(){ $next.on("click",function(){ currActive++; if(currActive >= maxLen){ currActive = 0; } fn.changed(currActive); }); }; fn.changed = function(index){ if(prevActive > index){ fn.slideBtn(index-1); }else{ fn.slideBtn(index); } $btnList.eq(index).addClass("active").siblings().removeClass("active"); $pageItem.eq(index).addClass("active").siblings().removeClass("active"); prevActive = index; }; fn.btn = function(){ $btnWrap.on("click","li",function(){ currActive = $(this).index(); fn.changed(currActive); }); }; fn.slideBtn = function(index){ currLeft = index; if(index < showBtn-1 ){ currLeft = 0; } if(maxLen-index < showBtn ){ currLeft = maxLen - showBtn; } $btnWrap.stop(true,true).animate({"left":currLeft*btnWidth*(-1)},500); }; return fn; } }); </script> </html>

<script language="javascript">var

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

求JS分页实例或者servlet分页实例,最好有例子能直接运行看看效果

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>分页JS代码</title>

<style type="text/css">

.page{margin:2em;}

.page a{text-decoration:none;display:inline-block;line-height:14px;padding:2px 5px;color:#333;border:1px solid #ccc;margin:0 2px;}

.page a:hover,.page a.on{background:#999;color:#fff;border:1px solid #333;}

.page a.unclick,.page a.unclick:hover{background:none;border:1px solid #eee;color:#999;cursor:default;}

</style>

</head>

<body>

<div class="page"></div>

<div class="page"></div>

</body>

<script type="text/javascript">

//container 容器,count 总页数 pageindex 当前页数

function setPage(container, count, pageindex) {

var container = container;

var count = count;

var pageindex = pageindex;

var a = [];

//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....

if (pageindex == 1) {

a[a.length] = "<a href=\"#\" class=\"prev unclick\">prev</a>";

} else {

a[a.length] = "<a href=\"#\" class=\"prev\">prev</a>";

}

function setPageList() {

if (pageindex == i) {

a[a.length] = "<a href=\"#\" class=\"on\">" + i + "</a>";

} else {

a[a.length] = "<a href=\"#\">" + i + "</a>";

}

}

//总页数小于10

if (count <= 10) {

for (var i = 1; i <= count; i++) {

setPageList();

}

}

//总页数大于10页

else {

if (pageindex <= 4) {

for (var i = 1; i <= 5; i++) {

setPageList();

}

a[a.length] = "...<a href=\"#\">" + count + "</a>";

} else if (pageindex >= count - 3) {

a[a.length] = "<a href=\"#\">1</a>...";

for (var i = count - 4; i <= count; i++) {

setPageList();

}

}

else { //当前页在中间部分

a[a.length] = "<a href=\"#\">1</a>...";

for (var i = pageindex - 2; i <= pageindex + 2; i++) {

setPageList();

}

a[a.length] = "...<a href=\"#\">" + count + "</a>";

}

}

if (pageindex == count) {

a[a.length] = "<a href=\"#\" class=\"next unclick\">next</a>";

} else {

a[a.length] = "<a href=\"#\" class=\"next\">next</a>";

}

container.innerHTML = a.join("");

//事件点击

var pageClick = function() {

var oAlink = container.getElementsByTagName("a");

var inx = pageindex; //初始的页码

oAlink[0].onclick = function() { //点击上一页

if (inx == 1) {

return false;

}

inx--;

setPage(container, count, inx);

return false;

}

for (var i = 1; i < oAlink.length - 1; i++) { //点击页码

oAlink[i].onclick = function() {

inx = parseInt(this.innerHTML);

setPage(container, count, inx);

return false;

}

}

oAlink[oAlink.length - 1].onclick = function() { //点击下一页

if (inx == count) {

return false;

}

inx++;

setPage(container, count, inx);

return false;

}

} ()

}

setPage(document.getElementsByTagName("div")[0],10,1);

setPage(document.getElementsByTagName("div")[1],13,5);

</script>

</html>

怎么用js来实现页面的分页,有案列代码吗?请给个代码看看,谢谢

分屏加载吧 滑到哪加载哪

从网页头引入两个js文件,注意必须先放jquery的

[javascript] view plaincopy

<script src="css/infinite-scroll/jquery-1.6.4.js"></script>

<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>

2.之后在网页头自己写一个js脚本

[javascript] view plaincopy

<script>

$(document).ready(function (){

$("#container").infinitescroll({

navSelector: "#navigation", //页面分页元素--本页的导航,意思就是一个可以触发ajax函数的模块

nextSelector: "#navigation a", //下一页的导航

itemSelector: ".scroll " , //此处我用了类选择器,选择的是你要加载的那一个块(每次载入的数据放的地方)

animate: true, //加载时候时候需要动画,默认是false

maxPage: 3, //最大的页数,也就是滚动多少次停。这个页码必须得要你从数据库里面拿

});

});

</script>

3.或许你看到这里还是不太清楚网页怎么定义,这里给出我的demo,希望可以有帮助

[html] view plaincopy

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

pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>无限翻页效果</title>

<script src="css/infinite-scroll/jquery-1.6.4.js"></script>

<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>

<script src="css/infinite-scroll/test/debug.js"></script>

<script>

$(document).ready(function (){ //别忘了加这句,除非你没学Jquery

$("#container").infinitescroll({

navSelector: "#navigation", //页面分页元素--成功后自动隐藏

nextSelector: "#navigation a",

itemSelector: ".scroll " ,

animate: true,

maxPage: 3,

});

});

</script>

</head>

<body>

<div id="container"> <!-- 容器 -->

<div class="scroll"> <!-- 每次要加载数据的数据块-->

第一页内容第一页内容<br>

第一页内容<br>第一页内容<br>第一页内容<br>

第一页内容<br>第一页内容<br>第一页内容<br>

第一页内容<br>第一页内容<br>第一页内容

</div>

</div>

<div id="navigation" align="center"> <!-- 页面导航-->

<a href="user/list?page=1"></a> <!-- 此处可以是url,可以是action,要注意不是每种html都可以加,是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数,这个一定要加在这里,它的作用是指出当前页面页码,没加载一次数据,page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->

</div>

</body>

</html>

htm页面怎么用js做简单的上一页下一页代码

<script>

   //上一页

   function up(){

     //首先 你页面上要有一个标志  标志当前是第几页

     //然后在这里减去1 再放进链接里  

     var pageno=当前页数-1;

     if(pageno==0){

         alert("当前已经是第一页!");

         return false;

     }

     /*这里在将当前页数赋值到页面做显示标志*/

     window.location.href="a.htm?b=123&b=qwe&c="+pageno;

   }

   //下一页

   function down(){

     //首先 你页面上要有一个标志  标志当前是第几页

     //然后在这里加上1 再放进链接里  

     var pageno=当前页数+1;

     if(pageno==最大页数){

         alert("当前已经是最后一页!");

         return false;

     }

     /*这里在将当前页数赋值到页面做显示标志*/

     window.location.href="a.htm?b=123&b=qwe&c="+pageno;

   }

</script>

<input type="button" value="上一页" onclick="up()"/>

<input type="button" value="上一页" onclick="down()"/>

我要用html,js写一个简单的列表,可以分页显示,默认选中第一个并且通过上下键进行选中

默认选中第一个简单你在onload的时候给他添加背景色就行了

至于上下按钮,你就要绑定键盘点击事件了给你一点提示

$(window).keydown(function (event) {

if (window.event) {

var key = window.event.keyCode;

} else {

var key = event.which;

}

if (key == 38)//向上

if (key == 40)//向下

}

只要了这些你在对你选中的列修改css 就可以了。

JS实现分页文章键盘左右键“← →”翻页完美代码

<script language="javascript">

var as,lpage=1;

function page_load(){

as=document.getElementsByTagName('A');

for(var i=0;i<as.length;i++){

if(as[i].innerHTML=='尾页'){

var arr = /(\d+)-?(\d*).htm/g.exec(as[i].href);

lpage=arr.length>2 ? (isNaN(arr[2])||arr[2]=='' ? 1 : parseInt(arr[2])) : 1;

break;

}

}

}

function chang_page() {

var arr = /(\d+)-?(\d*).htm/g.exec(window.location.pathname);

var page= arr.length>2 ? (isNaN(arr[2])||arr[2]=='' ? 1 : parseInt(arr[2])) : 1;

if (event.keyCode == 37 || event.keyCode == 33) location = page-1>1 ? window.location.pathname.replace(arr[0], arr[1]+'-'+(page-1)+'.htm') : window.location.pathname.replace(arr[0], arr[1]+'.htm');

if ((event.keyCode == 39 || event.keyCode == 34) && page<lpage) location = window.location.pathname.replace(arr[0], arr[1]+'-'+(page+1)+'.htm');

}

if(document.all){

window.attachEvent('onload', page_load);

}else{

window.addEventListener('load', page_load);

}

document.onkeydown = chang_page;

</script>

改后的代码.

  • 本文相关:
  • vue.js 2.0实现简单分页效果
  • js实现简单分页导航栏效果
  • vue+vuex+json-seiver实现数据展示+分页功能
  • vue.js结合bootstrap前端实现分页和排序效果
  • 基于vue.js实现分页查询功能
  • js实现的简单分页功能示例
  • js 使用 window对象的print方法实现分页打印功能
  • 基于vue.js实现的分页
  • layui复选框的全选与取消实现方法
  • 无刷新上传文件并返回自定义值
  • 每周一练 之 数据结构与算法(stack)
  • javascript 得到文件后缀名的思路及实现
  • 利用jscript中运算符"||"和"&&"的特
  • 点击广告后才能获得下载地址
  • 一道常被人轻视的web前端常见面试题(js)
  • javascript html5 canvas绘制时钟效果(二)
  • javascript实现真实字符串剩余字数提示的实例代码
  • js获取数组任意个不重复的随机数组元素
  • 求JS分页实例或者servlet分页实例,最好有例子能直接运行看看效果
  • 怎么用js来实现页面的分页,有案列代码吗?请给个代码看看,谢谢
  • htm页面怎么用js做简单的上一页下一页代码
  • 我要用html,js写一个简单的列表,可以分页显示,默认选中第一个并且通过上下键进行选中
  • JS实现分页文章键盘左右键“← →”翻页完美代码
  • 怎样用JS实现网站分页,要最简单的?
  • 怎样用JS实现网站分页,得到JS代码后如何使用?
  • 求一段JS按行分页代码 全点(高手快来啊)?
  • 修改一段js分页代码
  • 为这段js分页代码添加上下分页!
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved