Question

有人可以向我解释如何在页眉或页脚中添加按钮吗？ Datatables的开发人员Alan表示，为了使用Table Tools来使用按钮，你必须运行Web服务器。但我在独立计算机上运行Datatables离线。我已经浏览了谷歌添加按钮的所有首页结果，但似乎都没有。

我尝试在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完成所有工作。整个工作块看起来像这样：

$( 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>');
} );

Answer 2

我检查两种方式：

重装按钮示例

<强>首先

选项： “dom”：'＆lt;“fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr” ＆lt;“ #reloadBtn ”＆gt; lfr＆gt; t＆lt;“fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br”ip＆gt;“
初始事件：

.on（' init.dt '，function（）{
$（' #reloadBtn '）。html（'刷新'）。按钮（）。点击（功能（事件）{
...点击代码
}）。DataTable（）......

    var oTable = $('#DataResults').on('init.dt', function () {
        $('#reloadBtn').html('Refresh').button().click(function (event) {
            $(this).prop('disabled', true);
            oTable.ajax.reload(function (json) {
                $('#reloadBtn').prop('disabled', false);
            });
        });
    }).DataTable({
        "dom": '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"<"#reloadBtn">lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',
        ...
    });

<强>第二

没有＆lt;“reloadBtn”＆gt;的选项标签在dom字符串中，但附加了唯一的类名dtwcHeader：
“dom”：'＆lt;“ dtwcHeader fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr”lfr＆gt; t＆lt;“fg- toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br“ip＆gt;”

相同的初始化事件但附加行：
.on（' init.dt '，function（）{
$（'div.dtwcHeader'）。prepend（'＆lt; button id =“reloadBtn”＆gt; Reload＆lt; / button＆gt;'）;
$（' #reloadBtn '）。html（'刷新'）。按钮（）。点击（功能（事件）{
...点击代码
}）。DataTable（）......

var oTable = $('#DataResults').on('init.dt', function () {
    $('div.dtwcHeader').prepend('<button id="reloadBtn">Reload</button>');
    $('#reloadBtn').html('Odśwież').button().click(function (event) {
        $(this).prop('disabled', true);
        oTable.ajax.reload(function (json) {
            $('#reloadBtn').prop('disabled', false);
        });
    });
}).DataTable({
    "dom": '<"dtwcHeader fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"<"#reloadBtn">lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',
    ...
});

没有init.dt事件.click（）函数不会绑定到按钮，因为它还不存在。

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

2 个答案: