javascript 数据表 sDom 挑战向表格左下角添加新元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10759882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 10:57:29  来源:igfitidea点击:

Datatables sDom challenge add new element to bottom left of table

javascriptjqueryjquery-datatables

提问by chris

I want to add a "refresh" button to my tables at the bottom of the table. But I just started using datatables and its a bit confusing as is the "sDom" part where it says I can do this through that means but the description is vague at best.

我想在表格底部的表格中添加一个“刷新”按钮。但是我刚刚开始使用数据表,它有点令人困惑,因为“sDom”部分说我可以通过这种方式做到这一点,但描述充其量是模糊的。

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

is the datatables.net example, but I dunno how to make heads or tails of that and all I want to do is one simple thing.

是 datatables.net 的例子,但我不知道如何做出正面或反面,我想做的只是一件简单的事情。

Or is there an outside of "sDom" that would be better suited for what I want to do?

或者“sDom”之外是否有更适合我想做的事情?

采纳答案by mg1075

Here's a live example of a modified sDom.

这是修改后的sDom.

http://live.datatables.net/onaqul/edit#javascript,html,live

http://live.datatables.net/onaqul/edit#javascript,html,live

Here we're injecting a divcalled <div id="refresh"></div>with the structrue <"#refresh">.

这里我们注入div称为<div id="refresh"></div>与structrue <"#refresh">

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

If you inspect the generated dom in the example, you can see <div id="refresh"></div>got inserted inside of <div class="bottom"></div>.

如果您检查示例中生成的 dom,您可以看到<div id="refresh"></div>被插入到<div class="bottom"></div>.

I think much depends on (1) how your specific table has its footer elements layed out, (2) where you decide to inject your specific element using sDom, and (3) how you style the element(s) with your CSS.

我认为很大程度上取决于(1)您的特定表格如何布置其页脚元素,(2)您决定使用sDom注入特定元素的位置,以及(3)您如何使用CSS.

Alternatively, you could have a button created outside of the datatables environment, but use jquery to append or prepend your button to one of the dom elements datatables creates.

或者,您可以在数据表环境之外创建一个按钮,但使用 jquery 将您的按钮附加或添加到数据表创建的 dom 元素之一。

Hope this is a useful starting point.

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

回答by Ryan Lynch

I agree with you that the DataTables 'sDom'property is confusing. Personally I just set sDomequal to 't', which creates just the table, and I add any buttons or what have you outside of the DataTables code using jQuery or some other method. Not much of an answer, but that's what I would do if I were in your situation and wanted to do something simple like add a button.

我同意您的观点,即 DataTables'sDom'属性令人困惑。就我个人而言,我只是将sDomequal to设置为't',它只创建表格,然后我使用 jQuery 或其他一些方法添加任何按钮或 DataTables 代码之外的内容。没有多少答案,但如果我处于您的情况并且想做一些简单的事情,例如添加按钮,这就是我会做的。