How to set the href in a DataTables button?

Question

I use DataTables to format my tables. I also use their plugins for Buttons. I am trying to create a custom button to redirect to a different page where I'll create an Excel file for download. I'm just not sure how to set the href. I've tried this:

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

The href is ignored and not set. I need to set the href.

How do I do this?

I can see in the Dev Tools in Firefox that it has the property, but it is set to # like this:

EDIT

I have since tried setting the href after initialization like this:

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


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

Neither one of these works, though, the href still shows only the #.

Mike · Accepted Answer · 2017-03-22T15:11:59.973

6

I've gotten it to work, sort of. I am still not able to get the href set in the button. What I am able to do is this:

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

This accomplishes the same thing even though it does it a different way.

edited Mar 22 '17 at 15:11

answered Jan 11 '17 at 18:16

Mike

1,853
3
45
75

that was a lifesaving hack for me.. thanks buddy. Also do let me know if you got into any bugs with this approach. – Swaps Mar 22 '17 at 14:15
I just updated what I have working on my website. So far there haven't been any problems with it. – Mike Mar 22 '17 at 15:12

score 4 · Answer 2 · answered Sep 25 '17 at 21:30

4

Here is what I did to solve this issue. This puts my "Add record" button in the 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')
            }
        }
    ]
})

answered Sep 25 '17 at 21:30

Mike

265
2
10

This do add href but it doesnot work on click – Ankit Prajapati Mar 17 '23 at 07:54

score 0 · Answer 3 · answered Jan 11 '17 at 13:56

0

dataTables doesn't have "href" in their options. Buttons only have these options that can be used: https://datatables.net/reference/option/#buttons

answered Jan 11 '17 at 13:56

NeuTronas

263
3
11

Yes, I've seen that page. Surely though since the `href` is there on the page there is a way to access it and set it to what I want? – Mike Jan 11 '17 at 14:06
You can always add href link dynamically with jquery after initializing the button.. $(".dt-button.buttons-alert").attr("href", "./AjaxHandler.php") – NeuTronas Jan 11 '17 at 14:08
I tried this `$('dt-button.buttons-alert').attr('href', './AjaxHandler.php');` and it didn't make any difference, the `href` is still # – Mike Jan 11 '17 at 14:49

score 0 · Answer 4 · answered Mar 17 '23 at 10:26

I found the answer to Mike's solution, as in his solution href is adding but link is not opening on click, so I slightly modified the code to make it work. Also, it would be helpful to some who is trying currently. Its an easy fix.

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

How to set the href in a DataTables button?

4 Answers4