1

私は初めてデータテーブルを操作していて、以下で説明する問題に遭遇しました。垂直スクロールを含めようとすると、列ヘッダーはすべての itz の位置合わせを失い、すべての列幅が縮小し、その結果、長さのヘッダー行が取得されますテーブル全体の半分。

私が気づいたもう1つのことは、thクラスのスタイルの幅が0pxになるということです。なぜそうなるのですか? 私が含めたjs部分、

$(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>

前もって感謝します ！

4

3 に答える 3

0

問題は、テーブルが空であることです。<thead>過去に同様の問題を見たことがありますが、それらは常にテーブルに/がないことが原因でした<tbody>。

HTMl を次のように変更します。

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

何が起こるか教えてください。

于 2012-09-04T08:59:24.490 に答える
0 
    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>
于 2012-07-23T08:01:29.253 に答える