2017-01-02 5 views
0

Ich habe mehrere ul anrufen und gefühl ul id dynamisch wieWie soratble Funktion mit dynamischer ul id

<ul id='sortable1'><li></li><li></li></ul><ul id="sortable2"><li></li><li></li></ul><ul id="sortable3"><li></li><li></li></ul> 

$(function() { 
      $("#sortable1").sortable({ 
       axis: 'y', 
       update: function(event, ui) { 
        var unit_list_sortable = $(this).sortable('toArray').toString(); 
        alert(unit_list_sortable); 
        $.ajax({ 
         url: 'addPhaseUnits.php', 
         type: 'POST', 
         data: {unit_list_sortable:unit_list_sortable,action:'unit_sort_num'}, 
         success: function(data) { 
         } 
        }); 
       } 
      }); 
     }); 

Wie diese Funktion sortierbar zu machen. Ul is arbeitet in einer Schleife und diese ID kommt aus der Datenbank. Bitte helfen Sie.

Antwort

0

zum Sortieren, Suchen Link hier unten https://datatables.net/

$(document).ready(function(){ 
 
    $('#myTable').dataTable(); 
 
});
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>TABLE</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
\t <script src="https://use.fontawesome.com/97755550d3.js"></script> 
 
\t <!--for search , sorting and tabl--> 
 
\t <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"> 
 
\t <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="col-md-12 table-responsive"> 
 
    <table class="table table-hover" id="myTable"> 
 
    <thead> 
 
     <tr> 
 
     <th>ID</th> 
 
     <th>Uploaded Date</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>01-01-2017</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>01-01-2017</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>01-01-2017</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>01-01-2017</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</body> 
 
</html>

+0

Danke verwenden, aber diese Antwort Dieser Code wird die Verwendung Plugin Datentabellen arbeiten hat nichts mit meiner Frage zu tun. @pavan – neha910

0

Sie können ID * jquery Selektor

$(function() { 
      $('[id*="sortable"]').sortable({ 
       axis: 'y', 
       update: function(event, ui) { 
        var unit_list_sortable = $(this).sortable('toArray').toString(); 
        alert(unit_list_sortable); 
        $.ajax({ 
         url: 'addPhaseUnits.php', 
         type: 'POST', 
         data: {unit_list_sortable:unit_list_sortable,action:'unit_sort_num'}, 
         success: function(data) { 
         } 
        }); 
       } 
      }); 
     }); 
Verwandte Themen