引用到插件(可以从网上下载):
jquery.pagination.js
pagination.css
在需要的分页条的地方放入一个div
<div id="paginate"></div>
在js里书写配置(pagination这里面还有一些参数,可以去网上查询)
$("#paginate").pagination({
items_per_page: 5,// 每页显示多少条记录
prev_text: "下一页",
next_text: "上一页",
url: '/Ajax/Handler.ashx?type=page',
queryParams: {
one: $("#One").val(),//传的参数
two: $("#Two").val(),
three: $("#Three").val()
},
callback: function (opts) {
var html = parseTemplate($("#templist").html(), opts.data);
$("#swiperbox").html(html);
}
});
这里的parseTemplate($("#templist").html(), opts.data)里的templist是一个在js里的写的样本
$("#swiperbox").html(html)是你需要分页的数据放的位置
callback: function(spts){
返回到这个里面的数据是分页的json格式
可以将数据循环放在所需的位置(有不同的放的方法),这里使用的js模板,将数据的html模式放在js模板里
所以这里我就以js模板进行说明
}
在js里书写的一个js模板
先引用模板插件parseTemplate.js(也可以去网上下载)
然后在js里:(这个里面写的是数据的显示模板)
<script type="text/template" id="templist">
<#
for(var i=0;i<rows.length;i++){
var item=rows[i];
#>
<div class="swiper-wrapper clearfix">
<div class="b-item"><#=item.One#></div>
<div class="b-item"><#=item.Two#></div>
<div class="b-item"><#=item.Three#></div>
</div>
<#
}
#>
</script>