一般使用方法

<!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表单提交用法)的更多相关文章

  1. ajax请求与form表单提交共存的时候status为canceled

    chrome浏览器调试,发现,status竟然是canceled状态 网上总论: 1.在URL变更后,会对当前正在执行的ajax进求进行中止操作.中止后该请求的状态码将为canceled 2.在使用到 ...

  2. Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  3. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  4. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  5. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  6. python中前后端通信方法Ajax和ORM映射(form表单提交)

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

  7. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  8. ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

  9. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

随机推荐

  1. MongoDB的固定集合

    一.MongoDB固定集合概念 固定集合指的是事先创建,并且大小固定的集合.即假设一个集合设置了固定大小为100,再添加一条文档的时候,会把最前面的文档剔除,永远只保留100条数据. 固定集合特性:固 ...

  2. vim设置tab键默认为4个空格

    有两种方法 1.vim /etc/vimrc set ts=4 set sw=4 2.vim /etc/vimrc set ts=4 set expandtab set autoindent 推荐使用 ...

  3. CSS中定义a:link、a:visited、a:hover、a:active顺序

    a :link.a:hover.a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同. eg:让未访问链接颜色为red,活动链接为yellow,已访问链接为green ...

  4. Lua 基础总结

    lua 数组下标从 1 开始, 不是 0 lua 逻辑运算符  与 或 非  就是英文  and  or  not local  局部变量 数据类型:lua是一门动态类型语言,变量没有类型,只有值才有 ...

  5. netty10---分包粘包

    客户端:根据 长度+数据 方式发送 package com.server; import java.net.Socket; import java.nio.ByteBuffer; public cla ...

  6. Could not connect to '192.168.89.144' (port 22)

    xshell连接linux主机时,会出现错误:Could not connect to '192.168.89.144' (port 22): Connection failed. 但是这时能ping ...

  7. Ubuntu16.04系统Python3相关环境或模块安装

    前提:一般用户安装都命令前都需要sudo ,或者在root用户下 1.Ubuntu 16.04 安装PyCharm Ubuntu 16.04 安装PyCharm 本文通过第三方源安装PyCharm,好 ...

  8. Linux进程管理 lsof命令:列出进程调用或打开的文件信息

    lsof命令 通过 ps 命令查询到系统中所有的进程, 通过lsof 命令可以知道这个进程到底在调用哪些文件.lsof 命令格式如下: [root@localhost ~]# lsof [选项] 选项 ...

  9. selenim之ActionChains 用法

    常见的点击方法集锦: 参数: 1.driver是我们的浏览器 2.Actions是我们系统内置的执行鼠标一系列操作的对象 鼠标左击:Actions actions=new Actions(driver ...

  10. [转]将Eclipse设置为黑色主题 方式一

    将Eclipse设置为黑色主题 觉得黑色的主题&配色很高大上,于是花了点时间实践出下面一种方法. 修改代码编辑区配色 修改整个软件主题 先上成果图: 但是进度条依旧是白色的,不知道怎么弄了╮( ...