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 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
js在HTML的三种引用方式详解
Aug 29 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
JS实现简易日历效果
Jan 25 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
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
php xml-rpc远程调用
2008/12/19 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
Vue组件化开发思考
2018/02/02 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
如何解决python多种版本冲突问题
2020/10/13 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
商场消防演习方案
2014/02/12 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
关于车尾的标语大全
2015/08/11 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js