分頁(不重新整理,使用到jquery.pagination.js外掛)
引用到外掛(可以從網上下載):
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>