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-data的三种用法
Apr 18 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery实现手风琴案例
May 04 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中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python为什么会环境变量设置不成功
2020/06/23 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
一套C++笔试题面试题
2012/06/06 面试题
法务专员岗位职责
2014/01/02 职场文书
旷课检讨书3000字
2014/02/04 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
排查整治工作方案
2014/06/09 职场文书
委托培训协议书
2014/11/17 职场文书
中学团支部工作总结
2015/08/13 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python