Fatal编程技术网
  • jquery/
  • Jquery DataTables修复了宽表中标题与列不对齐的问题 问题

Jquery DataTables修复了宽表中标题与列不对齐的问题 问题

jquery datatables

Jquery DataTables修复了宽表中标题与列不对齐的问题 问题,jquery,datatables,Jquery,Datatables,当使用sScrollX、sScrollXInner和/或sScrollY实现固定标题表及其内部内容滚动时，表格标题与Chrome和IE中的主体其余部分不对齐。另一方面，Firefox完美地显示了它们 使用1.9.4版，据我所知，只有当有大量宽度波动的数据，并且单词非常长/不可压缩，与小单词组合在同一列中时，才会出现此问题。此外，所讨论的表格需要相当宽 所有这些因素都体现在以下方面： 输出 铬： 即： Firefox 建议的解决办法 这些解决方案以前已经提出过，但对我的实施没有影响。由于这些

当使用
sScrollX
、
sScrollXInner
和/或
sScrollY
实现固定标题表及其内部内容滚动时，表格标题与Chrome和IE中的主体其余部分不对齐。另一方面，Firefox完美地显示了它们

使用1.9.4版，据我所知，只有当有大量宽度波动的数据，并且单词非常长/不可压缩，与小单词组合在同一列中时，才会出现此问题。此外，所讨论的表格需要相当宽

所有这些因素都体现在以下方面：

输出 铬：

即：

Firefox

建议的解决办法 这些解决方案以前已经提出过，但对我的实施没有影响。由于这些建议中的一些，我设置了一个干净的普通演示，因为我想确保没有其他代码产生这种效果

  • 关闭/删除我的所有css
  • setTimeout（函数（）{oTable.fnAdjustColumnShizing（）；}，10）
  • 依次调用
    oTable.fnFilter（“x”，0）
    和
    oTable.fnFilter（“，0）
  • “sScrollXInner”：“100%”
  • 去掉所有的宽度
对于未对齐的标题，我找到的唯一解决方案是去掉
sScrollX
和
sScrollY
，但这不能算作解决方案，因为您失去了固定标题/内部内容滚动功能。可悲的是，这只是一次临时的黑客攻击，而不是修复

注 编辑/播放最新版本

我尝试了各种组合，通过使用链接
http://jsfiddle.net/pratik136/etL73/#REV#
where
1下面是一种实现固定标题表的方法，我不知道它是否足以满足您的需要。
变化如下：


  • 使用“bScrollCollapse”而不是“sScrollXInner”
    • 

  • 不要使用字段集包装表格
    • 

  • 添加一个“div.box”css类
    • 
它似乎在我的本地机器上完全工作，但在使用小提琴时却不能完全工作。
看起来Fiddle添加了一个css文件（normalize.css），在某种程度上破坏了插件css（我很确定我也可以在Fiddle添加一些css明确的规则中充分工作，但现在没有时间进一步研究）
    
下面是我的工作代码片段。
希望这能有所帮助
    

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
  <script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>

 <style type='text/css'>
       div.box {
       height: 100px;
       padding: 10px;
       overflow: auto;
       border: 1px solid #8080FF;
       background-color: #E5E5FF;
   }

  .standard-grid1, .standard-grid1 td, .standard-grid1 th {
    border: solid black thin;
   }
</style>

<script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    var stdTable1 = $(".standard-grid1").dataTable({
        "iDisplayLength": -1,
        "bPaginate": true,
        "iCookieDuration": 60,
        "bStateSave": false,
        "bAutoWidth": false,
        //true
        "bScrollAutoCss": true,
        "bProcessing": true,
        "bRetrieve": true,
        "bJQueryUI": true,
        "sDom": '<"H"CTrf>t<"F"lip>',
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "sScrollX": "100%",
        //"sScrollXInner": "110%",
        "bScrollCollapse": true,
        "fnInitComplete": function() {
            this.css("visibility", "visible");
        }
    });
});
});

</script>


</head>
<body>
<div>
    <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
        <thead>
          <!-- put your table header HTML here -->
       </thead>
       <tbody>
          <!-- put your table body HTML here -->
        </tbody>
    </table>
</div>
</body>
</html>

    

    
分区箱{
高度：100px；
填充：10px；
溢出：自动；
边框：1px实心#8080FF；
背景色：#E5FF；
}
.standard-grid1、.standard-grid1 td、.standard-grid1 th{
边框：纯黑细；
}
$（窗口）。加载（函数（）{
$（文档）.ready（函数（）{
var stdTable1=$（“.standard-grid1”）.dataTable({
“iDisplayLength”：-1，
“bPaginate”：对，
“iCookieDuration”：60，
“bStateSave”：false，
“bAutoWidth”：假，
//真的
“bScrollAutoCss”：正确，
“bProcessing”：正确，
“bRetrieve”：没错，
“bJQueryUI”：没错，
“sDom”：“t”，
“阿伦提努”：[[25,50,100，-1]，[25,50,100，“全部”]，
“sScrollX”：“100%”，
//“sScrollXInner”：“110%”，
“崩溃”：没错，
“fnInitComplete”：函数（）{
css（“可见性”、“可见”）；
}
});
});
});

    添加
    表格布局：固定了表格样式（css或样式属性）
    
浏览器将停止应用其自定义算法来解决大小约束
    
在web上搜索有关在固定表格布局中处理列宽的信息（这里有两个简单的SO问题：和）
    
显然：缺点是你的栏的宽度不能适应它们的内容
    

    
[编辑]当我使用FixedHeader插件时，我的答案有效，但datatable论坛上的一篇帖子似乎表明，在使用
    sScrollX
    选项时会出现其他问题：
    

    

    我将设法解决这个问题。
    下面的代码有效。至少更正了I.E 9.0上的问题。希望这有帮助
    

    var oTable =  $('#tblList').dataTable({
    "sScrollY": "320px",
    "bScrollCollapse": true,
    });

    setTimeout(function(){
        oTable.fnAdjustColumnSizing();
    },10);

    

    我也遇到了同样的问题，这段代码解决了这个问题。我从这篇文章中得到了这个解决方案，但我必须调整时间间隔，使其工作
    

    setTimeout(function(){
        oTable.fnAdjustColumnSizing();
},50);

    

    最近也遇到了同样的问题，当我在css上尝试一些东西时，仍在寻找解决方案，请检查是否添加到您的单元格（th和td）
    
解决这个问题,；对我来说，我使用了一些html/css框架，在每个元素中添加一个值
    边框框
     编辑：
请参阅“固定标题”的最新版本：
    

    
这个
    
解决方案之一是自己实现滚动，而不是让DataTables插件为您实现滚动
    
我以您为例，注释掉了sScrollX选项。当此选项不存在时，DataTables插件将简单地将表按原样放入容器div中。因此，此表将伸出屏幕，为了解决这个问题，我们可以将它放入一个具有所需宽度和溢出属性集的div中—这正是上一条jQuery语句所做的—它将现有表包装到一个300px宽的div中。您可能根本不需要在包装div上设置宽度（在本例中为300px），我在这里设置了它，以便可以很容易地看到剪切效果。
而且要友好，不要忘记用类替换内联样式
    

    $(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});

    

    $（文档）.ready（函数（）{
var stdTable1=$（“.standard-grid1”）.dataTable({
“iDisplayLength”：-1，
“bPaginate”：对，
“iCookieDuration”：60，
“bStateSave”：false，
“bAutoWidth”：假，
//真的
“bScrollAutoCss”：正确，
“bProcessing”：正确，
“bRetrieve”：没错，
“bJQueryUI”：没错，
//“sDom”：“t”，
“sDom”：“t”，
“阿伦提努”：[25,50,100，-1]，[2]

    $(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});

    

    .scrollStyle
 {
  height:200px;overflow-x:auto;overflow-y:scroll;
 }

    

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

    

    table.display td {
padding: 0px 5px;
}
/* this is needed for IE and Firefox if using horizontal scroll*/
table{
    max-width: none;
    min-height: 0%;
}

    

    jQuery('#dashboard').dataTable({
    "sEcho": "1",

    "aaSorting": [[aasortvalue, 'desc']],
    "bServerSide": true,
    "sAjaxSource": "NF.do?method=loadData&Table=dashboardReport",
    "bProcessing": true,
    "sPaginationType": "full_numbers",
    "sDom": "lrtip", // Add 'f' to add back in filtering
    "bJQueryUI": false,
    "sScrollX": "100%",
    "sScrollY": "450px",
    "iDisplayLength": '<%=recordCount%>',
    "bScrollCollapse": true,
    "bScrollAutoCss": true,
    "fnInitComplete": function () {
        jQuery('.dataTables_scrollHead').css('width', '98%'); //changing the width
    },
    "fnDrawCallback": function () {
        jQuery('.dataTables_scrollHead').css('width', '98%');//changing the width
    }
});

    

    var Tables=$('##table_ID').html();
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
Tables= Tables.replace(expr, '><');
$('##table_ID').html(Tables);
oTable = $('##table_ID').dataTable( {
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": false,
  "bSort": true,
  "bInfo": true,
  "bAutoWidth": false,
  "sScrollY": ($(window).height() - 320),
  "sScrollX": "100%",
  "iDisplayLength":-1,
  "sDom": 'rt<"bottom"i flp>'
} );

    

    .dataTables_scrollHeadInner {    /*for positioning header when scrolling is applied*/
padding:0% ! important
}

    

    "responsive": true,
"bAutoWidth": true

    

    table.dataTable tbody th,table.dataTable tbody td 
{
     white-space: nowrap;
} 

    

    $( document ).ready(function()
{

    $('#monitor_data_voyage').DataTable( {
        scrollY:150,
        bSort:false,
        bPaginate:false,
        sScrollX: "100%",
        scrollX: true,
    } );

    setTimeout( function(){
       $('#monitor_data_voyage').DataTable().search( '' ).draw();
    }, 10 );

});

    

       $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .fixedColumns().relayout();

    

        _matchWidths: function (from, to) {
        var get = function (name) {
            return $(name, from)
                .map(function () {
                    return $(this).width();
                }).toArray();
        };

        var set = function (name, toWidths) {
            $(name, to).each(function (i) {
                $(this).css({
                    width: toWidths[i],
                    minWidth: toWidths[i]
                });
            });
        };

        var thWidths = get('th');
        var tdWidths = get('td');

        set('th', thWidths);
        set('td', tdWidths);
    },

    

        return $(this).width();

    

        return $(this).outerWidth();

    

    .dataTables_scrollHeadInner
{
     width: 640px !important;
}

    

    $(".panel-title a").click(function(){
    setTimeout( function(){
           $('#tblSValidationFilerGrid').DataTable().search( '' ).draw();
        }, 10 );
})

    

    $('#datatableId').on('draw.dt', function () {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
})