bootstrap table getScrollPosition获取当前位置,配合滚动事件判断是否快到底部了,可以实现滚动到底部加载更多的数据,类似于手机上往下滑动加载更多数据。
参数名称 | |
无 |
//获取当前位置
var pos= $('#table').bootstrapTable('getScrollPosition');
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
<link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
<script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
<title>bootstrap table scrollTo在线例子</title>
<style>
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
</style>
</head>
<body>
<div id="toolbar">
<button onclick="f1()">获取当前位置</button>
</div>
<div class="table-demo">
<table id="table"></table>
</div>
<script>
//设置需要显示的列
var columns = [{
field: 'Id',
title: '编号'
}, {
field: 'ProductName',
title: '名称'
}, {
field: 'StockNum',
title: '库存'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
toolbar:"#toolbar",
columns: columns,
data: getData(),
height:500,
pagination:true,
pageNumber:1,
pageSize:60,
});
function getData()
{
var data = [];
for (var i = 0; i < 60; i++)
{
var item = {
Id: i,
ProductName: 'iphone',
StockNum:i+20000
};
data.push(item);
};
return data;
}
function f1()
{
var pos= $('#table').bootstrapTable('getScrollPosition');
alert(pos);
}
</script>
</body>
</html>