无法在thead上隐藏Jquery DataTable垂直滚动条

时间:2017-03-09 17:01:46

标签: jquery datatables

我正在使用jquery DataTables和bootstrap。

在我的thead上出现一个禁用的垂直滚动条,如下所示:

enter image description here

我正试图摆脱滚动条,但没有成功。

//Fixed Columns (Freeze Panel)
        $(function () {            
            var table = $('#grdAfiliados').DataTable({
                "fnInitComplete": function () {
                    // Disable scrolling in Head
                    $('.dataTables_scrollHead').css({                        
                        'overflow-x': 'hidden !important',
                        'overflow-y': 'hidden !important'                        
                    });

                    // Disable TBODY srcoll bars
                    $('.dataTables_scrollBody').css({
                        'overflow-y': 'scroll',
                        'overflow-x': 'hidden',
                        'border': '0'
                    });

                    // Enable TFOOT scoll bars
                    $('.dataTables_scrollFoot').css('overflow', 'auto');

                    // Sync TFOOT scrolling with TBODY
                    $('.dataTables_scrollFoot').on('scroll', function () {
                        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                    });
                },
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                fixedColumns: {
                    leftColumns: 1
                }
            });
        });

修改

我意识到使用“fixedColumns”参数时会出现问题。

2 个答案:

答案 0 :(得分:0)

您可以仅隐藏包含滚动元素的div,如下所示:

<style type="text/css">
.DTFC_RightBodyLiner{
 opacity: 0;
}
</style>

答案 1 :(得分:-1)

$(documemt).on('event name','selector',function(){ });

// cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

$(document).ready(function() {
$(document).on('change',"#category",function() {
    var id=$(this).val();
    var dataString = 'id='+ id;

    $.ajax
    ({
        type: "POST",
        url: "makes.php",
        data: dataString,
        cache: false,
        success: function(html) {
            $(".makes").html(html);
        } 
    });
});

第4步:

{
    "aps" : {
        "content-available" : 1,
        "alert": "We have something great for you!!"
    },
    "content-id" : 1015
}