jQuery无刷新分页完整实例代码


Posted in Javascript onOctober 27, 2015

本文实例讲述了jQuery无刷新分页实现方法。分享给大家供大家参考,具体如下:

这款jQuery分页示例,是分页经典形式,兼容性也做的好,网页上的分页代码,分享给大家。

运行效果截图如下:

jQuery无刷新分页完整实例代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery分页演示效果</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var show_per_page = 5; 
 var number_of_items = $('#content').children().size();
 var number_of_pages = Math.ceil(number_of_items/show_per_page);
 $('#current_page').val(0);
 $('#show_per_page').val(show_per_page);
 var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
 var current_link = 0;
 while(number_of_pages > current_link){
  navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
  current_link++;
 }
 navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
 $('#page_navigation').html(navigation_html);
 $('#page_navigation .page_link:first').addClass('active_page');
 $('#content').children().css('display', 'none');
 $('#content').children().slice(0, show_per_page).css('display', 'block'); 
});
function previous(){
 new_page = parseInt($('#current_page').val()) - 1;
 if($('.active_page').prev('.page_link').length==true){
  go_to_page(new_page);
 }
}
function next(){
 new_page = parseInt($('#current_page').val()) + 1;
 //if there is an item after the current active link run the function
 if($('.active_page').next('.page_link').length==true){
  go_to_page(new_page);
 }
}
function go_to_page(page_num){
 var show_per_page = parseInt($('#show_per_page').val());
 start_from = page_num * show_per_page;
 end_on = start_from + show_per_page;
 $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
 $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
 $('#current_page').val(page_num);
}
</script>
<style>
#page_navigation a{
 padding:3px;
 border:1px solid gray;
 margin:2px;
 color:black;
 text-decoration:none
}
.active_page{
 background:darkblue;
 color:white !important;
}
</style>
</head>
<body>
 <input type='hidden' id='current_page' />
 <input type='hidden' id='show_per_page' />
 <div id='content'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p>
  <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p>
  <p>Pellentesque ac sem ac sem tincidunt euismod.</p>
  <p>Duis hendrerit purus vitae nibh tincidunt bibendum.</p>
  <p>Nullam in nisi sit amet velit placerat laoreet.</p>
  <p>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</p>
  <p>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</p>
  <p>In non eros eu lacus vestibulum sodales.</p>
  <p>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</p>
  <p>Proin ullamcorper est vitae lorem mollis bibendum.</p>
  <p>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</p>
  <p>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</p>
  <p>Maecenas lacinia lectus ac nulla commodo lacinia.</p>
  <p>Maecenas quis massa nisl, sed aliquet tortor.</p>
  <p>Quisque porttitor tellus ut ligula mattis luctus.</p>
  <p>In at mi dolor, at consectetur risus.</p>
  <p>Etiam id erat ut lorem fringilla dictum.</p>
  <p>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</p>
  <p>Pellentesque quis magna vitae quam malesuada aliquet.</p>
  <p>Curabitur tempus tellus quis orci egestas condimentum.</p>
  <p>Maecenas laoreet eros ac orci adipiscing pharetra.</p>
  <p>Nunc non mauris eu nibh tincidunt iaculis.</p>
  <p>Ut semper leo lacinia purus hendrerit facilisis.</p>
  <p>Praesent et eros lacinia massa sollicitudin consequat.</p>
  <p>Proin non mauris in sem iaculis iaculis vel sed diam.</p>
  <p>Nunc quis quam pulvinar nibh volutpat aliquet eget in ante.</p>
  <p>In ultricies dui id libero pretium ullamcorper.</p>
  <p>Morbi laoreet metus vitae ipsum lobortis ultrices.</p>
  <p>Donec venenatis egestas arcu, quis eleifend erat tempus ullamcorper.</p>
  <p>Morbi nec leo non enim mollis adipiscing sed et dolor.</p>
  <p>Cras non tellus enim, vel mollis diam.</p>
  <p>Phasellus luctus quam id ligula commodo eu fringilla est cursus.</p>
  <p>Ut luctus augue tortor, in volutpat enim.</p>
  <p>Cras bibendum ante sed erat pharetra sodales.</p>
  <p>Donec sollicitudin enim eu mi suscipit luctus posuere eros imperdiet.</p>
  <p>Vestibulum mollis tortor quis ipsum suscipit in venenatis nulla fermentum.</p>
  <p>Proin vehicula suscipit felis, vitae facilisis nulla bibendum ac.</p>
  <p>Cras iaculis neque et orci suscipit id porta risus feugiat.</p>
  <p>Suspendisse eget tellus purus, ac pulvinar enim.</p>
  <p>Morbi hendrerit ultrices enim, ac rutrum felis commodo in.</p>
  <p>Suspendisse sagittis mattis sem, sit amet faucibus nisl fermentum vitae.</p>
  <p>Nulla sed purus et tellus convallis scelerisque.</p>
  <p>Nam at justo ut ante consectetur faucibus.</p>
  <p>Proin dapibus nisi a quam interdum lobortis.</p>
  <p>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</p>
  <p>Mauris auctor suscipit tellus, at sodales nisi blandit sed.</p>
 </div>
 <div id='page_navigation'></div><br>
<br>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS截取字符串常用方法详细整理
Oct 28 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
Vue.use源码学习小结
Jun 20 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 #Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 #Javascript
JavaScript编程中window的location与history对象详解
Oct 26 #Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 #Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
php合并js请求的例子
2013/11/01 PHP
PHP合并静态文件详解
2014/11/14 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
javascript实现yield的方法
2013/11/06 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
python控制台显示时钟的示例
2014/02/24 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python gdal安装与简单使用
2019/08/01 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
雪山饭庄的创业计划书范文
2014/01/18 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
Python中的程序流程控制语句
2022/02/24 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript