jQuery pagination分页示例详解


Posted in jQuery onOctober 23, 2018

本文实例为大家分享了jQuery pagination分页示例的具体代码,供大家参考,具体内容如下

前台html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
 
<title>通知公告列表</title>
 
<link rel="stylesheet" href="../css/pagination.css" type="text/css"></link> 
 
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> 
 
<script type="text/javascript" src="../js/jquery.pagination.js"></script> 
 
<style>
 .page{
 width:95%;
 height:770px;
 margin:0 auto;
 padding:10px;
 border:2px solid #ccc;
 border-radius:5px;
 margin-bottom:30px;
 }
 a{text-decoration:none;color:#489FE8;}
 
</style>
 
<script>
 
 //var fpURL="url";
 var fpURL="url";
 
 
 var total=0; 
 
 $(function(){//页面加载时,进行绑定 
 $.ajax({
 type:"get",
 url:fpURL+"GetZxwj?lx=List",
 data:"",
 dataType:"json",
 beforeSend: function () {
 
 $(".img").show();
 },
 complete:function(){
 
 $(".img").hide();
 bind(0);
 
 },
 success:function(data){
 var obj=eval(data);
 $.each(obj.data,function(index,item){ 
  total=parseInt(item.co);//获取总条数
 })
 }
 })
 
 }); 
 
 //点击分页时调用的函数,page_id为当前页的索引 
 function pageselectCallback(page_id, jq) { 
 bind(page_id); 
 } 
 
 var ListArr=[];
 function bind(pageIndex) 
 { 
 var temp=""; 
 $.ajax({ 
 type:"GET", 
 
 //url:"sys/news.do?method=findByTopic&page="+(pageIndex+1), 
 url:fpURL+"GetZxwj?lx=zxwjList&ts="+(pageIndex+1),
  
 async:false, ////作用是防止在ajax成功调用之前就调用$("#Pagination").pagination,这个时候数据个数还没有初始化 
 
 dataType:"json", 
 
 //data:"pageIndex="+(pageIndex+1),//传递页面索引 
 data:"",
 
 //发送请求前,显示加载动画 
 beforeSend:function(){
 $(".img").show();
 }, 
 //请求完毕后,隐藏加载动画 
 complete:function(){
 
 $(".img").hide();
 }, 
 success:function(data){ 
 
 var obj=eval(data);
 
 //alert(obj.data.length);
 
 //total=obj.data.length;//记录总数 
 
 $.each(obj.data,function(index,item){ 
 
 temp+="<div>"+ 
 
 "<a style='font-size: 18px; font-famliy: 微软雅黑;font-weight:700;' OnClick='document.location.href=""+ fpURL +" rel="external nofollow" cmp/tzgg/zxwjContent.html?id="+ item.wjid +""' >"+ item.wjmc+"</a> "+ 
 
 "<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+ item.fbrq+" </div> "+
 
 "<hr style='border:1px solid #ccc;width:100%;'/>"; 
 
 
 }); 
 
 $("#datas").html(temp); //将创建的新行附加在DIV中 
 
 } 
 
 }); 
 
 if(total!=0){ 
 //调用分页函数,将分页插件绑定到id为Pagination的div上 
 $("#Pagination").pagination(total, { //recordCount在后台定义的一个公有变量,通过从数据库查询记录进行赋值,返回记录的总数 
 callback: pageselectCallback, //点击分页时,调用的回调函数 
 prev_text: '« 上一页', //显示上一页按钮的文本 
 next_text: '下一页 »', //显示下一页按钮的文本 
 items_per_page:12, //每页显示的项数 
 num_display_entries:4, //分页插件中间显示的按钮数目 
 current_page:pageIndex, //当前页索引 
 num_edge_entries:2 //分页插件左右两边显示的按钮数目 
 
 }); 
 } 
 } 
 
</script>
</head>
 
<body style=""> 
 
<div class="img" style="display:none;text-align:center;margin:0 auto;margin-top:200px;z-index:1000;">
 <img src="../image/jz.jpg">
</div>
<div class="page"> 
<div id="datas"> 
 
</div> 
<div id="Pagination" style="margin-bottom:10px;"></div> 
</div> 
 
 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
You might like
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
python循环监控远程端口的方法
2015/03/14 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python连接DB2数据库
2016/08/27 Python
Python heapq使用详解及实例代码
2017/01/25 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
个人简历自我评价八例
2013/10/31 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
横幅标语大全
2014/06/17 职场文书
免职证明样本
2014/10/23 职场文书
开除员工通知
2015/04/22 职场文书
党员带头倡议书
2015/04/29 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Python 中的 copy()和deepcopy()
2021/11/07 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js