Jquery+Json實現無刷新分頁插件

dengjianbin 13年前發布 | 69K 次閱讀 jQuery Ajax框架 jQuery插件
數據分頁是一種可減輕服務器負擔，很多地方只需要局部刷新即可，提高客戶體驗，此插件功能強大，使用簡單，可靈活設置，使用時引入插件文件，再寫上20多代碼就可以輕松實現數據無刷新分頁了，多的不講了，先看效果
 
Jquery插件,Jquery資源,Jquery特效,div+css

主要代碼如下：
$(function(){  
    var jsonData = eval(json);
    $.each(jsonData,function(i,n){
        $("#Searchresult").append("<li><img src=\""+n.pic+"\" atl=\""+n.name+"\" height=\"90\" /><br />"+n.name+"</li>");  
    });
    var num_entries = $("#Searchresult li").length; 
    var showCount = 12;
    $("#total").html("一共有 "+num_entries+" 條數據 每頁顯示"+showCount+"條");
    var initPagination = function() {       
        // 創建分頁
        $("#Pagination").pagination(num_entries, {
            num_edge_entries: 1, //邊緣頁數
            num_display_entries: 6, //主體頁數
            callback: pageselectCallback,
            items_per_page:showCount //每頁顯示1項
        });
     }();    
    function pageselectCallback(page_index, jq){
        var max_elem = Math.min((page_index+1) *showCount, num_entries);        
        $("#htcList").html("");     
        for(var i=page_index*showCount;i<max_elem;i++){
            var new_content = $("#Searchresult li:eq("+i+")").clone();
            $("#htcList").append(new_content); //裝載對應分頁的內容
        }
        return false;
    }
});

項目主頁：http://www.baiduhome.net/lib/view/home/1344491911374

 本文由用戶 dengjianbin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！