2016-04-26 17 views
0

Wie genau kann ich Tabellenzeilen sortierbar machen, wenn sie auf der Seite über Ajax geladen werden? ich auf der Seite Markup haben, wo ich den TischTabellenzeilen sortierbar machen

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

Dies ist das Skript über Ajax geladen werden, mit dem ich versuche, zu sortieren tr die auf dem Tisch

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

Als ich $("#mycart tbody").sortable({ legte es funktioniert, aber bewegt sich ganz mycart div. Also wie kann ich wählen, Tabelle, die nicht "wirklich" auf der Seite ... in der Quelle der Seite Ich sehe nur <div id="mycart" style="text-align:center;"> </div> .. Ich sehe keine tatsächliche Tabelle. Hier ist der js Whit, die ich Daten ziehen

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

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

Doe S muss es

verwenden oder wird ein div Grid-Layout in diesem Anwendungsfall ausreichen? Die Tabelle wird viel schwieriger, da Sie die Zeilen nicht verschieben können - Sie können den Inhalt nur in den Zeilen verschieben. Bei einer Tabelle müssen Sie also die Daten manipulieren. Mit einem Div-Raster können Sie die Divs sortieren, die die Daten enthalten. Scheint wie ein subtiler Unterschied, aber die Auswirkungen auf die Menge an Code, die Sie schreiben müssen, ist bedeutender. Ich sehe, dass Ihr Beispielcode auf die Tabellenelemente verweist - aber war das für Tabellen eine Entscheidungsgrundlage oder sind Sie durch die Architektur eingeschränkt? – Korgrue

+1

Tabelle passt einfach besser auf die gesamte Vision und Architektur der Website. Ist das nicht obligatorisch, aber vorzuziehen, um Tabelle zu sein. –

Antwort

3

Ich glaube, Sie brauchen die gleiche JQuery Sortable Funktion in Ihrer Ajax-Anforderung für den Erfolg Rückruf anrufen, direkt nach dem neuen HTML setzen:

success:function(response) { 

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

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

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

} 

-Update : Und Sie können die folgenden Funktionen außerhalb des $(document).ready({}); bewegen müssen:

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

Ich habe "Uncaught ReferenceError: fixHelperModified ist nicht definiert", wenn ich versuche, ('$ (" # mycart "). SlideToggle();') die Tabelle. –

+0

@BStud überprüfe mein Update – hmd

+0

Okay, jetzt werden die 'tr' bewegt, bewegen sich aber nicht wirklich. Ich meine, ich ziehe den Tr zu einem anderen Ort, bin aber wieder am ursprünglichen Ort. –