Я использую http: // datatables.net /
Демонстрационная таблица на их домашней странице в значительной степени напоминает то же самое, что я использую (в частности, разбиение на страницы), за исключением того, что в каждой строке есть область для щелчка:
Эта ссылка открывает модальное диалоговое окно пользовательского интерфейса jquery, которое отображает некоторую информацию, запрошенную ajax.
Часть 1 (решена), см. Часть 2 ниже
Я пытаюсь запустить событие onclick, которое нормально работает на первой странице, но как только я перехожу на страницу 2 (или любую другую), оно перестает работать. Я проверил исходный код, чтобы убедиться, что он не делает ничего смешного, весь код там действительно (все строки, даже те, которые скрыты разбиением на страницы)
Есть идеи?
$(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;
});
});
Спасибо тем, кто ответил на мой вопрос! Я исправил эту проблему.
Часть 2
Моя следующая «проблема», с которой я хотел бы приступить к работе, - это ... Я использую клавиши со стрелками влево и вправо, чтобы позволить им «сканировать» к следующей или предыдущей строке и отображать Информация. Это вместо того, чтобы закрыть его, а затем щелкнуть следующий.
Я бы хотел сделать так, чтобы когда вы добрались до конца первой или второй страницы, скрытие следующей / предыдущей соответственно автоматически загружало эту страницу, переходило вверх (или вниз), а затем открывало это диалоговое окно для этой строки на другой странице.
вот моя функция щелчка (я знаю, что она, вероятно, не лучше структурирована ... я новичок в 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)
}
});
});
вот настоящая функция щелчка
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("").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;
};