Question

我第一次使用数据表，并对下面解释的问题感到震惊。每当我试图包含垂直滚动时，列标题会丢失所有itz对齐，所有列宽都会减小，因此会得到标题行，其长度是整个表的一半。

我注意到的另一件事是，在第一类风格宽度变为0px时，任何人都可以说它为什么会这样？ js part i ve included，

$(document).ready(function() {

                $.ajax({
                    type : "GET",
                    url :"",

                    dataType : "json",
                    success : function(data) 
                    {
                            $('#customers').dataTable(
                            {
                            "aaData":data.response,
                            "aoColumns": [
                            { "sTitle": "Rendering Engine", "bSortable": false},
                            { "sTitle": "Broswers", "bSortable": false },
                            { "sTitle": "Platform", "bSortable": false }
                            ],
                         "sScrollY": "250px",
                        "iDisplayLength": 200,
                        "bFilter": false,
                        "bLengthChange": false,
                        "bAutoWidth": false
                           });
                    }   
                });
            });

和html部分

<table id="customers"></table>

提前致谢！

Answer 1

我通过使用overflow：auto

包装“dataTable”表解决了这个问题

.dataTables_scroll
{
    overflow:auto;
}

并在dataTable初始化

之后添加此JS

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

不要使用sScrollX或sScrollY，然后删除然后自己添加一个div包装器，它会做同样的事情。

Answer 2

    success : function(data) 
                {
                        $('#customers').dataTable(
                        {
                        "aaData":data.response,
                        "aoColumns": [
                        { "sTitle": "Rendering Engine", "bSortable": false},
                        { "sTitle": "Broswers", "bSortable": false },
                        { "sTitle": "Platform", "bSortable": false }
                        ],
                     "sScrollX": "100%",
                     "sScrollY": "250px",
                    "iDisplayLength": 200,
                    "bFilter": false,
                    "bLengthChange": false,
                    "bFilter": true,
                    "bSort": true,
                    "aLengthMenu": [50,100,250,500],
                    "sPaginationType": "full_numbers"
                       });
                }   





  //use this style
 <style type="text/css">

       .dataTables_length {
       float: left;
       width: 40%;
        }

    .dataTables_filter {
      float: right;
      text-align: right;
      width: 50%;
      } 

  .dataTables_info {
   float: left;
   width: 50%;
  vertical-align: middle;
  /*min-height: 100%;*/
  /*position: absolute;*/
  }
</style>

Answer 3

问题是你的桌子是空的。我在过去看到过类似的问题，这些问题总是由于您的表格没有<thead> / <tbody>而造成的。

将您的HTMl更改为：

<table id="customers">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

让我知道会发生什么。

Jquery数据表列标题宽度问题与垂直滚动

3 个答案: