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图片放大镜效果
Jun 23 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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 使用GD库为页面增加水印示例代码
2014/03/24 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
JQuery live函数
2010/12/24 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中__call__用法实例
2014/08/29 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python处理session的方法整理
2019/08/29 Python
浅析python redis的连接及相关操作
2019/11/07 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
硕士生工作推荐信
2014/03/07 职场文书
冬季施工防火方案
2014/05/17 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
党员查摆剖析材料
2014/10/10 职场文书
情人节单身感言
2015/08/03 职场文书
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers