2016-11-09 61 views
0

我想显示数据在jQuery数据表中但我看到意想不到的垂直滚动条。jQuery datatable - 意外的垂直滚动条

提琴手: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; 
    } 
} 

问题:

enter image description here

我很奇怪,为什么垂直滚动条出现,为什么我看到了一个不正确的个性化......?是否因为我的数据表有多行的行?由于我已经将滚动设置为50vh,因此我预计将显示所有行。

说明:

该表也应该支持大数据。我已经为此目的启用了滚动器,因为它是根据应用程序设计需要的。验证点击“全部加载”按钮。

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

回答