jquery - Sortable table rows using one column -
i'm not sure if title describes problem. i'm trying make table values can changed inline (using contenteditable) , sortable.
unfortunately, have no idea how combine these features together. html looks this:
<table id="sort"> <thead> <tr> <th>#</th> <th>name</th> <th>last name</th> <th>position</th> </tr> </thead> <tbody> <tr> <td>1</td> <td contenteditable="true">john</td> <td contenteditable="true">doe</td> <td><img src="images/3-lines.png" /></td> </tr> <tr> <td>1</td> <td contenteditable="true">john</td> <td contenteditable="true">doe</td> <td><img src="images/3-lines.png" /></td> </tr> </tbody> </table> the js looks this:
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; }, updateindex = function(e, ui) { $('td.index', ui.item.parent()).each(function (i) { $(this).html(i + 1); }); }; $("#sort tbody").sortable({ helper: fixhelpermodified, stop: updateindex }).disableselection(); i keep contenteditable attribute. user should able reorder rows draging "3-lines.png" icon on far right cell.
it's possible?
if can add jquery plugin, use datatables, want, think.
https://editor.datatables.net/examples/inline-editing/simple
Comments
Post a Comment