javascript - jQuery 数据表 - 意外的垂直滚动条

Question

我正在尝试在 jQuery 数据表中显示数据，但是我看到了意外的垂直滚动条。

fiddler : https://jsfiddle.net/8f63kmeo/15/

HTML:

<table id="CustomFilterOnTop" class="table table-bordered table-condensed" width="100%"></table>

JS

var Report4Component = (function () {
    function Report4Component() {
        //contorls
        this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
        //data table object
        this.customFilterOnTopGrid = null;
        //variables
        this.result = null;
    }
    Report4Component.prototype.ShowGrid = function () {
        var instance = this;       
        
        //create the datatable object
        instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
            columns: [
                    { title: "<input name='SelectOrDeselect' value='1' id='ChkBoxSelectAllOrDeselect' type='checkbox'/>" },
                { data: "Description", title: "Desc" },
                { data: "Status", title: "Status" },
                { data: "Count", title: "Count" }
            ],
            "paging": true,
            scrollCollapse: true,
            "scrollX": true,
            scrollY: "50vh",
            deferRender: true,
            scroller: true,
            dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
            buttons: [
                {
                    text: 'Load All',
                    action: function (e, dt, node, config) {
                        instance.ShowData(10000);
                    }
               }
            ],            
            columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox text-center',
                    targets: 0,
                    render: function (data, type, row) {
                        return '';
                    }
                }],
            select: {
                style: 'multi',
                selector: 'td:first-child',
                className: 'selected-row selected'
            }
        });        
    };
   
    Report4Component.prototype.ShowData = function (limit) {
        if (limit === void 0) { limit = 2; }
        var instance = this;
        instance.customFilterOnTopGrid.clear(); //latest api function
        instance.result = instance.GetData(limit);
        instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
        instance.customFilterOnTopGrid.draw();
    };
    Report4Component.prototype.GetData = function (limit) {
        //structure of the response from controller method
        var resultObj = {};
        resultObj.Total = 0;
        resultObj.RecordList = [];
        for (var i = 1; i <= limit; i++) {
            resultObj.Total += i;
            var record = {};
            record.Description = "Some test data will be displayed here.This is a test description of record " + i;
            record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
            record.Count = i;
            resultObj.RecordList.push(record);
        }
        return resultObj;
    };
    return Report4Component;
}());
$(function () {
    var report4Component = new Report4Component();
    report4Component.ShowGrid();  
    report4Component.ShowData();
});
function StopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    }
    else {
        evt.cancelBubble = true;
    }
}

问题:

我想知道为什么会出现垂直滚动条以及为什么我看到的计数不正确...？是因为我的数据表有多行吗？因为我已经将 scrolly 设置为 50vh，所以我希望显示所有行。

注意:

表格也应该支持大数据。我为此目的启用了滚动条，因为它是应用程序设计所必需的。要验证是否单击“全部加载”按钮。

任何建议/帮助将不胜感激？

Answer 1

您只需要删除属性“scroller: true”即可解决您的问题。

演示请查看https://jsfiddle.net/dipakthoke07/8f63kmeo/20/