Johnny Sortable: How To Use Sort.sortable("serialize");

I use: http://johnny.github.io/jquery-sortable/ With this plugin you can change the order of a list or the order of table rows (thats my case). For example with the mouse you drag

Solution 1:

To send your new order via $.POST just do:

var dataToSend = sort.sortable("serialize").get();
$.post("ajax-sort.php", {test:dataToSend}, function(data){});

On ajax-sort.php you recieve something like:

[test] => Array
        (
            [0] => Array
                (
                    [children] => Array
                        (
                            [0] => Array
                                ([id] => 39)

                            [1] => Array
                                ([id] => 37)

                            [2] => Array
                                (
                                    [subContainer] => false
                                    [id] => 38
                                )

                            ... snip ...
                        )
                )
        )
)

If you want to change the structure of this array, override the serialize() method in the plugin.

You will find an example of a customized serialize() method here: http://johnny.github.io/jquery-sortable/#limited-target

Solution 2:

If the table rows are pre-sorted using that plugin, you can iterate over the rows and add their id's to an array.

onDrop: function ($item, container, _super) {
    var myObject = sort.sortable("serialize");
    var sorted = [];

    $('tr').each(function () {
        sorted.push($(this).data('id'));
    });

    $.post('myurl.php', {blah: sorted}, function(){});
});

I also wrapped blah in curly braces to indicate that it is an object. Otherwise you would have gotten a syntax error.

Solution 3:

I have created a script which will sort and convert output into json format :

function start_sorting(classvariable){
var output=[];
var parent="";
var selector=$("."+classvariable+" li");
selector.each(function(key,value){
var id=selector.eq(key).attr('id');
var index=key;
        if(selector.eq(key).parent().parent().parent().find(">li").length==0){
        parent='0';
        }else{
        parent=selector.eq(key).parent().parent().parent().find(">li").attr('id');
        }
output.push({id:id,index:index,parent:parent});
});
console.log( JSON.stringify(output));
}