jQuery Ajax 实现分页实现分页 kkpager插件实例代码插件实例代码
本文通过实例代码给大家讲解了jQuery Ajax 实现分页 kkpager插件功能，需要的的朋友参考下吧
代码片段一：
<!--分页组件 JS CSS 开始-->
<!--分页组件 CSS-->
<link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" />
<!--分页组件 JS-->
<script type="text/javascript" src="/resource/js/kkpager.min.js"></script>
<script type="text/javascript" src="/resource/js/kkpager.js"></script>
<!--分页组件 JS CSS 结束-->
代码片段二：
<script type="text/javascript">
$(function () {
//----分页部分 代码片段一 开始----
var totalPage = 20;//总共多少页
var totalRecords = 200;//总共多少条
var pagehref = window.location.href;
var pageNo = GetQueryString('pno');
if (!pageNo) {
pageNo = 1;
}
//----分页部分 代码片段一 结束----
//----页面数据加载 并绑定生成分页 开始----
function LoadingGoods() {
jQuery.ajax({
url: 'baidu.com',
type: "POST",
dataType: "json",
data: { '参数1': 1, '参数2': 2,'Page': pageNo, 'Limit': 20 },
success: function (result) {
if (result.success) {
var count = result.result;
var data = result.data;
totalRecords = count;
totalPage = Math.ceil(count / 20);
if (count > 0) {
$(".commodity_volume").html("");
var str = "";
for (var i = 0; i < data.length; i++) {
str += "<div class='commodity'></div>";
}
$(".commodity_volume").html(str);
} else {
$(".commodity_volume").html("");
var str = "";
str = "<div><center>没有查到您想要的数据。</center></div>"
$(".commodity_volume").html(str);
}
//----分页部分 代码片段二 开始----
kkpager.total = totalPage;
kkpager.totalRecords = totalRecords;
kkpager.generPageHtml({
pno: pageNo,
//总页码
total: totalPage,
//总数据条数
totalRecords: totalRecords,
//mode: 'click',
//链接前部
hrefFormer: pagehref,
//链接尾部
hrefLatter: '',//hrefLatter: '.html'
getLink: function (n) {
var hrefFormer = this.hrefFormer;
var url = this.hrefFormer + "&pno=" + n;
if (hrefFormer.indexOf("pno") > 0) {
var pno = GetQueryString("pno");
return this.hrefFormer.replace('pno=' + pno, 'pno=' + n);
} else {
return url;
}
}
});
//----分页部分 代码片段二 结束----
//----显示遮罩 开始----
$('#AjaxLoading').hide()
$(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
$(".overlay").css({ 'display': 'none', 'opacity': '0' });
//----显示遮罩 结束----
}
},
error: function () {
alert("请刷新后重试！")
}
});
}
LoadingGoods();//加载商品列表
//----页面数据加载 并绑定生成分页 结束----
} </script>
代码片段三：
<div id="kkpager"></div>
下面这段代码：在原版上修改过，由于ajax分页不能及时更新总页数
下面是插件kkpager.js代码：
/*
kkpager V1.3
https://github.com/pgkk/kkpager
Copyright (c) 2013 cqzhangkang@163.com
Licensed under the GNU GENERAL PUBLIC LICENSE
*/
var kkpager = {
pagerid : 'kkpager', //divID
mode : 'link', //模式(link 或者 click)
pno : 1, //当前页码
total : 1, //总页码
totalRecords : 0, //总数据条数
isShowFirstPageBtn : true, //是否显示首页按钮
isShowLastPageBtn : true, //是否显示尾页按钮
isShowPrePageBtn : true, //是否显示上一页按钮
isShowNextPageBtn : true, //是否显示下一页按钮
isShowTotalPage : true, //是否显示总页数
isShowCurrPage : true,//是否显示当前页
isShowTotalRecords : false, //是否显示总记录数
资源评论
