Datatables sDom挑战：在表格左下方添加新元素

Question

我想在表格底部添加一个“刷新”按钮。但是我刚开始使用datatables，它有点让人困惑，尤其是“sDom”部分，它说我可以通过这种方法来实现，但描述最好也很模糊。

"sDom": '<"top"i>rt<"bottom"flp><"clear">'

这是datatables.net的示例，但我不知道如何理解它，我只想做一件简单的事情。是否有一个比"sDom"更适合我想做的事情的方法？

- chris

Answer 1

这是一个修改后的的实时示例。 http://live.datatables.net/onaqul/edit#javascript,html,live 在这里，我们注入了一个名为<div id="refresh"></div>的

元素，并使用结构<"#refresh">。

    $('#example').dataTable({
        "sDom": '<"top"i>rt<"bottom"<"#refresh">flp><"clear">'
      });

如果您检查示例中生成的dom，您会看到<div id="refresh"></div>被插入到<div class="bottom"></div>内部。

我认为很大程度上取决于（1）您的特定表格如何布置页脚元素，（2）您决定使用sDom注入特定元素的位置，以及（3）您如何使用CSS样式元素。

或者，您可以在datatables环境之外创建一个按钮，但使用jquery将其附加或前置到datatables创建的dom元素之一。

希望这是一个有用的起点。

- mg1075

Answer 2

我同意你的观点，DataTables中的'sDom'属性很令人困惑。个人建议只需将sDom设置为't'，这样只会创建表格，然后可以使用jQuery或其他方法在DataTables代码之外添加任何按钮等元素。虽然不是很详细的答案，但如果我处于你的情况并想要简单地添加一个按钮，这就是我会做的。

- Ryan Lynch