Drag n Drop сортировка таблиц с использованием AJAX

Для облегчения процесса сортировки записей, выводимых в виде таблицы, можно использовать сортировку перетаскиванием строк с последующим ajax запросом и обработкой данных. Чтобы реализовать задачу нам понадобиться Jquery и плагин jquery.tablednd.0.5.js.

Рабочий пример и файлы вы можете скачать здесь.

Прежде всего, мы должны сгенерировать таблицу вида:

Заголовок 1Заголовок 2Заголовок 3Заголовок 4Сортировка
1 2 3 4 5
100 200 300 400 3
234 27686 323 4 1

Таблица имеет следующие особенности:

  • Строка с заголовками должна иметь класс 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."'");
            	}
            }
        } 

Интересное

Отзыв о FirstVDS
При покупке хостинга у FirstVDS мне предложили скидку за годный отзыв в блоге или на форуме....
Проверка сайта на вирусы
Если пользоваться привычной терминологией, то web вирусы не являются вирусами в традиционном...
Git и Bitbucket
Git – это распределенная система контроля версий. Пожалуй, на этом теория заканчивается, так как...
Project Glass — Очки будущего от Google
Компания Google представила суперсовременные «очки дополненной реальности» или Project Glass. Впрочем,...

Комментарии

  • Rostislav Krinovskiy
    03.04.2015 в 12:11

    с какой ето оперы — var id = $(e).find («td: first»).attr («id»);?=))

    ответить
    • Rostislav Krinovskiy
      03.04.2015 в 13:19

      $(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 — Автору спасибо, идея не плохая, но сначала нужно проверять работоспособность:)

      ответить

Чтобы оставлять комментарии, авторизируйтесь

Войти через OpenID

рейтинг2+-
Популярные
Точки входа
Наверх