Question

如何向ajax数据表添加水平滚动条？我尝试使用“ ScrollX”：true，但是不起作用。

$(document).ready(function () {
    $('#myDataTable1').DataTable({       
        "ajax": {
            "dataType": 'json',
            "type": "GET",
            "url": "/DisplayUserProfile",  
            },

        "columns": [
            { "data": "PK_UserProfile" },
            { "data": "UserName" },

        ]
    });
});

Answer 1

这应该可以解决您的问题：

$(document).ready(function() {
    $('#myDataTable1').DataTable( {
        "scrollX": true,
        "ajax": {
            "dataType": 'json',
            "type": "GET",
            "url": "/DisplayUserProfile",  
            },

        "columns": [
            { "data": "PK_UserProfile" },
            { "data": "UserName" },

        ]
    } );
} );

更新我认为问题出在ajax请求上，因此您应该在ajax调用后添加scrollX。因此，您可以使用数据表事件使它起作用：

$(document).ready(function() {

   var s= $('#example').DataTable( {
        "ajax": 'https://www.mocky.io/v2/5c2cd0ec2e0000de52e877a1',

} );


s.one( 'draw', function () {
   $('#example').DataTable({
       destroy: true,
       "scrollX": true
    });
} );


} );

jsFiddle here

Answer 2

使用scrollX参数应该可以解决此问题。 https://datatables.net/reference/option/scrollX

$(document).ready(function () {
    $('#myDataTable1').DataTable({       
        "ajax": {
            "dataType": 'json',
            "type": "GET",
            "url": "/DisplayUserProfile",  
        },
        "columns": [
            { "data": "PK_UserProfile" },
            { "data": "UserName" },

        ],
        "scrollX": true
    });
});

Ajax数据表的水平滚动条

2 个答案: