jQuery sortable and array resort

Question

I have an array of elements: markers and a table which updates it's rows to populate with the data stored within markers. markers itself houses an object marker which has a latitude and longitude amongst other things.

When I populate the table with the details from the markers array I give each row an ID based on i as it loops through.

On this table I have jQuery sortable. I am looking for a way to re-order my markers array each time the rows are sorted, so that the position of the item in the array is actually it's sort order value. That way, I can simply loop through the array at any time and see it's most up to date order.

So far I have the table generating as should and the markers array populated. I am even able to grab back the order of the rows after shuffling them around, at the moment I store them in an array orders and just alert, this works (ie. 0,1,2 > dragged to resort > 2,0,1). I was hoping for a way of now using the set of values in orders to resort my original markers array.

I thought it would involve creating a temporary array markersTemp with which to store the values saved in markers but in the new order, except I'm not sure how to loop through to save each one. Anyone done anything similar?

Thanks for your interest, I did get it solved but maybe you can answer my question in the answer below? — Chris
– Chris, Commented Oct 11, 2011 at 13:39

Rob W · Accepted Answer · 2011-10-11 14:31:04Z

1

function resort() {
    var order = []; // Get the order of the new rows
    $('#createMapDirections tbody tr').each(function(i, elem){
        order.push(markers[getId($("td", elem))]);
    });
    markers = order;
    updateAll();
}

Old procedure:

Create a new list order
Loop through the current rows in the table.
Store the IDs at the current rows in list order
Create a new list markersTemp
Loop through list order
Get the ID at position i in list order.
Let markersTemp[i] be the element in markers (referred at the old position through id)
Reset markers
Set markers to markersTemp

Optimized:

Create a new list order
Loop through each row in the table.
Push the element, as referred by the index as returned from getId() in order
Overwrite markers by order.

answered Oct 11, 2011 at 14:31

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

1 Comment

Chris Over a year ago

Works a treat! As for the position of the id, it is in fact on the table row, but I use getId() elsewhere passing in an element inside one of the table cells. getId() itself actually looks like this ((added to my answer instead due to formatting))

Chris · Accepted Answer · 2011-10-11 14:49:26Z

0

Ahh, apologies for wasting everyones time! 5 more minutes and I got it solved. For others with the problem, here's my entire function called after a sortable dropped event.

I wouldn't say it was entirely over though. I would be very interested to know if this is the most efficient/tidiest way to do this. I am aware there is an array .sort() function built into javascript, could this be used instead?

function resort() {

    var order = new Array(); // Get the order of the new rows
    for (var i = 0; i < markers.length; i++) {
        order.push(getId($('#createMapDirections tbody tr').eq(i).find('td')));
    }

    var markersTemp = new Array();
    for (var i = 0; i < markers.length; i++) {
        var id = order[i];
        markersTemp[i] = markers[id];
    }

    markers.length = 0;
    markers = markersTemp.slice();

    updateAll();

}

Edit:

Ok so my table on the page is laid out like so:

<table><tbody>
    <tr id="row0"><td></td></tr>
    <tr id="row1"><td></td></tr>
    <tr id="row2"><td></td></tr>
</tbody></table>

getId() simply grabs the id of the TR and runs a little regex to get only the number. When they are resorted then the order might be something like: row2, row0, row1. I store this order in orders (a temporary array) and populate markersTemp (another temporary array) with the values of markersTemp but in the new order.

function getId(button) {
    return $(button).parents('tr').attr('id').replace(new RegExp('\[A-Za-z]+'), '');
}

edited Oct 11, 2011 at 14:49

answered Oct 11, 2011 at 13:39

Chris

2,6464 gold badges32 silver badges59 bronze badges

2 Comments

Rob W Over a year ago

Define getId. And yes, there's an Array.sort function. I have created several sorting algorithms already. Just post the relevant code, and I will adjust one of these for your case.

Rob W Over a year ago

I've posted an optimized script. Your code example does not equal your code: Your example mentions id to be attached to a row, while the code alleges the ID to be a property of a cell.

Collectives™ on Stack Overflow

jQuery sortable and array resort

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related