Datatables je ne peux pas appeler un événement onclick après je paginer?
Je suis en utilisant http://datatables.net/
La démo de table sur leur page d'accueil ressemble à peu près la même chose exacte que j'utilise (la pagination, plus précisément), sauf que chaque ligne comporte une zone à cliquer:
<a href="#" class="show-post"><%= Post.title %></a>
Ce lien ouvre une jquery UI boîte de dialogue modale qui affiche certaines informations qui est ajax demandé.
Partie 1 (résolu), voir la partie 2 ci-dessous
Je suis en train de lancer un événement onclick qui fonctionne normalement sur une seule page, mais dès que je passe à la page 2 (ou toutes les autres), il s'arrête de fonctionner. J'ai vérifié la source pour s'assurer qu'il n'était pas de faire quelque chose de drôle dans tout le code est en effet là (toutes les lignes, même ceux cachés par la pagination)
Des idées?
$(function() {
$('#dialog').dialog({
autoOpen: false,
resizable: false,
maxHeight: 600,
width: 650,
modal: true,
beforeClose: function close() {
$('#dialog').html('');
}
});
$('.show-post').click(function() {
clickLink(this);
return false;
});
});
Merci à ceux qui ont répondu à ma question! J'ai résolu le problème.
Partie 2
mon prochain 'problème' id comme pour se rendre au travail est... je suis en utilisant les touches fléchées gauche et droite pour leur permettre de "scan" à la suivante ou précédente de la ligne, et d'afficher l'information. C'est par opposition à la fermeture, puis cliquez sur suivant.
J'aimerais faire en sorte que quand vous arrivez à la partie inférieure de la page, ou en haut de la page deux, se faufiler suivante/précédente, respectivement charge automatiquement la page, allez vers le haut (ou le bas), puis ouvrez cette boîte de dialogue pour la ligne sur l'autre page.
heres ma cliquez sur la fonction (je sais c'est une sorte de probablement pas structuré le meilleur... im nouveau à jquery)
$(document).ready(function() {
oTable = $('#posts').dataTable({
"bJQueryUI": true,
"iDisplayLength": 400,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"aLengthMenu": [[-1, 400, 100, 50], ["All", 400, 100, 50]]
});
$(this).keydown(function(e) {
var id = $("#dialog").attr("data-id");
currentPost = $("#posts tr[data-id=" + id + "]");
if (e.keyCode == 39 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).blur()
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var next = currentPost.next().find(".show-post");
clickLink(next);
} else if (e.keyCode == 37 && $('#dialog').html() != "") {
/* Remove current background */
$(currentPost).removeClass("current");
$(currentPost).find("td.sorting_1").removeClass("current");
var prev = currentPost.prev().find(".show-post");
clickLink(prev)
}
});
});
heres la réelle cliquez sur la fonction
function clickLink(src) {
var post = $(src);
var id = $(post).parent().parent().attr('data-id');
/* Set background for current line */
$(post).parent().parent().find("td.sorting_1").addClass("current");
$(post).parent().parent().addClass("current");
$('#dialog').attr("data-id", id);
$('#dialog').load('/show-post/' + id, function() {
$.ajax({
type: "POST",
url: "/checkstatus/" + id,
dataType: "html",
error: function(data){
$("#dialog").fadeOut("fast", function() {
$("#dialog").html("<img src='/img/invalid.jpg' alt='invalid' style='margin: 40px auto; display: block;'>").fadeIn("slow");
});
}
});
/* Set Visited */
$(post).parent().parent().removeClass("visited").addClass("visited");
$('#dialog').dialog({
title: post.html(),
beforeClose: function close() {
$(post).parent().parent().find("td.sorting_1").removeClass("current");
$(post).parent().parent().removeClass("current");
},
buttons: {
"Email 1": function() {
$.ajax({
type: "POST",
url: "/get-email/" + id + "/" + "1",
dataType: "html",
success: function(data) {
window.location.href = data + "&subject=" + post.html();
}
});
},
}
});
$('#dialog').dialog('open');
});
return false;
};
- Il semble que votre pagination n'est pas de remettre en place le gestionnaire de clic après le dom changements. Essayez de rattacher les événements ou à l'aide d'un formulaire dynamique de la fixation de l'événement comme délégué ou de vivre (selon la version de jquery que vous utilisez).
Vous devez vous connecter pour publier un commentaire.
L'exemple sur le lien que vous avez fourni semble être l'ajout/suppression d'éléments du DOM, ce qui signifie que des éléments sur les pages suivantes ne sont probablement pas dans les DOM au chargement de la page. Avez-vous essayé d'utiliser événement délégation?
Où
<root element>
peut êtredocument
mais devrait être un élément ancêtre qui est toujours dans les DOM..delegate()
:Source: http://api.jquery.com/delegate
Mise à JOUR
Noter que
.delegate()
est un alias de.on()
maintenant, donc si vous êtes à l'aide de jQuery 1.7+ je voudrais juste utiliser.on()
droit de l'obtenir-aller. Presque la même syntaxe, à l'exception de la sélection et de l'événement sont intervertis:$(<root element>).on('click', '.show-post', function() { ... });
Source: Merci Greg Pettit, Excellent Commentaire
.delegate()
est un alias de.on()
maintenant, donc si vous êtes à l'aide de jQuery 1.7+ je voudrais juste utiliser.on()
droit de l'obtenir-aller. Presque la même syntaxe, à l'exception de la sélection et de l'événement sont intervertis:$(<root element>).on('click', '.show-post', function() { ... });
Code ci-dessous fonctionne Parfaitement. Lorsque vous cliquez sur la pagination bouton 'drawCallback' Appel de classe d'une fonction après le tableau de charge.
Comme @scrappedcola souligné dans les commentaires, votre gestionnaire de clic est perdu après la pagination. Il y a un
drawCallback
fonction de tables de données, vous pouvez mettre en œuvre qui se déclenche après la table est "re-dessinée" (d'où drawCallback). Voici un exemple: