效果和方法完全由自己写js控制实现，这边写下流程和原理。
STEP1：
表格采用bootstrap效果样式实现。
STEP2：
写好后台调用数据的接口，可以使前台ajax可以通过调用接口来获取后台的分页数据
STEP3：
前台调用代码示例：
$.ajax(
{
url: '@Url.Action("XXXFlightPartial", "XXXBSAttention")',
type: 'POST',
dataType: 'text',
cache: false,
data: { .............},
timeout: 50000,
error: function () {
alert("Time Out！");
},
success: function (result, status, xmlHttp) {
if (result.indexOf('/Account/Login') > -1) {
window.location.href = "@Url.Action("Login", "Account")";
}
else {
$('#loadFlight').empty();
$('#loadFlight').html(result);
}
}
});
}
返回result的接口由自己控制，可以是直接的html代码，也可以是json结果集，通过js处理后绑定到table中。
STEP4：
这边最重要的讲解是，监控滚动条，滚动到底部的时候触发ajax向后台请求新数据，格式化后append到table的后部，在这边加载的时候放一个延时加载中的样式动图和说明，比如：正在加载中... 。
在append数据前再删除正在加载的样式和说明。
相关代码如下：
<script type="text/javascript">
//美化内部滚动条
$('#tScroll').niceScroll({
cursorcolor: "#ccc",//#CC0071 光标颜色
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
cursorwidth: "5px", //像素光标的宽度
cursorborder: "0", // 游标边框css定义
cursorborderradius: "5px",//以像素为光标边界半径
autohidemode: false //是否隐藏滚动条
});
//初始化排序
$("#dynamic-table").tablesorter();
//排序的方向
$(".thclass").click(function(){
if($(this).hasClass("sorting"))
{
$(".thclass").removeClass("sorting_asc").addClass("sorting");
$(".thclass").removeClass("sorting_desc").addClass("sorting");
$(this).removeClass("sorting").addClass("sorting_asc");
}
else if($(this).hasClass("sorting_asc"))
{
$(".thclass").removeClass("sorting_asc").addClass("sorting");
$(".thclass").removeClass("sorting_desc").addClass("sorting");
$(this).removeClass("sorting").addClass("sorting_desc");
}
else
{
$(".thclass").removeClass("sorting_asc").addClass("sorting");
$(".thclass").removeClass("sorting_desc").addClass("sorting");
$(this).removeClass("sorting").addClass("sorting_asc");
}
});
var timer;
//滚动条状态
var stop = false;
//滚动条监控
$(document).ready(function () {
var clientHeight = 550;
//距下边界长度/单位px
var range = 0;
//设置加载最多次数
var maxnum = @(totalRecord/20);
var num = 1;
var totalheight = 0;
//水平滚动条值
var lastLeftScroll=0;
//垂直滚动条值
var lastRightScroll=0
//主体元素
var main = $("#dynamic-table tbody");
$(".tScroll").scroll(function () {
if (stop)
return;
//判断是不是左右滚动条
var scLeft= $(".tScroll").scrollLeft();
if(scLeft!=lastLeftScroll)
{
lastLeftScroll=scLeft;
return;
}
//滚动条距顶部距离
var srollPos = $(".tScroll").scrollTop();
//滚动方向判断
var directionSroll;
if(srollPos<lastRightScroll) {
directionSroll=false; //向上滚动
} else {
directionSroll=true;
}
lastRightScroll=srollPos;
//监听鼠标滚动结束事件
$("#flowThead").css({"display":"none"});
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function(){
if(srollPos>40)
{
$("#flowThead").css({"display":"block"});
$("#flowThead").css({"top":srollPos-1,"position":"absolute"});
$("#dynamic-table").css({"top":0,"position":"absolute"});
}
else
{
$("#flowThead").css({"display":"block"});
$("#flowThead").css({"top":0,"position":"absolute"});
$("#dynamic-table").css({"top":44,"position":"absolute"});
}
},400);
totalheight = parseFloat(clientHeight) + parseFloat(srollPos);
if (($("#dynamic-table").height() - range) <= totalheight && num != maxnum) {
stop = true;
@{
int HeaderCount = columnHeaders.Split(',').Count()+6;
}
main.append("<tr id='loadimg'> <td colspan='@(HeaderCount)'><img src='../Resource/BSResource/front-style/images/input-spinner.gif' />loading data...</td></tr>")
$('#tScroll').niceScroll().resize();
setTimeout(loadData, 1000);
num++;
}
});
});
// 下拉加载最新的数据
function loadData() {
var main = $("#dynamic-table tbody");
$("#loadimg").remove();
$.ajax(
{
url: '/BSAttention/FlightPartialByPage',
type: 'POST',
dataType: 'text',
cache: false,
data: { "DepartCode": "@(departCode)", "DescentCode": "@(descentCode)", "PageIndex": @(pageindex+1), "SelectMode": "@(selectMode)", "Sort": "sortflight,asc", "ColumnHeaders": "@(columnHeaders)", "IsFirst": 1 },
timeout: 50000,
error: function () {
alert("Time Out！");
},
success: function (result, status, xmlHttp) {
main.append(result);
$('#tScroll').niceScroll().resize();
$("#dynamic-table").trigger("update");
}
});
stop = false;
}
//判断返回值是否是空
var isArray = function(obj) {
return (Object.prototype.toString.call(obj) === '[object Array]' && obj.length>0);
}
//获取弹出框View
function GetFlowControls(id,callsign)
{
$.ajax(
{
url: '/AjaxService/vffcHandler.ashx',
type: 'GET',
cache: false,
dataType:"json",
data:{stype:"vf",sid:id},
timeout: 50000,
error: function () {
alert("Time Out！");
console.log(result);
},
success: function (result, status, xmlHttp) {
$("#viewModalLabel").html("FLOW CONTROL INFO-"+callsign);
if(!isArray(result)){
$('#viewModalDiv').css({"width":600});
$('#viewContent').html("There have no flow control information about this flight.");
}
else
{
var tableValue="<table class=\"table\" style='table-layout:fixed ; width:100%;'><tr><th style='width:150px'>Source</th><th style='width:200px'>Start Time</th><th style='width:200px'>End Time</th><th class=\"thfixed\">Description</th><th style='width:200px'>Record Time</th></tr><tbody>";
var index=-1;
$.each(result,function(i,o)
{
index=i;
tableValue+="<tr><td><a class =\"linkB\" target=\"_blank\" href=\"/FlowControl/RealTimeFlowControl/" + o.Id +"\" title=\"see the detail\">"+o.Source+"</a></td><td style='width:200px'>"+o.StartTime+"</td><td style='width:200px'>"+o.EndTime+"</td><td>"+o.DescriptionEnglish+"</td><td style='width:200px'>"+o.RecordTime+"</td></tr>";
});
tableValue+="</tbody></table>";
$('#viewModalDiv').css({"width":1200});
$('#viewContent').html(tableValue);
}
}
});
}
</script>
文章评论