"Prevent default" issue with datatables
"Prevent default" issue with datatables
Marcel_Patulacci
Posts: 6Questions: 3Answers: 0
Hi,
On my web page, I have a table with a link in the last column. On click on a row, it's opening a div to show more data (like the example in the documentation). This link have "#" as href and I'm using event.preventDefault() to cancel his action.
On the first page, every link is working fine. But, when I switch on another page, event.preventDefault() is not working any more. If I get back to the first page, the problem disappears.
I have tried:
1. Disable DataTable: Every link is working.
2. Disable DataTable for 10 seconds: Every link is working until DataTable load and every page except the first one encounter the problem.
3. Changing page length from 25 to 9999: Every link is working.
HTML:
<!-- Every row looks like this -->
<tr>
<td class="none">{$hosts[indexhost].id_host}</td>
<td>{$hosts[indexhost].Hostname}</td>
<td>{$hosts[indexhost].IP_host}</td>
<td>{$hosts[indexhost].OS}</td>
<td>{$hosts[indexhost].Version}</td>
<td>{$hosts[indexhost].Chassis}Colonne inexistante</td>
<td>{$hosts[indexhost].Jumelle}Plus tard</td>
<td class="actions">
<a class="reseau" href="#">Schéma réseau
<img src="templates/default/images/voir_plus.svg" alt="Schéma réseau" title="Schéma réseau"/>
</a>
</td>
</tr>
JS - event.preventDefault():
$(".reseau").on("click", function (event) {
event.preventDefault();
row_data = open(network_container, $(this));
getData(row_data);
});
JS - Datatable init:
table = $("#tablecmdb").DataTable({
dom: '<"top">rt<"bottom"ip><"clear">',
autoWidth: false,
paging: true,
pagingType: "simple_numbers",
//lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "chaque"]],
pageLength: 25,
searching: true,
search: {regex: false, smart: true},
//order: [1, "asc"],
columnDefs: columnDefs,
buttons: [
{
text: "Tout ouvrir",
titleAttr: "Affiche (beaucoup) plus d'information",
action: function () { // Ouvre toute les lignes.
table.rows().every(function () {
if ($("#options_body_buttons button:first-child").text() === "Tout ouvrir") {
$(this.node()).trigger("click")
$("#options_body_buttons button:first-child").html("Tout fermer");
} else {
$(this.node()).trigger("click")
$("#options_body_buttons button:first-child").html("Tout ouvrir");
}
});
}
},
{
text: "Vider les filtres",
titleAttr: "Réinitialise la table",
action: function () { // Vide les barres de recherche.
table.columns().every(function () {
$("input", this.header()).val("");
table.search("").columns().search("").draw();
});
}
},
{
text: "Copier",
titleAttr: "Copier dans le presse-papier",
extend: "copyHtml5",
exportOptions: {
columns: "th:not(.noExport)",
modifier: {
page: "current"
},
format: {
header: function (idx, html, node) {
return $("input", node).attr("placeholder");
}
}
}
},
{
text: "Excel",
titleAttr: "Convertir en XLSX",
extend: "excelHtml5",
exportOptions: {
columns: "th:not(.noExport)",
modifier: {
page: "current"
},
format: {
header: function (idx, html, node) {
return $("input", node).attr("placeholder");
}
}
}
},
{
text: "PDF",
titleAttr: "Convertir en PDF",
extend: "pdfHtml5",
exportOptions: {
columns: "th:not(.noExport)",
modifier: {
page: "current"
},
format: {
header: function (idx, html, node) {
return $("input", node).attr("placeholder");
}
}
}
},
{
text: "CSV",
titleAttr: "Convertir en CSV",
extend: "csvHtml5",
charset: "utf-8",
bom: true,
exportOptions: {
columns: "th:not(.noExport)",
modifier: {
page: "current"
},
format: {
header: function (idx, html, node) {
return $("input", node).attr("placeholder");
}
}
},
},
{
text: "Imprimer",
titleAttr: "Imprimer toute la table",
extend: "print",
exportOptions: {
columns: "th:not(.noExport)",
modifier: {
page: "current"
},
format: {
header: function (idx, html, node) {
return $("input", node).attr("placeholder");
}
}
},
customize: function (win) {
$(win.document.body).find("h1").css({
"margin-left": "2vw"
});
$(win.document.body).find("table").css({
"border-collapse": "collapse"
});
$(win.document.body).find("table tbody tr td").css({
"padding": "1vh 1vw",
"border": "1px #000000 solid"
});
$(win.document.body).find("table tbody tr td:first-child").css({
"background": "#3A3A3A",
"color": "#FDFFFC"
});
}
}],
language: {
decimal: "",
sEmptyTable: "Aucune donnée disponible dans le tableau.",
sInfo: "Affichage des éléments _START_ à _END_ sur _TOTAL_.",
sInfoEmpty: "Affichage des éléments 0 à 0 sur 0.",
sInfoFiltered: "(_TOTAL_/_MAX_ éléments affichés)",
sInfoPostFix: "",
sProcessing: "Traitement en cours...",
sLoadingRecords: "Chargement en cours...",
sSearch: "",
sSearchPlaceholder: "Rechercher dans toutes les colonnes:",
sZeroRecords: "Aucun élément à afficher.",
sLengthMenu: "Afficher _MENU_ éléments.",
oPaginate: {
sFirst: "Premier",
sPrevious: "Précédent",
sNext: "Suivant",
sLast: "Dernier"
},
oAria: {
sSortAscending: ": activer pour trier la colonne par ordre croissant.",
sSortDescending: ": activer pour trier la colonne par ordre décroissant."
},
select: {
rows: {
_: "%d lignes séléctionnées.",
0: "Aucune ligne séléctionnée.",
1: "Une ligne séléctionnée."
}
},
buttons: {
copy: "Copier",
copyTitle: "Ajouté au presse-papier.",
copySuccess: {
1: "Copie d'une ligne dans le presse-papier.",
_: "Copie de %d lignes dans le presse-papier."
},
copyKeys: "Appuyez sur <strong>Ctrl + C</strong> pour copier la table<br />dans le presse-papier.<br /><br />Pour annuler, cliquez sur ce message ou appuyez sur <strong>Echap</strong>."
}
},
destroy: true,
initComplete: function (settings, json) {
var api = new $.fn.dataTable.Api(settings);
addButtons(api);
addLengthMenu(api);
addGlobalSearchBar(api);
addSearchBars(api);
if (features.datatables.extra_data) {addMoreData(api);}
$("#tablecmdb").addClass("hover");
}
});
I really don't understand the problem.
Hope you can help, thanks.
This discussion has been closed.
Answers
Wait a minute, I'm just stupid. I have added
event.stopPropagation()and it's now working. I don't know why the problem didn't occur on the first page but the problem is solved.If an admin read this, maybe he can add "Answered" to the topic. I can't do that on my own comment.
Sorry for that.