2016-12-07 13 views
1

Meine Website generiert diese Listenelemente Daten aus der Datenbank abrufen:sortieren Listenelemente basierend auf Array

<ul id="sortable" class="ui-sortable"> 
    <li id="2" data-order="2" class="ui-state-default ui-sortable-handle" >Data</li> 
    <li id="5" data-order="5" class="ui-state-default ui-sortable-handle" >Data</li> 
    <li id="15" data-order="15" class="ui-state-default ui-sortable-handle" >Data</li> 
    <li id="23" data-order="23" class="ui-state-default ui-sortable-handle" >Data</li> 

</ul> 




function loadData(){ 
      $("#ajaxLoader").show(); 
      $.ajax({ 
       type:"POST", 
       url:"getItinerari.php" 
      }).done(function(itinerario_out){ 
       //console.log(itinerario_out); 
       var route = JSON.parse(itinerario_out); 
       for(var i in route){ 
        var sortableDiv = '<li id="'+ route[i].it_id +'" data-order="'+ route[i].it_id +'" class="ui-state-default" style="">'+ route[i].itinerario +'<a href="edit.php?id='+ route[i].it_id +'"><img src="../images/file_edit.png" alt="Modifica" width="35px" height="auto"></a><a onclick="return deleteConferme();" href="delete.php?it_id='+ route[i].it_id +'"><img src="../images/delete.png" alt="Elimina" width="35px" height="auto"></a></li>'; 
        $("#sortable").append(sortableDiv); 

       } 


       /****sortable*****/ 
       $('#sortable').sortable({ 


        update: function(event, ui) { 
         var arr = $(this).sortable('toArray'); 
         var i, n; 
         var datapost = []; 
         for (i = 0, n = arr.length; i < n; i++) { 
          datapost.push($('#' + arr[i]).data('order')); 
         } 

        $.post('saveSortable.php', {list: datapost}, function (o) { 
         alert(o); 
        }); 

        } 


       }); 
       /****sortable*****/ 





       $("#ajaxLoader").hide(); 
      }); 
      //fine done 

     } 

Diese Elemente sind sortierbar, so kann ich von der DB mit dem letzten Artikel, um eine Reihe zu bekommen.

var sortierte = [23, 5, 15, 2];

Wie kann ich auf der nächsten Seite die Einträge nach diesem Array sortieren? Dank

Antwort

2

Sie das Array iterieren kann mit Array.prototype.forEach(), .appendTo() die Elemente übergeordnete Element in der Reihenfolge der Array-Elemente

var sorted = [23, 5, 15, 2]; 
 
sorted.forEach(function(id) { 
 
    $("#" + id).appendTo("#sortable") 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="sortable" class="ui-sortable"> 
 
    <li id="2" data-order="2" class="ui-state-default ui-sortable-handle">Data 2</li> 
 
    <li id="5" data-order="5" class="ui-state-default ui-sortable-handle">Data 5</li> 
 
    <li id="15" data-order="15" class="ui-state-default ui-sortable-handle">Data 15</li> 
 
    <li id="23" data-order="23" class="ui-state-default ui-sortable-handle">Data 23</li> 
 
</ul>

+0

Leider anhängen, ich war nicht so klar. Elemente sind bereits an das übergeordnete Element angehängt – user3187960

+0

@ user3187960 Ja, '.appendTo()' hängt die Elemente erneut an das übergeordnete Element in der Reihenfolge an, die dem Wert des Elements des Arrays 'sorted' entspricht – guest271314

Verwandte Themen