Ajax+json 实现无刷新分页

发布于 / 未分类 / 0 条评论

嗯。最近做项目的时候用到了分页,使用了Ajax和json来实现,可以在不刷新页面的前提下加载更多内容。简单记录一下。首先需要定义一个ul,这里把它的id设为xm以便于Jquery定位。分页的Js代码如下。

var page = 1;
$(function() {
    loadData(0);
    function loadData(flag) {
        var params = {};
        params.page = page;
        params.item = 20;//每页请求的个数
        $.ajax({
            url: "XXXXXXXXXXX",//请求的页面
            data: params,
            dataType: "json",
            success: function (r) {
                var data = r.rows, html = '';
                for (var i = 0, len = data.length; i < len; i++) {
                    var num = data[i].RowNumber;
                    var xmmc = data[i].XMMC;
                    html += '<li>'+num+'、'+xmmc+'</li>';
                }
                if (data.length == 20) {
                    html += '<li class="find-more">more</li>';
                } else if ((data.length < 20) && (page != 1)) {
                    html += '<li class="no-more">———没有更多了———</li>';
                }
                if (flag == 1) {
                    $("#xm").html(html);
                    $('#xm').listview('refresh');
                } else {
                    $("#xm").append(html);
                    $('#xm').listview('refresh');
                }
                $(".find-more").click(function () {
                    $(".find-more").parent().find(".find-more").remove();
                    page = page + 1;
                    loadData(0);
                });
            }
        });
    }
    $("#findByName").click(function () {
        page = 1;
        loadData(1);
    });
})

查询语句如下

select top {#item#} * from 
  (select  ROW_NUMBER() OVER (ORDER BY ORDER_INDEX desc) AS RowNumber,* from MALL_XM where flag='1') c 
  where RowNumber > {#item#} *(convert(int,{?page?})-1) 

转载原创文章请注明,转载自: everglow » Ajax+json 实现无刷新分页
Not Comment Found