jqPaginator分页(ajax用法和form表单提交用法)

Posted 嫣然一笑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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表单提交用法)的主要内容,如果未能解决你的问题,请参考以下文章

触屏版轻量级分页插件jqPagination分享

jqPaginator-master | kkpager-master 这两个分页插件的使用方法

jq.paginator分页插件稍加修改

原生和jQuery的ajax用法

原生和jQuery的ajax用法

原生和jQuery的ajax用法