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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 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
咖啡的种类和口感
2021/03/03 新手入门
用PHP实现递归循环每一个目录
2010/08/08 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
喝酒检查书范文
2014/02/23 职场文书
计算机专业自荐信
2014/05/24 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
安全守法证明
2015/06/23 职场文书
初中英语教学随笔
2015/08/15 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python