2012-11-08 55 views
0

我目前正在嘗試使用jQuery排序一系列的動態日期,但我的代碼似乎並沒有工作。我不明白我做錯了什麼。它似乎在這裏工作得很好http://jsfiddle.net/Erah9/10/(使用示例HTML而不是PHP),但不是當我使用下面的代碼。這是我迄今所做的:動態日期排序不工作(使用jQuery和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"); 

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; 
}  

回答

1

我們可以看到陣列$地位,$室等一些內容

重新創建你的PHP(更新,請參見下面的評論),它爲我正常運行。

<!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

我已經更新的問題,包括在陣列中使用 – methuselah

+0

這是我使用jQuery代碼的情況下:http://pastebin.com/tGC1rsmY – methuselah

+0

當我添加您的陣列和重新插入你的隨機分配,它再次正常工作,點擊按鈕重新排序事件。我將編輯我的代碼示例,然後將它放入文件並查看得到的結果可能是值得的。據推測,你的其他環境中的某些東西正在妨礙你接受任何錯誤?你有沒有嘗試在你的重新排序聲明中的不同位置寫入控制檯? –