新加数据后刷新数据表格并将滚动条定位到新加入的数据的位置

新加数据后刷新数据表格并将滚动条定位到新加入的数据的位置(适用于排序后的数据)。

一、通过设置滚动条到顶端的距离来控制滚动条的位置。

代码如下:

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>,故将展示出新加入的数据。达到想要的效果。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值