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插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Jquery获取radio选中的值
May 05 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现推拉门效果
Oct 19 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP学习记录之数组函数
2018/06/01 PHP
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python画图学习入门教程
2016/07/01 Python
深入理解Python中的内置常量
2017/05/20 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python定义函数实现累计求和操作
2020/05/03 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
销售总监岗位职责
2014/01/04 职场文书
家长会邀请书
2014/01/25 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
班主任开场白
2015/06/01 职场文书
建党伟业的观后感
2015/06/01 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python