How do I use jQuery sortable?

How do I use jQuery UI's sortable functionality on a table with lazy loading?

• I need to create a table that uses lazy loading instead of paging to dynamically display content beyond the initial load and is sortable via jQuery UI's sortable functionality. The lazy loading is implemented by checking scrollTop and scrollHeight to determine how close to the bottom of the page the user is. When they get close enough I make an AJAX call to get another set of data that I append as table rows to the end of the table. I have jQuery UI sortable implemented on the TABLE, but the problem is that it won't let me drag a TR past the last TR in the original TABLE. It remembers which TR was the last child and then prevents me from going beyond that. The next time I try to drag a TR it knows where the new end is, but I run into the same problem when I load more in. What I want to happen is as the user drags a TR down the TABLE can lazy load some new data in and the user can continue to drag through to the new set of data since it seems kind of inconvenient for them to have to keep dropping in order to be able to start dragging again. I have a feeling that this would require a fundamental change to the code within the sortable functions, but I was hoping someone may have already figured out a way to get around this. UPDATE: I tried using the connectWith option. Instead of adding the dynamically loaded rows to the same TBODY I instead put them in their own TBODY which was also sortable and set both the new one and the original one up with the connectWith option (same class for all TBODY elements). Unfortunately that didn't work any differently. I can still drag across the whole TABLE after dropping the TR, but not while still in the original dragging context. This is frustrating since it's not a great user experience.

• Answer:

  Ive written before a week - my own jQuery Table sorter : ( asc/desc) function sortTableJquery() { var tbl =$("#tbl tr"); var store = []; var sortElementIndex = parseFloat($.data(document.body, "sortElement")); for (var i = 0, len = $(tbl).length; i < len; i++) { var rowDom = $(tbl).eq(i); var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text()); store.push([rowData, rowDom]); } store.sort(function (x, y) { if (x[0].toLowerCase() == y[0].toLowerCase()) return 0; if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir")); else return 1 * parseFloat($.data(document.body, "sortDir")); }); for (var i = 0, len = store.length; i < len; i++) { $("#tbl").append(store[i][1]); } store = null; }