Making table rows sortable

Question

How exactly I can make table rows sortable when they are loaded on page via ajax? I have on the page markup where I load the table via ajax

<div id="mycart" style="text-align:center;"> </div>

This is the script with which I trying to sort tr's on the table

$(document).ready(function() {
   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();
});

When I put $("#mycart tbody").sortable({ it is working but is moving whole mycart div. So how can I select table which isn't "really" on the page... in source of the page I see only <div id="mycart" style="text-align:center;"> </div>.. I don't see actual table. Here is the js whit which I pull data

function show_cart()
{
  $.ajax({
  type:'post',
  url:'includes/store_items.php',
  data:{
    showcart:"cart"
  },
  success:function(response) {
    document.getElementById("mycart").innerHTML=response;

    $("#mycart").slideToggle();
  }
 });

Does it have to use <table> or will a div grid layout suffice in this use case? Table is going to get much harder since you cant move the rows - you can only move the content in the rows. So with a table, you will have to manipulate the data. With a div grid, you can sort the div's containing the data. Seems like a subtle difference, but the implications on the amount of code you will have to write is more significant. I see your example code references the table elements - but was using tables for this a decision on your end or are you constrained by the architecture? — Korgrue
– Korgrue, Commented Apr 26, 2016 at 14:20
Table just fit better on whole vision and architecture of the site. Isn't that mandatory but is preferable to be table. — user6197965
– user6197965, Commented Apr 26, 2016 at 14:29

hmd · Accepted Answer · 2016-04-26 14:33:54Z

3

I think you need to call the same JQuery Sortable function in your ajax request's success callback, right after putting the new HTML:

 success:function(response) {   

     document.getElementById("mycart").innerHTML=response;
     // or $("#mycart").html(response);

     $("#sort tbody").sortable({
        helper: fixHelperModified,
        stop: updateIndex
     }).disableSelection();

     $("#mycart").slideToggle();

}

Update: And you may need to move the following functions outside the $(document).ready({});:

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);
    });
};

edited Apr 26, 2016 at 14:33

answered Apr 26, 2016 at 14:20

hmd

9702 gold badges9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user6197965 Over a year ago

I've got Uncaught ReferenceError: fixHelperModified is not defined when I try to slideout ($("#mycart").slideToggle();) the table.

user6197965 Over a year ago

Okay, now the tr are getting moved but doesn't actually move. I mean I drag the tr to another tr place but is back on the original place.

user6197965 Over a year ago

Well .. still same. I can move around tr but doesn't go on new place .. just goes back to his place

user6197965 Over a year ago

Anyway I will accept your answer it was helpful and I will figured it out why doesn't want to stay on the new place.

hmd Over a year ago

Glad that it helped you somehow. It seems like now you have an issue with your sortable function's properties according to the situation. You can post an other question with complete current code.

|

Collectives™ on Stack Overflow

Making table rows sortable

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related