移动端获取数据列表

第一步 编写后台数据接口

    @Clear
    public void news() {
        render("list_news.html");
    }

    @Clear
    public void getNewsList() {
        Integer pageNum = this.getParaToInt("pageNum" , 1);
        /****** 返回包含 page对象 的result ***********/
        renderJson(Blog.dao.getListJson( pageNum , 10 ));
    }

第二步 在 list_news.html 中编写html结构代码

1. 为该列表自定义一个id：newsList
2. 为父级容器#newsList 写一个请求地址标记 data-url
3. 为父级容器#newsList 写一个模板的选择标记，用于据此选择模板。该模板务必写入script标签中。
4. 在父级容器#newsList 中写一个加载更多的按钮，固定class为：.getMoreDataBtn，该按钮href指向父级容器。

<!--新闻列表 s-->
<div id="newsList" data-url="${ctx}/list/getNewsList?type=${type}" data-modal="#listItem">

    <!--新闻模板s-->
    <script type="text/html" id="listItem">
        <div class="item">
            <div  class="img-right">
                <a href="${ctx}/info/blog/N.blogId.L" class="right">
                    <img src="${ctx}N.firstPic.L" alt="">
                </a>
            </div>
        </div>
    </script>
    <!--新闻模板e-->

    <a href="#newsList" class="getMoreDataBtn">加载更多…</a>


</div>

第三步 引入加载数据的js代码

//加载数据
var moreDataJson = {
    dealData : function(){

    } ,
    completed : function(){

    }
} ;
(function($){
    $.fn.fillHtml = function(jsons){ //该方法用于将json数据填充至html中，返回html字符串
        var obj = this ;
        var html = obj.getInnerHtml() ;
        for (key in jsons) {
            var holder = new RegExp("N." + key + ".L" , "g") ;
            html = html.replace( holder , jsons[key]);
        }
        return html ;
    } ;
    $.fn.getInnerHtml = function(){
        var obj = this ;
        var parent = $('<div></div>');
        parent.html(obj);
        return parent.html();
    }  ;
    $.fn.getMoreData = function( dealFn ){
        //初始化回调函数
        if(null == moreDataJson ) {
            moreDataJson = dealFn ;
        }
        var ts = this ;
        var btns = ts.find('.getMoreDataBtn') ;
        var modals = ts.data('modal') ;
        var url = ts.data('url') ;
        var pageNum = !ts.attr('data-pageNum') ? 1 : ts.attr('data-pageNum') ;
        $.post(url ,{ pageNum : pageNum }, function(result){
            ts.attr('data-pageNum' , ++pageNum);
            var list = result.page.list ;

            //处理result的函数
            if(jQuery.isFunction(moreDataJson.dealData)){
                moreDataJson.dealData(result);
            }

            //获取列表html
            var listObj = getHtmlByJsons( modals , list);
            btns.before(listObj);

            //处理尾部
            if( result.page.totalPage == result.page.pageNumber  ){
                if(result.page.pageNumber > 1){
                    btns.before('<div class="endOfFooter">Sorry，没有更多数据啦~~</div>');
                }
                btns.remove();
            }

            //处理result的函数
            if(jQuery.isFunction(moreDataJson.completed)){
                moreDataJson.completed(result);
            }

        },'json');
    } ;
})(jQuery);

//获得更多数据
$('.getMoreDataBtn').on('click',function(e){
    e.preventDefault();
    var ts = $(this) ;
    $(ts.attr("href")).getMoreData(moreDataJson);
});

//获得列表html
function getHtmlByJsons( modalId , jsons , deal){
    var arrs = [] ;
    var baseHtml = $(modalId).html();
    for (var i = 0; i < jsons.length; i++) {
        var jsonObj = jsons[i];
        var clones = $(baseHtml).clone(true);
        var html = clones.fillHtml(jsonObj);
        clones = $(html) ;
        if(jQuery.isFunction(deal)){
            deal(clones , i ) ;
        }
        arrs.push(clones.getInnerHtml()) ;
    }
    return $(arrs.join('')) ;
}

第五步 在html中进行调用

1. 调用时候可以传入一个json参数，该参数含有两个fn 。
2. 第一个是dealData , 用于在拼接html之前，处理请求到的数据，可以接收请求到的result参数 ；
3. 第二个是 completed ， 用于完成所有的操作以后 ， 进行额外的操作 ， 可以接收请求到的result参数 。

$('#newsList').getMoreData({
       dealData : function(result){
           var list = result.page.list ;
           for (var i = 0; i < list.length; i++) {
               var obj = list[i];
               var minute = obj.minute ;
               var time ;
               if ( !minute || minute > 3*24*60) {
                   time = obj.time ;
               }else if (minute < 60) {
                   time = minute + "分钟前" ;
               }else if (minute > 24*60) {
                   var day = parseInt(minute/(24*60)) ;
                   time = day + "天前" ;
               }else {
                   var  hour = parseInt(minute/60) ;
                   time = hour + "小时前" ;
               }
               obj['time'] = time ;
           }
       } ,
       completed : function(result){
        }
    });