2012-11-08 4 views
0

J'essaye actuellement de trier une gamme de dates dynamiques en utilisant jQuery mais mon code ne semble pas fonctionner. Je ne comprends pas ce que je fais mal. Il semble bien fonctionner ici http://jsfiddle.net/Erah9/10/ (en utilisant l'exemple HTML et non PHP) mais pas quand j'utilise le code ci-dessous. Voilà ce que je l'ai fait jusqu'à présent:Le tri dynamique des dates ne fonctionne pas (en utilisant jQuery & PHP)

tableaux

$status = array("Allocated","Declined","Failed","Pending"); 
$day = array("1 - Mon","2 - Tue","3 - Wed","4 - Thu","5 - Fri"); 
$moduleCode = array("XXX101","XX107","XXX122","XXX123","XXX124","XXX201"); 
$room = array("X110","XX011","X020","XX012","XX013","X001", "X201"); 
$period = array("1 - 09:00","2 - 10:00","3 - 11:00","4 - 12:00","5 - 13:00"); 

PHP

<div style="padding-top: 20px;"> 
    <input class="btn" type="button" value="Oldest First" id="sortAsc"/> 
    <input class="btn" type="button" value="Newest First" id="sortDesc"/> 
</div> 
<div id="wrapper" style="padding-top: 10px"> 
     <ul> 
     <?php 
     $dateStart = new DateTime(); 
     $dateStart->setDate(2012, 10, 01); 
     $dateEnd = new DateTime(); 
     $dateEnd->setDate(2012, 12, 01); 

     $dates = array(); 
     while ($dateStart < $dateEnd) { 
     $status_txt = $status[array_rand($status)]; 
     $room_txt = $room[array_rand($room)]; 
     $moduleCode_txt = $moduleCode[array_rand($moduleCode)]; 
     $day_txt = $day[array_rand($day)]; 
     $period_txt = $period[array_rand($period)]; 

     printf(
     "<li class='item'><div class='activity_date'>%s</div> 
     <div class='activity_box'> 
     <div class='activity_text' id='act'>" . $status_txt . ' request for room 
     '.$room_txt.' made by department CO for module '.$moduleCode_txt.' on 
     '.substr($day_txt,3, 4).' '.substr($period_txt,3,6).'</div> 
     </div></li>', 
     $dateStart->format("d/m/Y") 
     ); 

     $dateStart->modify(sprintf("+%d day",mt_rand(1, 10))); 
     } 
     ?> 
     </ul> 
     </div> 

JS

$(window).load(function() { 
    var itemsArray = $.makeArray($("li.item")); 
    itemsArray.sort(function(a,b){ 
     var aTime = new Date(parseDate($(a).find('.activity_date').text())).getTime(); 
     var bTime = new Date(parseDate($(b).find('.activity_date').text())).getTime(); 
     return bTime - aTime; 
    }); 

    $('#sortAsc').click(function(){ 
     $("#wrapper").empty().append("<ul></ul>"); 
     $(itemsArray).each(function(){ 
      $("#wrapper ul").prepend($(this)); 
     }); 
    }); 

    $('#sortDesc').click(function(){ 
     $("#wrapper").empty().append("<ul></ul>"); 
     $(itemsArray).each(function(){ 
      $("#wrapper ul").append($(this)); 
     }); 
    });   
}); 

function parseDate(input) { 
    var parts = input.match(/(\d+)/g); 
    var date = new Date(parts[2], parts[1], parts[0], 0, 0, 0); 
    return date; 
}  

Répondre

1

Peut-on voir le contenu pour les tableaux état de $, $ chambre etc.

Recréer votre PHP (mise à jour, voir commentaire ci-dessous) et il fonctionne correctement pour moi.

<!DOCTYPE HTML> 
    <html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript"> 
    $(window).load(function() { 
     var itemsArray = $.makeArray($("li.item")); 
     itemsArray.sort(function(a,b){ 
      var aTime = new Date(parseDate($(a).find('.activity_date').text())).getTime(); 
      var bTime = new Date(parseDate($(b).find('.activity_date').text())).getTime(); 
      return bTime - aTime; 
     }); 

     $('#sortAsc').click(function(){ 
      $("#wrapper").empty().append("<ul></ul>"); 
      $(itemsArray).each(function(){ 
       $("#wrapper ul").prepend($(this)); 
      }); 
     }); 

     $('#sortDesc').click(function(){ 
      $("#wrapper").empty().append("<ul></ul>"); 
      $(itemsArray).each(function(){ 
       $("#wrapper ul").append($(this)); 
      }); 
     });   
    }); 


    function parseDate(input) { 
     var parts = input.match(/(\d+)/g); 
     var date = new Date(parts[2], parts[1], parts[0], 0, 0, 0); 
     return date; 
    }  
    </script> 
     </head> 
    <body> 
     <div style="padding-top: 20px;"> 
     <input class="btn" type="button" value="Oldest First" id="sortAsc"/> 
     <input class="btn" type="button" value="Newest First" id="sortDesc"/> 
    </div> 
    <div id="wrapper" style="padding-top: 10px"> 
      <ul> 
      <?php 

      $status = array("Allocated","Declined","Failed","Pending"); 
    $day = array("1 - Mon","2 - Tue","3 - Wed","4 - Thu","5 - Fri"); 
    $moduleCode = array("XXX101","XX107","XXX122","XXX123","XXX124","XXX201"); 
    $room = array("X110","XX011","X020","XX012","XX013","X001", "X201"); 
    $period = array("1 - 09:00","2 - 10:00","3 - 11:00","4 - 12:00","5 - 13:00"); 



      $dateStart = new DateTime(); 
      $dateStart->setDate(2012, 10, 01); 
      $dateEnd = new DateTime(); 
      $dateEnd->setDate(2012, 12, 01); 

      $dates = array(); 
      while ($dateStart < $dateEnd) { 
    $status_txt = $status[array_rand($status)]; 
      $room_txt = $room[array_rand($room)]; 
      $moduleCode_txt = $moduleCode[array_rand($moduleCode)]; 
      $day_txt = $day[array_rand($day)]; 
      $period_txt = $period[array_rand($period)]; 

      printf(
      "<li class='item'><div class='activity_date'>%s</div> 
      <div class='activity_box'> 
      <div class='activity_text' id='act'>" . $status_txt . ' request for room 
      '.$room_txt.' made by department CO for module '.$moduleCode_txt.' on 
      '.substr($day_txt,3, 4).' '.substr($period_txt,3,6).'</div> 
      </div></li>', 
      $dateStart->format("d/m/Y") 
      ); 

      $dateStart->modify(sprintf("+%d day",mt_rand(1, 10))); 
      } 
      ?> 
      </ul> 
      </div> 
    </body> 
    </html> 
+0

J'ai mis à jour la question d'inclure les tableaux utilisés – methuselah

+0

Tel est le contexte du code jQuery que j'utilise: http://pastebin.com/tGC1rsmY – methuselah

+0

quand j'ajouter vos tableaux et RE- insérez vos affectations aléatoires, encore une fois, il fonctionne correctement, réorganiser les événements que je clique sur les boutons. Je vais éditer mon exemple de code, alors ça vaudrait la peine de le déposer dans un fichier et de voir quel résultat vous obtenez. Vraisemblablement, quelque chose de votre autre contexte est en train de faire obstacle - recevez-vous des erreurs? avez-vous essayé d'écrire sur la console à différents moments dans vos relevés de commande? –

Questions connexes