"Reorder Rows"
Bootstrap 3.3.0 Snippet by xanar

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Pulled from http://www.avtex.com/blog/2015/01/27/drag-and-drop-sorting-of-table-rows-in-priority-order/ --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Steven Ray: Drag and drop sorting of table rows</title> <link href="../demo.css" type="text/css" rel="stylesheet" /> <!-- Bootstrap CSS --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!-- jQuery UI CSS --> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Helper function to keep table row from collapsing when being sorted var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }; //Make diagnosis table sortable $("#diagnosis_list tbody").sortable({ helper: fixHelperModified, stop: function(event,ui) {renumber_table('#diagnosis_list')} }).disableSelection(); //Delete button in table rows $('table').on('click','.btn-delete',function() { tableID = '#' + $(this).closest('table').attr('id'); r = confirm('Delete this item?'); if(r) { $(this).closest('tr').remove(); renumber_table(tableID); } }); }); //Renumber table rows function renumber_table(tableID) { $(tableID + " tr").each(function() { count = $(this).parent().children().index($(this)) + 1; $(this).find('.priority').html(count); }); } </script> <style type="text/css"> .ui-sortable tr { cursor:pointer; } .ui-sortable tr:hover { background:rgba(244,251,17,0.45); } </style> </head> <body> <div id="content" class="container"> <h1>Sortable table</h1> <table class="table" id="diagnosis_list"> <thead> <tr><th>Priority</th><th>Name</th><th>Favorite fruit</th><th>Vegetarian?</th><th> </th></tr> </thead> <tbody> <tr><td class='priority'>1</td><td>George Washington</td><td>Apple</td><td>N</td><td><a class='btn btn-delete btn-danger'>Delete</a></td></tr> <tr><td class='priority'>2</td><td>John Adams</td><td>Pear</td><td>Y</td><td><a class='btn btn-delete btn-danger'>Delete</a></td></tr> <tr><td class='priority'>3</td><td>Thomas Jefferson</td><td>Banana</td><td>Y</td><td><a class='btn btn-delete btn-danger'>Delete</a></td></tr> <tr><td class='priority'>4</td><td>Ben Franklin</td><td>Kumquat</td><td>N</td><td><a class='btn btn-delete btn-danger'>Delete</a></td></tr> <tr><td class='priority'>5</td><td>Alexander Hamilton</td><td>Red grapes</td><td>N</td><td><a class='btn btn-delete btn-danger'>Delete</a></td></tr> </tbody> </table> </div> </body> </html>

Related: See More

Paper Kit 2
Carousel Rows

Questions / Comments: