jQuery+Ajax+PHP+MySql无刷新分页源码实例教程

如何实现Ajax无刷新分页效果

<div class="lists"> 
    <ul id="ul_lists" class="clearfix"> 
    </ul> 
</div>

#ul_lists以列表的形式展现数据，信息包括商品图片和标题

CSS

.lists{width:740px;  margin:30px auto 0; position:relative} 
#ul_lists li{float:left;width:220px;height:240px;margin:0 6px 6px;border:1px solid #ddd;padding:5px;overflow:hidden} 
#ul_lists li img{width:220px; height:220px;margin:0 0 6px} 
.page{ margin:12px 0 20px;  text-align:center} 
.page span{margin:5px; font-size:14px}

接着通过函数getData() 获取当前页数据。我们利用$.ajax GET方式把参数page以json格式传到ajax.php。

function getData(page) { //获取当前页数据 
    $.ajax({ 
        type: 'GET', 
        url: 'ajax.php', 
        data: { 
            'page': page - 1 
        }, 
        dataType: 'json', 
        success: function(json) { 
            $("#ul_lists").empty(); 
            total_num = json.total_num; //总记录数 
            page_size = json.page_size; //每页数量 
            page_cur = page; //当前页 
            page_total_num = json.page_total_num; //总页数 
            var li = ""; 
            var list = json.list; 
            $.each(list, 
            function(index, array) { //遍历返回json 
                li += "<li><a href='#'><img src='" + array['pic'] + "'>" + array['title'] + "</a></li>"; 
            }); 
            $("#ul_lists").append(li); 
        }, 
        complete: function() { 
            getPageBar(); //js生成分页，可用程序代替 
        }, 
        error: function() { 
            alert("数据异常,请检查是否json格式"); 
        } 
    }); 
}

每次请求返回的商品放置在#ul_lists中。当数据完全加载完毕后，调用函数getPageBar()生成分页，也可用程序来实现分页。

function getPageBar() { //js生成分页 
    if (page_cur > page_total_num) page_cur = page_total_num; //当前页大于最大页数 
    if (page_cur < 1) page_cur = 1; //当前页小于1 
    page_str = "<span>共" + total_num + "条</span><span>" + page_cur + "/" + page_total_num + "</span>"; 
    if (page_cur == 1) { //若是第一页 
        page_str += "<span>首页</span><span>上一页</span>"; 
    } else { 
        page_str += "<span><a href='javascript:void(0)' data-page='1'>首页</a></span><span><a href='javascript:void(0)' data-page='" + (page_cur - 1) + "'>上一页</a></span>"; 
    } 
    if (page_cur >= page_total_num) { //若是最后页 
        page_str += "<span>下一页</span><span>尾页</span>"; 
    } else { 
        page_str += "<span><a href='javascript:void(0)' data-page='" + (parseInt(page_cur) + 1) + "'>下一页</a></span><span><a href='javascript:void(0)' data-page='" + page_total_num + "'>尾页</a></span>"; 
    } 
    $("#page").html(page_str); 
}