Сохранить сортировку после перетаскивания элементов UI Sortable можно несколькими способами:
Список выводится из базы данных отсортированный по полю `sort`. В каждом элементе списка находится input[type=hidden] с названием sort[] и содержащий id записи.
После отправки формы, скрипт в цикле переберёт массив $_POST['sort'] и обновит порядок записей.
<?php
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
// Сохранение сортировки
if (!empty($_POST['sort'])) {
foreach ($_POST['sort'] as $i => $row) {
$sth = $dbh->prepare("UPDATE `table` SET `sort` = :sort WHERE `id` = :id");
$sth->execute(array('sort' => ++$i, 'id' => intval($row)));
}
}
$sth = $dbh->prepare("SELECT * FROM `table` ORDER BY `sort`");
$sth->execute();
$array = $sth->fetchAll(PDO::FETCH_ASSOC);
?>
<form action="" method="post">
<ul class="sortable-ul">
<?php foreach ($array as $row): ?>
<li>
<?php echo $row['name']; ?>
<input type="hidden" name="sort[]" value="<?php echo $row['id']; ?>">
</li>
<?php endforeach; ?>
</ul>
<button type="submit">Сохранить порядок</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.sortable-ul').sortable();
</script>Метод похож на вариант с формой, но работает без перезагрузки страницы. После изменения порядка вызывается метод stop, в котором все input hidden отправляются через POST AJAX на save.php.
<?php
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT * FROM `table` ORDER BY `sort`");
$sth->execute();
$array = $sth->fetchAll(PDO::FETCH_ASSOC);
?>
<ul class="sortable-ul">
<?php foreach ($array as $row): ?>
<li>
<?php echo $row['name']; ?>
<input type="hidden" name="sort[]" value="<?php echo $row['id']; ?>">
</li>
<?php endforeach; ?>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.sortable-ul').sortable({
stop: function() {
$.ajax({
url: '/save.php',
method: 'post',
data: $('.sortable-ul input').serialize()
});
}
});
</script>Код файла save.php
<?php
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
if (!empty($_POST['sort'])) {
foreach ($_POST['sort'] as $i => $row) {
$sth = $dbh->prepare("UPDATE `table` SET `sort` = :sort WHERE `id` = :id");
$sth->execute(array('sort' => ++$i, 'id' => intval($row)));
}
}У каждого <li> добавлен атрибут data-id с порядковым номером. После перетаскивания значения из data-id собираются в массив и сохраняется в cookies в виде строки JSON, а при обновлении страницы порядок восстанавливается из них.
Для упрощения работы с cookie используется плагин jQuery Cookie.
<ul class="sortable-ul">
<li data-id="1">Строка 1</li>
<li data-id="2">Строка 2</li>
<li data-id="3">Строка 3</li>
<li data-id="4">Строка 4</li>
<li data-id="5">Строка 5</li>
<li data-id="6">Строка 6</li>
</ul>
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/jquery.cookie.min.js"></script>
<script>
// Если есть запись в cookie, то восстанавливаем порядок.
if ($.cookie('sort')) {
$.each(JSON.parse($.cookie('sort')), function(i, row){
$('.sortable-ul').append($('.sortable-ul li[data-id=' + row + ']'));
});
}
$('.sortable-ul').sortable({
stop: function() {
// Собираем все data-id в массив.
var sort = [];
$('.sortable-ul li').each(function(){
sort.push($(this).data('id'));
});
// И сохраняем его в cookie в виде строки JSON.
$.cookie('sort', JSON.stringify(sort));
}
});
</script>
Сделали все тоже самое для таблицы. Input в tr добавили а класс sortable-ul в tbody.
Еще раз спасибо!