datatable实现滚动加载

    一般来说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
    }
    } );
} );

猜你喜欢

转载自blog.csdn.net/dk2290/article/details/79392612