如何在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 的 Dev 工具中，我看到它有这个属性，但设置为 #，像这样：

```html ```

编辑后，我尝试了在初始化后设置 href，方法如下：

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


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

没有一个有效，尽管如此，href仍然只显示 #。

- Mike

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';
    }
};

这样做虽然用了不同的方法，但达到了相同的效果。

- Mike

---

那对我来说是个救命的技巧。谢谢，伙计。 如果你使用这种方法遇到了任何错误，请告诉我。 - Swaps

我刚刚更新了我网站上正在进行的内容。到目前为止，它没有出现任何问题。 - Mike

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')
            }
        }
    ]
})

- Mike

---

这里添加了href但是点击没有反应。 - Ankit Prajapati

Answer 3

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

- NeuTronas

---

是的，我看过那个页面。但既然href在页面上，肯定有一种方法可以访问它并将其设置为我想要的内容，不是吗？ - Mike

你可以在初始化按钮之后使用jQuery动态添加href链接。$(".dt-button.buttons-alert").attr("href", "./AjaxHandler.php") - NeuTronas

我尝试了这个 $('dt-button.buttons-alert').attr('href', './AjaxHandler.php'); 但是没有任何变化，href 仍然是 #。 - Mike

Answer 4

我找到了Mike解决方案的答案，因为在他的解决方案中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';
                          
                      })
            }
        }
    ]
})

- Ankit Prajapati