问题描述
我有一个datatable.js,我尝试在特定的行数(例如4.5行)上限制其高度,但是我对示例的行高(tr height)存有疑问,我使用maxdisplayedRow = 5:
function getRows(maxdisplayedRow) {
return $("#productDesignedFor-table tbody tr:lt("+maxdisplayedRow+")").toArray();
}
并且我试图用:
进行计算with rows = getRows()方法 和maxRows = 5
如果表上有5行,我将其减少以计算所有行高的4.5
function getTableHeightWithLastRowIsHalf(rows,maxRows) {
return tableHeight = rows.length === maxRows
? rows.reduce(function(acc,row,i) {
console.log(row.scrollHeight)
console.log({row: row})
const rowHeight = $(row).height();
return i !== maxRows - 1
? acc + rowHeight
: acc + rowHeight/2;
},0)
: false;
}
我在设置上将此方法称为:
initComplete: () => {
const maxdisplayedRow = getMaxdisplayedRow(); // = 5
const rows = getRows(maxdisplayedRow) // all rows less than 5 = [row].length < 5
$('.dataTables_scrollBody').css("max-height",getTableHeightWithLastRowIsHalf(rows,maxdisplayedRow));
}
所有这些功能都在$(document).ready()
上问题是:
当我使用控制台日志console.log($(row).height())
时,它会显示:59
但是console.log($(row))
有79
即使有row.scrollHeight
row.clientHeight
我尝试在函数juste上使用setTimeOut,以防所有css和html都被应用但没有结果。
问题是:
为什么同一对象给出不同的结果,因为这会导致计算问题?
解决方法
我找到了它,这是在应用高度后添加的滚动条,某些列根据下一行的文本采用了新的高度。