一般使用方法

<!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. glib简单记录包括字符串，主循环，回调函数和xml解析

    一.将最近用到的glib字符串功能整理了下直接用程序记录比较好看懂 #define MAX_LEN 100gchar * demo (char* msg, ...){    gchar * pcfgf ...

  2. index full scan和index fast full scan区别

    触发条件:只需要从索引中就可以取出所需要的结果集,此时就会走索引全扫描 Full Index Scan    按照数据的逻辑顺序读取数据块,会发生单块读事件, Fast Full Index Scan ...

  3. 一步一步学EF系列一【最简单的一个实例】

    整个文章我都会用最简单,最容易让人理解的方式给大家分享和共同学习.(由于live Writer不靠谱 又得补发一篇) 一.安装 Install-Package EntityFramework 二.简单 ...

  4. 基于TSUNG对MQTT进行压力测试-基础概念温习

    [单台Broker压测结果]请移步另一篇博客:http://www.cnblogs.com/lingyejun/p/7941271.html 一.TCP报头部中的SYN.FIN.ACK: ACK : ...

  5. node的3大作用域

    除了持久性存储外,想要内存也可以存入数据,来做计算什么数据都存入访问一便数据库,效率就太低了 java有3大作用域request 指在一次请求的全过程中有效,即从http请求到服务器处理结束,返回响应 ...

  6. 54. Spiral Matrix(矩阵，旋转打印)

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  7. LeetCode 7. Reverse Integer 一个整数倒叙输出

    潜在问题:(1)随着求和可能精度会溢出int 范围,需要使用long 来辅助判断是否溢出,此时返回 0 Assume we are dealing with an environment which ...

  8. Linux 系统日志管理 rsyslogd配置文件

    rsyslogd配置文件  rsyslogd 服务是依赖其配置文件 /etc/rsyslog.conf 来确定哪个服务的什么等级的日志信息会被记录在哪个位置的.也就是说,日志服务的配置文件中主要定义了 ...

  9. 关于文件中的0D、0A

    文件一般分为文本文件和二进制文件. 在windows文本文件中,分行即‘\n“,表示为0x0D 0x0A.分为两种情况: 如果你想一个文本文件中写入一个'\n',文本文件中会增加0x0D 0x0A两个 ...

  10. 20145211 《网络渗透》MS08_067安全漏洞

    20145211 <网络渗透>MS08_067安全漏洞 一.实验原理 ms08_067是服务器服务中一个秘密报告的漏洞,于2008年被发现.攻击者利用靶机默认开放的SMB服务的445端口, ...