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 EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
用JS写的一个TableView控件代码
2010/01/23 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python实现数据库跨服务器迁移
2018/04/12 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
2014年秋季开学典礼致辞
2014/08/02 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python