Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Simulating table sorting using li elements

It is hard to find good script to sort table cells using drag and drop combined with ajax. So here is an example where you can simulate table cell sorting using floating li elements with specified width and limiting them with container div element. You'll need http://webcodingeasy.com/js/mootools.js to make it work.

<?php
 $con = mysql_connect("host", "user", "pass");
/* on form submission */
if(isset($_POST['do_submit'])) 
{
    /* split the value of the sortation */
    $ids = explode('|',$_POST['sort_order']);
    /* run the update query for each id */
    foreach($ids as $index => $id)
    {
        if($id != '')
        {
            mysql_query("update table set sequence = '".
                        $index."' where ID = '".$id."'");
        }
    }
}

?>

<html>
<head>
<!--floating of li element is used with defined width of li 
and width of div containing list to limit li elements in a row-->
<style type="text/css" media="all">
#sortable-list{ padding:0; }
li.sortme 
{ 
    padding:4px 8px; 
    color:#000; 
    cursor:move; 
    list-style:none; 
    width:200px; 
    background:#ddd; 
    margin:10px 0; 
    border:1px solid #999; 
    float: left;
}
#message-box 
{ 
    background:#fffea1; 
    border:2px solid #fc0; 
    padding:4px 8px; 
    margin:0 0 14px 0; 
    width:500px; 
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
/* when the DOM is ready */
/* create sortables */
window.addEvent('domready', function() {
    var sb = new Sortables('sortable-list', {
        /* set options */
        clone:true,
        revert: true,
        /* initialization stuff here */
        initialize: function() { 
            
        },
        /* once an item is selected */
        onStart: function(el) { 
            el.setStyle('background','#add8e6');
            el.setStyle()
        },
        /* when a drag is complete */
        onComplete: function(el) {
            el.setStyle('background','#ddd');
            //build a string of the order
            var sort_order = '';
            $$('#sortable-list li').each(function(li) 
            { 
                sort_order = sort_order +  li.get('alt')  + '|'; 
            });
            $('sort_order').value = sort_order;
            
            //do an ajax request
            var req = new Request({
                //to same url - you may change to another, 
                //just dont forget that post will be sent to that url
                url:'<?php echo $_SERVER['PHP_SELF']; ?>',
                method:'post',
                autoCancel:true,
                //variables to submit
                data:'sort_order=' + sort_order + '&do_submit=1',
                onRequest: function() {
                    $('message-box').set('text','Updating database.');
                },
                onSuccess: function() {
                    $('message-box').set('text','Database has been updated.');
                }
            }).send();
        }
    });
});

</script>
</head>
<body>
<div id="message-box">Waiting for sortation submission...</div>
<!--Limiting list in width using div-->
<div style='width: 500px; position:relative;'>
<ul id="sortable-list">
    <?php 
        $sort_order = array();
        $result = mysql_query("select * from table order by sequence asc");
        while($item = mysql_fetch_array($result))
        {
            echo '<li class="sortme" alt="'.$item['ID'].'">"';
            echo '<div>'.$item['title'].'</div>';
            echo '<div>'.$item['param'].'</div></li>';
            $sort_order[] = $item['sequence'];
        }
    ?>
</ul>
<!--clearing float-->
<br style='clear:both;'>
</div>
<br />
<!--storing order here-->
<input type="hidden" name="sort_order" id="sort_order" 
        value="<?php echo implode($sort_order,'|'); ?>" />
</body>
</html>

And here is a drag and dropping example, without saving to database.

  • title2
    param2
  • title1
    param1
  • title3
    param3
  • title4
    param4


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus