新加数据后刷新数据表格并将滚动条定位到新加入的数据的位置(适用于排序后的数据)。
一、通过设置滚动条到顶端的距离来控制滚动条的位置。
代码如下:
var tableHeight = $("#articletable tbody").height();//获取当前表格tvody的高度,articletable 为table的ID
SetScrollTop(tableHeight);
//控制滚动条的位置在最底部即展示出新添加的数据
function SetScrollTop(obj)
{
$("#tableDiv").scrollTop(height); //tableDiv为table容器Div的ID
}
注意:若是使用ajax局部的加载数据定位后的滚动条离最底部还有一个<tr>的高度。
二、将滚动条定位到想要显示的html标签的位置
//找到要定位的对象,这里是table里的最后一个tr
var LastTr = $("#tbody").find("tr")[$("#tbody").find("tr").length - 1];
SetScrollTop(LastTr);
function SetScrollTop(obj)
{
$("#tableDiv").animate({ scrollTop: obj.offsetTop }, "slow");
}
虽然这里的LastTr不是新加入的<tr>(LastT为旧数据的最后一个tr,相当于加入新数据后的倒数第二个tr),但是因为LastTr到滚动条底部的这段距离内没有其他内容,仅有新加入的<tr>,故将展示出新加入的数据。达到想要的效果。