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 #.
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.
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')
}
}
]
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With