button - 数据表 - 添加按钮到页眉或页脚

Question

有人可以向我解释一下如何向页眉或页脚添加按钮吗？Datatables 的开发者 Alan 说你必须离开网络服务器才能使用 Table Tools 来使用按钮。但我在独立计算机上离线运行 Datatables。我已经浏览了 Google 关于添加按钮的所有第一页结果，但似乎没有一个有效。

我试过在 html 中创建按钮并为其指定一个 id:

 <button id="testbutton">Test</button>

然后在sDom中调用:

$(document).ready(function() {
  oTable = $('#users').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth":false,
    "sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"<"testbutton">ip>',
    "aaData": [
            [ 1, 2, 3, 4, 5 ]
    ]
   });
} );

我做错了什么？

Answer 1

试试这个:

"sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"<"#testbutton">ip>',

更具体地说:<"#testbutton">

您需要 #因为testbutton是你的 id不是你的class .

编辑:经过更多调查，我发现了一种更简洁的 sDom 格式。

"sDom":'<"H"lfr>t<"F"ip>'

这是默认的 sDom 值，因此要添加您的按钮，只需向 sDom 添加一个 div。

"sDom":'<"H"lfr>t<"F"<"testbutton">ip>'

您不需要为此向您的页面添加任何 html。您可以使用 jQuery 完成这一切。整个工作 block 如下所示:

$( function() {
    oTable = $( "#users" ).dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth":false,
        "sDom": '<"H"lfr>t<"F"<"testbuttonarea">ip>',
        "aaData": [ [1,2,3,4,5] ]
    });
    $( "#users div.testbuttonarea" ).html('<button id="testbutton">Test</button>');
} );