如何在DataTables按钮中设置href？

Question

我使用 DataTables 来格式化我的表格。我还使用他们的按钮插件。我正在尝试创建一个自定义按钮来重定向到另一个页面，我将在其中创建一个 Excel 文件以供下载。我只是不知道如何设置

href

。我试过这个：

$.fn.dataTable.ext.buttons.export =
{
    className: 'buttons-alert',
    text: "Export All Test III",
    action: function (e, dt, node, config)
    {
        var SearchData = dt.rows({ filter: 'applied' }).data();
        var OrderData = dt.order();
        alert("Test Data for Searching: " + SearchData);
        alert("Test Data for Ordering: " + OrderData);
    },
    href: './AjaxHandler.php'
};

href

被忽略且未设置。我需要设置

href

。

我该怎么做？

我可以在Firefox的开发工具中看到它有这个属性，但它被设置为#，如下所示：

编辑

此后我尝试在初始化后设置

href

，如下所示：

$('.dt-button.buttons-alert').attr('href', './AjaxHandler.php');


document.querySelector('.buttons-alert').setAttribute('href', './AjaxHandler.php');

但是，这些作品都没有，

href

仍然只显示#。

Answer 1

我已经让它发挥作用了。我仍然无法在按钮中设置

href

。我能做的是：

$.fn.dataTable.ext.buttons.export =
{
    className: 'buttons-alert',
    id: 'ExportButton',
    text: "Export All Test III",
    action: function (e, dt, node, config)
    {
        //This will send the page to the location specified
        window.location.href = './AjaxHandler.php';
    }
};

即使以不同的方式完成同样的事情。

Answer 2

这就是我为解决这个问题所做的事情。这会将我的“添加记录”按钮放入 DataTable DOM

$('#myTable').DataTable({
    ...,
    buttons: [
        {
            text: '<i class="fa fa-plus"></i>',
            className: 'btn btn-default btnAddJob',
            titleAttr: 'Add a new record',
            init: function (dt, node, config) {
                $(node).attr('href', 'put/your/href/here')
            }
        }
    ]
})

Answer 3

dataTables 的选项中没有“href”。 按钮只有以下可用选项： https://datatables.net/reference/option/#buttons

Answer 4

我找到了迈克解决方案的答案，因为在他的解决方案中添加了 href，但单击时链接未打开，所以我稍微修改了代码以使其工作。此外，这对目前正在尝试的一些人也会有帮助。这是一个简单的修复。

$('#myTable').DataTable({
    ...,
    buttons: [
        {
            text: '<i class="fa fa-plus"></i>',
            className: 'btn btn-default btnAddJob',
            titleAttr: 'Add a new record',
            init: function (dt, node, config) {
                 $(node).click(function(){
                          
                    window.location.href = 'Your Link';
                          
                      })
            }
        }
    ]
})

Answer 5

这就是我所做的，以便链接在新选项卡中打开：

$("#my_table").DataTable({
    "buttons": [
        {
            text: 'Click me',
            action: function (e, dt, button, config) {
                window.open("https://example.com/path/page.html");
            }
        }
    ],
    "dom": 'Bfrtip', // https://datatables.net/reference/option/dom
    "info": false,
    // "language":
    'order': [[0, 'asc'],],
    "ordering": true,
    "paging": false,
    "searching": false,
});