Sortable Lists in PHP Walkthrough






Want to learn how to make drag gable sortable lists that save itself when you change the order?
Here’s how to make a Sortable list in PHP with script.aculo.us from step one to step done.

You will need Prototype and script.aculo.us so include them in your HTML output of the file that the Sortable will reside on.

<script type="text/javascript" src="path"></script>

Here, we’re going to sort a real list, ol or ul, because they make the most sense to sort. I guess you could also sort table rows, tr, or inner divs.
Make a new list. Notice the ids of the elements. The entries should have ids in the form string_identifier, where identifier is an unique number. You will probably want to retrieve the list elements from a database, where the identifier is the id. Your database entry should contain an “order” column that will save the order of the list (so you should retrieve ORDER BY order_column ASC ) The identifier of your item should be the id of your element (not the order).

<ul id="list_to_sort">
    // SQL Query: SELECT * FROM table ORDER BY order_column ASC
    // foreach: <li id="item_<? row.id; ?>"><? row.name ?></li>

    <li id="item_2">Item 2</li>
    <li id="item_3">Item 3</li>
    <li id="item_1">Item 1</li>
</ul>

Next, you want to make this into a Sortable using the script.aculo.us library. Check the documentation for additional options

Sortable.create("list_to_sort",
{
    onUpdate: function()
    {
        new Ajax.Request("file_to_call.php",
        {
            method: "post",
            parameters: { data: Sortable.serialize("list_to_sort") }
        }
        );
    }
}
);

The syntax is Sortable.create(id_of_containing_list, parameter_hash);
In this example, the id is “list_to_sort” With just that, the list will work from the client side but nothing will be updated. Therefore, the onUpdate parameter allows you to execute a function when the list order changes. You will probably want to save the list order so that it is the same the next time the user visits this page. I do exactly that here by initiating an Ajax request to the file “file_to_call.php” The next block contains the parameters for this function, which you can look up on the Prototype API. I’m going to send by POST headers, a variable called data that will contain the order of the elements.

I set this order into text by using script.aculo.us’s method, Sortable.serialize, which takes the containing list id as the parameter. What this function does is create text as such: list_to_sort[]=id_2&list_to_sort[]=id_3&… id_2 is the “identifier” of the first element in the list. Remember when you gave your list elements ids? This is the part that comes after the underscore. So for the above list, this would result in list_to_sort[]=2&list_to_sort[]=3&list_to_sort[]=1

file_to_call.php will get this POST variable as a string through an Ajax call. What do you do now? The code from here on should be in file_to_call.php

parse_str($_POST['data']);

There’s a PHP function you might not have heard of. parse_str basically initializes variables as given in a string. After this line, you will have the an array called $list_to_sort that has the value (1, 2, 3).

From here, it’s just a matter of iterating through this array and updating the “order” column of your table.

for($i = 0; $i < count($list_to_sort); $i++)
{
    // SQL Query:
    // UPDATE table SET order_column = $i WHERE id = $list_to_sort[$i]
}

And you’re done! Assuming all works as expected, your list should remember its order every time you sort it