数据表:如何在表初始化代码中放入变量

DataTables: how to put variable in table initialization code

本文关键字：代码 变量 初始化 数据表      更新时间：2023-09-26

我发现datattables插件非常美观和实用，直到您在代码开始时知道所有必要的参数。但是，在我的情况下，我希望根据检测到的文档的高度(60%的可用高度)改变参数scrollX。我知道这里我们谈论的是某种物体，但推和其他技巧没有帮助。下面是有问题的代码:

$(document).ready(function() {
table = $('#example').DataTable( {
language: {
info: "Show _START_ til _END_ of _TOTAL_ recs"   },
scrollY: "300px",
scrollX:        true,
scrollCollapse: true,
paging:         false,
rowReorder: false,
ordering: false,
fixedColumns:   {
    leftColumns: 2,
    rightColumns:0}     
   });
});

，而不是"300px"，我打算放一些包含文档高度的Javascript变量，但经典的对象操作没有显示结果。所以，我试着检查:

console.log(Table.scrollX);

，但得到错误。然后试图使表作为公共var，但随后得到未定义的值。还:

table.push({'scrollX': '300px'});

和一些奇怪的组合，但是没有。有什么建议吗?谢谢。

类似

$(document).ready(function() {
  var myScrollY = '300px';
  var table = $("#example").DataTable({
    scrollY: myScrollY
  });
);

我在我的项目中使用的解决方案:

需要处理resize事件。在处理程序中计算表的scrollable部分的可用面积:

$( window ).resize(function() {
   var scrollWidth = "300px"; 
   // scrollWidth should be calculated based on your needs
   table.find( '.dataTables_scrollBody' ).width( scrollWidth );
})

我对height

做了同样的处理

:

设置scrollY: "300px"只对初始化有效。

当您更改文档的height时，事件domready被触发，您必须重新计算datatables的scrollable区域的新height:

$( window ).resize(function() {
   var newScrollHeight = Number($(window).height() - $('#IdOfAnElement').height() - other heights) + "px"; // 
   table.find( '.dataTables_scrollBody' ).height( newScrollHeight );
})

.dataTables_scrollBody是datatables中包含scrollable区域的元素

相关文章：