jQuery分页插件jquery.pagination.js使用方法解析

2024-09-29 06:39:37

jquery.pagination.js插件，此jQuery插件为Ajax分页插件，一次性加载全部数据，故分页切换时无刷新与延迟，只是重写指定dom元素中的html内容，如果数据量较大不建议用此方法，因为加载会比较慢；

jQuery的多数插件使用都比较简单，都能查找出相关api，且含有demo；

使用此插件,首先在页面(jsp、html)中引入其js、css文件

<link href="/自定义路劲/jquery.pagination/pagination.css" rel="external nofollow" rel="stylesheet">
<script src="/自定义路径/jquery.pagination/jquery.pagination.js" type="text/javascript"></script>

具体代码：

<html>
 <body>
  <div id="table">
   <div id="result">
    查询后的数据
   </div>
   <!--分页div，使用时，只需此部分即可-->
   <div class="cl">
    <div class="pagination" id="pageDiv"></div><!--id自定义即可-->
   </div>
  </div> 

 <body>
 <script>
  // 创建分页
  $("#pageDiv").pagination(${p.totalPage}, {
   num_edge_entries: 1, //两侧显示的首尾分页的条目数
   num_display_entries: 4, //连续分页主体部分显示的分页条目数
   callback: function(){//回调函数，
     //setLinkTo();//自定义函数：某种行为
   },
   link_to: "#",//分页的链接
   current_page: ${p.pageNo},//当前页
   prev_text : "< 上一页",//自定义“上一页”标签
   next_text : "下一页 >",//自定义“下一页”标签
   first_text: "<i class='begin_page'>首页</i>", //是否显示首页按钮，默认为true；
   last_text: "<i class='last_page'>末页</i>", //是否显示尾页按钮，默认为true；
   items_per_page: ${p.pageSize}, //每页显示的条目数(pageSize)
   toPage: false //是否显示跳转到第几页，默认是true；
  });
 </script>
</html>

由于其特有的分页逻辑，使用此插件时，需要谨慎，以免与应用后台的分页逻辑不符，引起不必要的二次开发。

对任何插件的使用都需灵活，取你所需即可：如当我们的应用已经使用了一种前端分页插件，但是喜欢jquery.pagination插件的样式，此时，我们只需使用其样式文件，再对原分页插件源码适当的调整即可。没有必要推翻我们原有的分页逻辑，为了满足插件而使用插件。而一定是为了满足我们而使用插件。

更多精彩内容请点击：jquery分页功能汇总进行学习。

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

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

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

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
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分页插件使用详解（后台struts2）

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

本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值
jQuery插件分享之分页插件jqPagination

使用方法: 添加 jQuery 类库.jqPagination 插件的 JS 和 CSS 文件复制代码代码如下: <link rel="stylesheet" href="jqpagination.css"/><script src="jquery-1.6.2.min.js"></script><script src="jquery.jqpagination.min.js">
asp.net jquery无刷新分页插件(jquery.pagination.js)

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表 2.页面内容: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul
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.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式
jQuery分页插件jquery.pagination.js使用方法解析

jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢: jQuery的多数插件使用都比较简单,都能查找出相关api,且含有demo: 使用此插件,首先在页面(jsp.html)中引入其js.css文件 <link href="/自定义路劲/jquery.pagination/pagination.css" rel=&q
jquery分页插件pagination使用教程

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

本文将为大家介绍一款非常赞的jQuery分页插件:jqPaginator. jqPaginator简洁.高度自定义的jQuery分页组件,适用于多种应用场景. 简介现在网上各种各样的分页组件很多,但是很难找到十分"称心如意"的,于是jqPaginator诞生了. 我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中.以我浅显的经验来看,要达到这个目标,关键的一点就是高度自定义的Html结构.所以jqPaginator努力做到合理范围内的自定义,使其灵活的使用了
jQuery树形插件jquery.simpleTree.js用法分析

本文实例讲述了jQuery树形插件jquery.simpleTree.js用法.分享给大家供大家参考,具体如下: 最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jQuery.simpleTree.js来实现. 这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果同时这个树的节点
jQuery Validate插件自定义验证规则的方法

作为一个有强迫症存在的人,最见不得就是不统一的格式,对不齐的代码.所以在对表单填写项进行validate插件验证时,有一些验证规则是根据实际需要个性化定制的.如果不扩展validate插件规则,就会导致验证提示的表现方式不同,这简直能逼死强迫症.所以我就查找了一下,validate插件果然也有能自定义验证规则的方法,简直是强迫症患者的救星.话不多说,我们来看看是如何自定义的吧. //该方法对提现金额进行判断,看账户中是否有足够的金钱提现 function check_price(){ //提现额
jQuery时间插件jquery.clock.js用法实例(5个示例)

本文实例讲述了jQuery时间插件jquery.clock.js用法.分享给大家供大家参考,具体如下: Example 1: Basic clock, no options <html> <head> <title>jclock</title> <mce:script type="text/javascript" src="jquery-1.2.1.min.js" mce_src="jquery-1.2
超好用的jQuery分页插件jpaginate用法示例【附源码下载】

本文实例讲述了jQuery分页插件jpaginate用法.分享给大家供大家参考,具体如下: jpaginate是一个自带滑动动画效果的jQuery分页插件,用户可以通过单击或只是悬停在箭头上的使页码滑动显示. 你可以用下面的方式调用插件: $(elementID).paginate() 您可以通过一下属性来配置插件: count:页面总数 start:默认选中页码 display:可见页码数量 border:边框(true/false) border_color:边框颜色: text_color

jQuery分页插件jquery.pagination.js使用方法解析

相关推荐

随机推荐