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."'");
            	}
            }
        }