jqPaginator分页（ajax用法和form表单提交用法）
一般使用方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="res/bootstrap.min.css"/>
</head>
<body style="padding:100px">
<ul class="pagination" id="pagination"></ul> <script src="res/jquery-1.7.2.min.js"></script>
<script src="res/jqPaginator.min.js"></script>
<script>
$("#pagination").jqPaginator({
totalPages:20, //总页数
visiblePages: 5, //显示多少页码
currentPage: 1 //当前页码
})
</script>
</body>
</html>
效果图：
如果想换样式和文字，可以修改jqPaginator.min.js
first: '<li class="first"><a href="javascript:;">First</a></li>',
prev: '<li class="prev"><a href="javascript:;">Previous</a></li>',
next: '<li class="next"><a href="javascript:;">Next</a></li>',
last: '<li class="last"><a href="javascript:;">Last</a></li>',
比如修改为
first: '<li class="first"><a href="javascript:;">首页</a></li>',
prev: '<li class="prev"><a href="javascript:;"><<</a></li>',
next: '<li class="next"><a href="javascript:;">>></a></li>',
last: '<li class="last"><a href="javascript:;">末页</a></li>',
修改后效果图
Ajax请求
$("#pagination").jqPaginator({
totalPages:20, //总页数
visiblePages: 5, //显示多少页码
currentPage: 1, //当前页码
onPageChange: function (num, type) {
//num为当前点击的页码
if (type == "change") {
$.ajax(……)
}
}
})
type一直为”change“ 不知道为啥要这个参数。。。。。。
Form表单提交
在form中添加隐藏元素page，pageChange时page赋值为点击的页码数然后提交表单，这时页面刷新page出现在url中，为了同步操作，需要获取url中page的值，这里用的是GetQueryString函数 ，获取到page值然后赋值给隐藏元素page，设置currentPage为$("#page").val()
这里有一个问题，就是currentPage不能直接赋值为GetQueryString("page")，这个应该和代码的执行顺序有关系。。。。
下面贴出完整代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="res/bootstrap.min.css"/>
</head>
<body style="padding:100px">
<form id="form">
<input type="hidden" name="page" id="page"/>
</form>
<ul class="pagination" id="pagination"></ul> <script src="res/jquery-1.7.2.min.js"></script>
<script src="res/jqPaginator.min.js"></script>
<script>
$("#page").val(GetQueryString("page")||1);
function GetQueryString(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null){
var b = decodeURI(r[2]).replace(/\+/g," ").replace(/%2B/g,"+").replace(/%22/g,'"').replace(/%27/g,"'").replace(/%2F/g,"/").replace(/%23/g,"#").replace(/%3D/g,"=").replace(/%26/g,"&").replace(/%40/g,"@").replace(/%3B/g,"；").replace(/%3F/g,"?").replace(/%2C/g,",").replace(/%24/g,"$");
return b;
}
return null;
}
$("#pagination").jqPaginator({
totalPages:20, //总页数
visiblePages: 5, //显示多少页码
currentPage: parseInt($("#page").val()), //当前页码
onPageChange: function (num, type) {
if (type == "change") {
$("#page").val(num);
$("#form").submit();
}
}
})
</script>
</body>
</html>
注：replace的目的是为了替换特殊字符，在form表单中有输入框的情况下可以用上
jqPaginator分页（ajax用法和form表单提交用法）的更多相关文章
- ajax请求与form表单提交共存的时候status为canceled
chrome浏览器调试,发现,status竟然是canceled状态 网上总论: 1.在URL变更后,会对当前正在执行的ajax进求进行中止操作.中止后该请求的状态码将为canceled 2.在使用到 ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- Form表单提交，Ajax请求，$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
- javascprit form表单提交前验证以及ajax返回json
1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...
随机推荐
- iOS开发debug集锦
1.添加第三方库时,需要注意使用环境 duplicate symbol _llvm.embedded.module in: /Users/dengw/360Cloud/xcode_code/appli ...
- k8s-离线安装k8s
1.开始 目标 coreos的igniton.json有很强的可配置性,通过安装时指定集群配置的ignition.json, 安装完成后打开https://{{Master_IP}}:6443/ui直 ...
- POJ - 3308 Paratroopers (最小点权覆盖)
题意:N*M个格点,K个位置会有敌人.每行每列都有一门炮,能打掉这一行(列)上所有的敌人.每门炮都有其使用价值.总花费是所有使用炮的权值的乘积.求最小的总花费. 若每门炮的权值都是1,就是求最小点覆盖 ...
- 【转】使用DataConnectionDialog在运行时设置数据源连接字符串
介绍: DataConnectionDialog 类: 打开“数据连接”对话框,获取用户选择的数据连接信息. 命名空间为:Microsoft.Data.ConnectionUI 所在程序集:Micro ...
- a=b=c 连等赋值的分析
首先 先抛出两个例子,大家想想结果是什么? eg1: var a = 1; var b = a; a.x = a = 3; 问 a = ? | b = ? | a.x = ? eg2: var ...
- Ubuntu16.04安装MySQLdb
buntu 系统下进行的操作 首先安装了pip工具 1 sudo apt-get install python-pip 然后使用 1 sudo pip install mysql-python 安 ...
- DNS ARP地址解析原理
ARP是地址解析协议 主机A与主机B之间如果要进行数据间的传输,需要获取对方的IP与物理地址(MAC),在只清楚ip的情况下,主机A向主机B请求链接,会先查找ARP高速缓存表,是否存在对应的主机B的i ...
- 20145312 《Java程序设计》第四周学习总结
20145312 <Java程序设计>第四周学习总结 学习笔记 Chapter 6 6.1何为继承 1.定义:面向对象中子类继承父类,避免重复的行为定义. 6.1.1 继承共同行为 1.以 ...
- Could not reserve enough space for 1572864KB object heap
This problem might be caused by incorrect configuration of the daemon.For example, an unrecognized j ...
- 定制Writable类
以IntWritable为例介绍,定制writable的步骤 //继承 WritableComparable接口(继承了writable接口和comparable接口) public class In ...