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

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

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

代码如下:

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

要实现滚动条在加载数据后停留在新加数据的一条的位置,可以通过以下步骤来实现: 1. 在滚动事件中,判断当前滚动条位置是否超过了页面的高度减去窗口的高度。如果超过了,说明滚动条已经滚动到了页面底部。 2. 当滚动条滚动到页面底部时,可以通过 AJAX 或其他方式加载数据。在加载数据的回调函数中,可以计算新加数据的高度,以便后续将滚动条定位新加数据位置。 3. 计算新加数据的高度后,将滚动条位置设置为当前滚动条位置加上新加数据的高度即可。 以下是一个简单的示例代码: ```javascript var lastScrollTop = 0; var newDataHeight = 0; // 新加数据的高度 window.addEventListener("scroll", function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var windowHeight = window.innerHeight; var documentHeight = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ); if (scrollTop > lastScrollTop && scrollTop + windowHeight >= documentHeight) { // 滚动条到达页面底部,加载数据 ajaxLoadData(function(newData) { // 计算新加数据的高度 newDataHeight = newData.offsetHeight; // 将数据添加到页面中 document.body.appendChild(newData); // 将滚动条定位新加数据位置 window.scrollTo(0, scrollTop + newDataHeight); }); } lastScrollTop = scrollTop; }); function ajaxLoadData(callback) { // 发送 AJAX 请求,获取数据 // ... // 在回调函数中返回数据 callback(newData); } ``` 在代码中,我们定义了一个变量 `newDataHeight` 来保存新加数据的高度。在滚动事件中,当滚动条到达页面底部时,我们调用 `ajaxLoadData` 函数来加载数据。在加载数据的回调函数中,我们计算新加数据的高度,并将数据添加到页面中。最后,我们将滚动条位置设置为当前滚动条位置加上新加数据的高度,以便将滚动条定位新加数据位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值