HTML代码:
<div class="msg-box"> <div class="msg-list set-scrollbar"> <div class="loading"></div> <table class="msg-list-table"> <tr> <th style="width:60px">客户机</th> <th style="width:200px">内容</th> <th style="width:150px">时间</th> <th style="width:70px">操作</th> </tr> <tbody id="msgList"></tbody> <script id="msgListTmp" type="text/x-dot-template"> {{ for(var i in it){ }} <tr> <td>{{=it[i].user_host}}</td> <td>{{=it[i].msg_data}}</td> <td>{{=it[i].msg_date}}</td> {{? it[i].msg_usable == 0}} <td><a onclick="doMsg('{{=it[i].id}}')">处理</a></td> {{??}} <td>已处理</td> {{?}} </tr> {{ } }} </script> </table> </div> </div>JavaScript代码:
//定义初始页面 var msgCurPage=1; //首次获取消息列表 getMsgList(msgCurPage); //滚动加载更多 $('.msg-box .set-scrollbar').scroll(function(){ var scrollTop =$(this).scrollTop(); var thisH = $(this).height(); var tableH = $(this).find('table').height(); if(tableH - thisH - scrollTop <= 0){ msgCurPage++; getMsgList(msgCurPage); } }) //获取更多消息列表 function getMsgList(msgCurPage){ $('.msg-box .msg-list .loading').text('加载中...'); ajax(URL,'msg','list',{ t : token, page : msgCurPage, size : 10 },function(r){ if(r.code == 200){ if(r.data.length>0){ $('.msg-box .msg-list .loading').show(); setTimeout(function(){ var box = doT.template(document.querySelector("#msgListTmp").innerText); document.querySelector("#msgList").innerHTML = document.querySelector("#msgList").innerHTML + box(r.data); $('.msg-box .msg-list .loading').hide(); },1000) }else{ $('.msg-box .msg-list .loading').text('没有更多消息了!').show(); setTimeout(function(){ $('.msg-box .msg-list .loading').hide(); },1000) } }else{ $.fkTip(r.msg); } }) }