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>

效果图:网址:yii666.com

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

如果想换样式和文字,可以修改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>',

修改后效果图文章来源地址https://www.yii666.com/article/756311.html文章地址https://www.yii666.com/article/756311.html文章来源地址:https://www.yii666.com/article/756311.html

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

Ajax请求

$("#pagination").jqPaginator({
totalPages:20, //总页数
visiblePages: 5, //显示多少页码
currentPage: 1, //当前页码
onPageChange: function (num, type) {
//num为当前点击的页码
if (type == "change") {
$.ajax(……)
}
}
})

type一直为”change“  不知道为啥要这个参数。。。。。。网址:yii666.com<

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. 学习日记13、ajax同时提交from表单和多个参数

  2. Ajax form表单提交

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

  4. form表单提交file

    form表单提交文件,这毫无疑问不是个好办法。但是,存在既有意义。既然H5都还让着东西存在着,呢么必然有其意义。form表单中的input type=file这个空间,不得不说奇丑无比!问题是还不能修改它的样式,这就更让人蛋疼了。好了,不闲扯,咱还是一条一条的列出来。首先,就

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png