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="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分页插件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 分页插件之Jquery Pagination
实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式
-
jquery pagination分页插件使用详解(后台struts2)
页面是用的纯css的效果,没有使用bootstrap的框架,不然自带的分页是挺好用的,就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的,这边后台用的是struts2的框架,ssh的,jquery返回json数据,然后循环拼接table输入到页面,这个分页插件使用起来感觉还是比较简单,代码编辑比较少,也有样式可以选择,但是那样要导入pagination.css在div中的class修改样式不导入的话就只有默认样式,这边样式也没有调节,不是很美观,功能实现了,干货:
-
Ajax分页插件Pagination从前台jQuery到后端java总结
困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
-
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">
-
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
-
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 Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
-
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
随机推荐
- iOS程序开发之使用PlaceholderImageView实现优雅的图片加载效果
- jQuery ajax json 数据的遍历代码
- 带你快速理解javascript中的事件模型
- vbs 调用中文语音让你电脑听你的命令的实现代码
- apache zookeeper使用方法实例详解
- 在ASP.NET 2.0中操作数据之七十四:用Managed Code创建存储过程和用户自定义函数(下部分)
- 如何在不同.net版本实现单点登录
- ASP.NET程序发布详细过程
- PHP批量上传图片的具体实现方法介绍.
- 交换两个文本内容的C语言代码
- js获取元素的标签名实现方法
- 彻底搞懂JavaScript中的apply和call方法(必看)
- js实现checkbox全选、不选与反选的方法
- 使用cookie实现统计访问者登陆次数
- Python实现随机生成有效手机号码及身份证功能示例
- Android编程实现多列显示的下拉列表框Spinner功能示例
- 浅谈Linux中ldconfig和ldd的用法
- Python3.6正式版新特性预览
- C#之WinForm跨线程访问控件实例
- 在线编辑器中换行与内容自动提取