2016-04-14 10 views
1

ajaxを使用してボタンをクリックすると表示されるテーブルがあります。ここでは、コードスニペットです:この後ajaxの日付でテーブルの列をソート

myBtn.on("click", function() { 
    displayTable(); 
}); 

function displayTable(){ 
    $.ajax({ 
     url:'url to a function in controller', 
     type: "GET", 
     //data: {val : val}, 
     dataType: 'json', 
     success: function(data){ 

      // some codes here 

      $.each(data.documents, function(key, value){       
       $("#myTable") 
       .append(
        "<tr class='" + rowClass + "'><td class='text-center'>" +      
         value.title + 
        "</td><td class='text-center'>" +    
         value.time1.replace(/-/g, "/") + 
        "</td><td class='text-center'>" +     
         value.time2.replace(/-/g, "/") + 
        "</td></tr>" 
       ); 
      }); 
     } 
    }); 
} 

、表が表示されますが、それは、日付(value.time2)でソートされません。私はこれを試しても動作していません:

$("#myTable thead tr").find('th').eq(3).sort(function(a,b){ 
    return new Date($(a).value.time2) > new Date($(b).value.time2); 
}); 

どうすればいいですか?日付(value.time2)でソートするにはどうすればいいですか?

答えて

0

サーバーに値をソートするように要求するのが最善の方法です。ただし、クライアント側でこれを実行する必要がある場合は、ページに追加する前にdata.documentsを並べ替えるだけで済みます。例:

 data.documents = data.documents.map(function(item) { 
      // Fix display 
      item.time1 = item.time1.replace(/-/g, "/"); 
      item.time2 = item.time2.replace(/-/g, "/"); 
      return item; 
     }); 
     data.documents.sort(function(a, b) { 
      // Custom sorting function 
      return new Date(a.time2) > new Date(b.time2); 
     }); 

     $.each(data.documents, function(key, value){       
      $("#myTable") 
      .append(
       "<tr class='" + rowClass + "'><td class='text-center'>" +      
        value.title + 
       "</td><td class='text-center'>" +    
        value.time1 + 
       "</td><td class='text-center'>" +     
        value.time2 + 
       "</td></tr>" 
      ); 
     }); 
+0

ありがとうございます。私はこれを試してみる。あなたに戻ってきます。 –

+0

Ethelene Laverne、アップデートをご覧ください。私は不足している 'return item;'を 'map'呼び出しに追加しました。 –

+0

ありがとうございます。 –