如何在DataTables按钮中设置href?

时间:2017-01-11 13:48:37

标签: javascript jquery datatables-1.10

我使用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 Tools中看到它具有该属性,但它设置为#喜欢这样:

enter image description here

修改

我已尝试在初始化后设置href,如下所示:

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


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

但是,这些都不起作用,href仍然只显示#。

3 个答案:

答案 0 :(得分:4)

我已经开始工作了。我仍然无法在按钮中设置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';
    }
};

即使它采用不同的方式,它也可以完成同样的事情。

答案 1 :(得分:1)

以下是我为解决此问题所做的工作。这将我的“添加记录”按钮放在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')
            }
        }
    ]
})

答案 2 :(得分:0)

dataTables没有&#34; href&#34;在他们的选择。 按钮只有可以使用的这些选项: https://datatables.net/reference/option/#buttons