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."'"); } } }
Интересное




Комментарии
Чтобы оставлять комментарии, авторизируйтесь
с какой ето оперы — 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 — Автору спасибо, идея не плохая, но сначала нужно проверять работоспособность:)