dom选项在dataTables中如何工作?

huangapple go评论59阅读模式
英文:

How does the dom option work in dataTables?

问题

我已经创建了一个带有DataTables的表格,但我不想在底部显示表格摘要,因为我没有使用分页。

我已经阅读了Dom选项文档,但它没有提供示例。它只是说:

i - 表格信息摘要

我认为它应该放在表格构造对象中,但我不确定i与表格的这部分有什么关系。

这是我尝试过的:

function buildFlagTable(fcp){
  flagTableData = getFlagTableData(fcp)
  $('#flagTable').DataTable({
    data: flagTableData,
    columns: flagTableCols,
    paging:false,
    fixedHeader:true,
    scrollY:400,
    dom: { i: dontShowSummary(???) }
  })
}

到目前为止,给dom设置任何值(甚至是一个空对象{})似乎都会完全破坏表格,什么都不会显示。

dom选项实际上是如何工作的?

英文:

I have created a table with DataTables, but I don't want the table summary at the bottom because I'm not using pagination.

dom选项在dataTables中如何工作?

I have read through the Dom Option Documentation, it doesn't show an example. It just says:

> i - Table information summary

I think it would go in the table constructor object, but I'm not sure how i relates to this part of the table.

Here's what I've tried:

function buildFlagTable(fcp){
  flagTableData = getFlagTableData(fcp)
  $('#flagTable').DataTable({
    data: flagTableData,
    columns: flagTableCols,
    paging:false,
    fixedHeader:true,
    scrollY:400,
    dom: { i: dontShowSummary(???) }
  })
}

So far, giving dom any value (even an empty object {}) seems to break the table all together, and nothing shows up.

How does the dom option actually work?

答案1

得分: 1

"dom"选项在文档中已定义了默认的元素选择方式。因此,如果您不包括此选项,它与以下指定相同:

$('#flagTable').DataTable({
    dom: 'lftipr'
});

如果您希望使用与默认不同的布局,您需要明确定义它。所以在您的情况下,如果您想要所有默认元素但不包括信息摘要,您可以使用以下方式:

$('#flagTable').DataTable({
    dom: 'lftpr'
});

当您传递一个空对象时,没有显示任何内容的原因是因为您没有指定要显示表格元素。

当然,所有这些可能会影响布局,因为现在缺少一个元素。要纠正这个问题,您需要用更详细的布局规范替换dom的值,可以从文档页面底部的选项中选择与您的样式框架匹配的选项。

英文:

The dom option has a default element selection as defined in the documentation. So if you don't include this option it's the same as specifying

$('#flagTable').DataTable({
    dom: 'lftipr'
});

If you want to have a different layout to the default then you have to define it explicitly. So in your case, to have all the default elements minus the information summary you would put

$('#flagTable').DataTable({
    dom: 'lftpr'
});

The reason nothing showed up when you passed an empty object is because you didn't specify that you wanted the table element.

Of course all this might mess about with the layout because an element is now missing. To rectify this you would need to replace the dom value with the more detailed layout specification, by choosing from the options further down the documentation page that matches your styling framework.

huangapple
  • 本文由 发表于 2023年7月18日 02:47:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76707314.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定