一般来说datatable都是默认使用“paging”:true,这一属性来控制全局的表格翻页。效果大致如下图:
但是有时候你也会用到滚动条式的翻页方式,类似下面这种:
这时,你只需要加上以下两个属性即可。
scrollY: 1000,
scroller: {
loadingIndicator: true
},
其中scrollY表示:定义一个高度,当列表内容超过这个高度时,显示垂直滚动条。
scroller表示开启滚动翻页。
下面是官网论坛上给出的一个demo:
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
serverSide: true,
ajax:{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
},
dom: "frtiS",
scrollY: 200,
deferRender: true,
scroller: {
loadingIndicator: true
}
} );
} );