Drag n Drop сортировка таблиц с использованием AJAX
Для облегчения процесса сортировки записей, выводимых в виде таблицы, можно использовать сортировку перетаскиванием строк с последующим ajax запросом и обработкой данных. Чтобы реализовать задачу нам понадобиться Jquery и плагин jquery.tablednd.0.5.js.
Рабочий пример и файлы вы можете скачать здесь.
Прежде всего, мы должны сгенерировать таблицу вида:
Таблица имеет следующие особенности:
- Строка с заголовками должна иметь класс nodrop nodrag (чтобы не участвовать в сортировке)
- Ячейка таблицы, в которой указано текущее значение сортировки должна иметь иметь атрибут rel, значение которого должно быть равным значению сортировки
- Таблица должна иметь уникальный ID, к которому будет подвязан плагин, осуществляющий drag n drop сортировку
Для реализации drag n drop'а и последующей обработки данных служит этот код:
$(document).ready(function() {
$("#myTable").tableDnD({
onDragClass: "dragRow",
onDrop: function(table, row) {
var data = new Object();
data.data = new Object();
data.key = $(table).find("tbody tr td").attr("rel");
$(row).fadeOut("fast").fadeIn("slow");
$(table).find("tbody tr").each(function(i, e){
var id = $(e).find("td:first").attr("id");
var order = i + 1;
data.data[order] = id;
$(e).find("td[rel=sort_order]").html(order);
});
$.ajax({
type: "POST",
url: "url для обработки данных",
data: data,
success: function(html){
$("#myTable tr").removeClass("color");
$("#myTable tr:even").addClass("color");
}
});
}
});
});
По завершению сортировки скрипт посылает POST запрос на сервер (необходимо в JS коде указать URL скрипта, который будет обрабатывать данные), где и происходит переназначение весов для каждой записи. Для CI сценарий для обработки будет выглядеть так:
public function change_sort_order(){
if( empty($_POST['data']) || empty($_POST['key']) ){
return false;
}
extract($_POST);
if( is_array($data) && sizeof( $data ) > 0 ){
foreach( $data as $sort_order => $id ){
$this->db->query("UPDATE `$this->table` SET `sort_order` = '".(int)$sort_order."' WHERE `$key` = '".(int)$id."'");
}
}
} Интересное
Git и Bitbucket Проверка сайта на вирусы Project Glass — Очки будущего от Google Отзыв о FirstVDSКомментарии
Чтобы оставлять комментарии, авторизируйтесь
с какой ето оперы — var id = $(e).find («td: first»).attr («id»);?=))
$(document).ready (function () {
$("#idTable»).tableDnD ({
onDragClass: «dragRow»,
onDrop: function (table, row) {
var data = new Object ();
data.data = new Object ();
$(row).fadeOut («fast»).fadeIn («slow»);
$(table).find («tbody tr“).each (function (i, e){
var id = $(e).find ("#sort»).data ('id');
var order = i + 1;
data.data[order] = id;
$(e).find («td[rel=sort_order]").html (order);
});
$.ajax ({
type: „POST“,
url: „url“,
dataType: „json“,
data: data,
success: function (html){
$("#sortedDnD tr»).removeClass («color“);
$("#sortedDnD tr: even»).addClass («color“);
}
});
}
});
});
td который имеет атрибут rel — добавте к нему data-id="здесь вставте id из таблицы db“, а здесь вместо WHERE `$key` = '“.(int)$id.“'" сделайте WHERE `id` = '“.(int)$id.»'" — и будет вам счастье=)
P.S — Автору спасибо, идея не плохая, но сначала нужно проверять работоспособность:)