Menu
I want to output some data from the database in a HTML table, and I want the user to be able to reorder table rows. To achieve this, I used jQuery UI sortable, thus:
<script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <?php while($row = mysql_fetch_assoc($co_authors)) { echo "<tr id='sortable'><td>{$row['author_email']}</td> <td>{$row['coauthor_level']}</td>"; <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>" paper="<?php echo $row['paper_id'] ?>">Remove</button></td> </tr>"; } ?> The problem is that when I drag a table tr, only td are dragged. Also, and most importantly, only the first row is dragable: the effect is not applied to other rows. How can I solve this?
892
By default its value is "input,textarea,button,select,option". This option is a selector that identifies another sortable element that can accept items from this sortable. This allows items from one list to be moved to other lists, a frequent and useful user interaction. If omitted, no other element is connected.
jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string passed as the first parameter.
ui-sortable-handle : The handle of each sortable item, specified using the handle option. By default, each sortable item itself is also the handle. ui-sortable-placeholder : The element used to show the future position of the item currently being sorted.
Sort Table by Clicking the Headers. Click the headers to sort the table. Click "Name" to sort by names, and "Country" to sort by country. The first time you click, the sorting direction is ascending (A to Z).
You can call sortable on a <tbody> instead of on the individual rows.
<table> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </tbody> </table> <script> $('tbody').sortable(); </script> $(function() { $( "tbody" ).sortable(); }); table { border-spacing: collapse; border-spacing: 0; } td { width: 50px; height: 25px; border: 1px solid black; } <link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.11.1.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <table> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
