jQuery pagination分页示例详解

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery pagination插件实现无刷新分页代码

    jquery pagination插件实现无刷新分页代码

    先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo

  • Jquery 分页插件之Jquery Pagination

    Jquery 分页插件之Jquery Pagination

    实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式

  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

    jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

    原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

  • jquery分页插件pagination使用教程

    pagination使用起来非常的方便. 第一步:引入分页需要的js(jquery.pagination.js)和css(pagination.css) pagination插件下载地址 第二步:将分页条容器写到页面里(固定代码) <div class="pages"> <div id="Pagination"></div> <div class="searchPage" id="searchP

  • jQuery Pagination分页插件使用方法详解

    本文实例为大家分享了jQuery Pagination分页插件的具体代码,供大家参考,具体内容如下 一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src=&quo

  • jquery.pagination.js 无刷新分页实现步骤分享

    jquery.pagination.js 无刷新分页实现步骤分享

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(

  • jQuery EasyUI Pagination实现分页的常用方法

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一.使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Convert.ToInt32(Request["rows"]); int pageN

  • jQuery EasyUI API 中文文档 - Pagination分页

    用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n

  • jquery.pagination.js分页使用教程

    jquery.pagination.js分页使用教程

    简单介绍一下在动态网页里面的jquery.pagination.js分页的使用,具体内容如下 添加下载的js和样式,主要是先添加jquery.js 再添加jquery.pagination.js,我这是下载好的,放在本地 <link rel="stylesheet" href="<%=path%>css/pagination.css" type="text/css"> <script type="text/

  • jQuery pagination分页示例详解

    本文实例为大家分享了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="v

  • Spring JPA find分页示例详解

    目录 前言 源码 一.单纯分页查询 查询结果 结论 二.排序分页查询 查询结果 三.方法整理 总结: 前言 在现实项目中,数据量一般都不小,如果一次性全部请求出来,肯定是影响性能,而且大量数据展示到页面上观感也不好.这时我们就需要用到分页,给定一个 pageSize,每次请求的数量就是 pageSize 的大小,这样既可以节约时间,又可以美化页面.Spring JPA 就为我们提供这样一个方法,准确来说是提供了一个对象用来约束数据按照分页的形式进行请求. 源码 findAll(Pageable

  • 关于二次封装jquery ajax办法示例详解

    前言 Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML AJax所涉及到得技术: 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信.(核心) 4.使用javascript来绑定和调用. 在我们前端处理数据的时候免不了要 ajax 与后台通信, ajax 是通过 XMLHttpRequest 对象与服务器进行通信的, jquery 在 XMLHt

  • jQuery - css() 方法示例详解

    css() 方法设置或返回被选元素的一个或多个样式属性. 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法: 复制代码 代码如下: css("propertyname","value"); 下面的例子将为所有匹配元素设置 background-color 值: 实例 复制代码 代码如下: $("p").css("background-color","yellow"); 设置多个 CSS 属性

  • jquery pagination分页插件使用详解（后台struts2）

    jquery pagination分页插件使用详解（后台struts2）

    页面是用的纯css的效果,没有使用bootstrap的框架,不然自带的分页是挺好用的,就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的,这边后台用的是struts2的框架,ssh的,jquery返回json数据,然后循环拼接table输入到页面,这个分页插件使用起来感觉还是比较简单,代码编辑比较少,也有样式可以选择,但是那样要导入pagination.css在div中的class修改样式不导入的话就只有默认样式,这边样式也没有调节,不是很美观,功能实现了,干货:

  • jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

  • jQuery编程动画的基本方法示例详解

    目录 一.动画 .show() .hide() .fadeIn() .fadeOut() .animate() .slideDown() .slideUp() .delay() .clearQueue() .fadeTo() 一.动画 jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate(). .show() 当提供一个 duration(持续时间)参数,.show()成为一个动画方法..show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作. 持续

  • .NetCore实现上传多文件的示例详解

    .NetCore实现上传多文件的示例详解

    本章和大家分享的是.NetCore的MVC框架上传文件的示例,主要讲的内容有:form方式提交上传,ajax上传,ajax提交+上传进度效果,Task并行处理+ajax提交+上传进度,相信当你读完文章内容后能后好的收获,如果可以不妨点个赞:由于昨天电脑没电了,快要写完的内容没有保存,今天早上提前来公司从头开始重新,断电这情况的确让人很头痛啊,不过为了社区的分享环境,这也是值得的,不多说了来进入今天的正篇环节吧: form方式上传一组图片 先来看看咋们html的代码,这里先简单说下要上传文件必须要

随机推荐