1. 程式人生 > >分頁(不重新整理,使用到jquery.pagination.js外掛)

分頁(不重新整理,使用到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>