Question

我在jquery mobile中创建一个应用程序，其最终输出应该类似于：

生成该图像的原始html代码是

        <ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Today, May 1, 2016 <span class="ui-li-count">2</span></li>
      <li><a href="#">
        <h3>Reply</h3>
        <p>20,00 we do have discounts for earlier payers </p>


        <p class="ui-li-aside">10 mins ago</p>
      </a></li>
      <li><a href="#">
        <h4>Me</h4>
        <p>How much is the current fee per semester? Do you accet credit cards</p>
        <p class="ui-li-aside">25 mins ago</p>
      </a></li>
      <li data-role="list-divider">Yesterday, April 30, 2016 <span class="ui-li-count">1</span></li>
      <li><a href="#">
        <h3>Reply</h3>
        <p>Hello, How can i help you?</p>
        <p class="ui-li-aside">10:15 pm</p>
      </a></li>
        <li data-role="list-divider">Friday, April 29, 2016 <span class="ui-li-count">1</span></li>
      <li><a href="#">
        <h3>Me</h3>
        <p>Hello</p>
        <p class="ui-li-aside">10:15 pm</p>
      </a></li>
     </ul>

在我的项目中，我使用json从数据库中获取数据，并在上面的列表视图中向用户显示。

从数据库中获取数据的代码：

  var id_from = localStorage.loggedin_id;
  var id_to_send = localStorage.user_schoolls_head;
 $.getJSON("http://127.0.0.1/tum_old/custom/php/message.php",  
{id_from:id_from,id_to_send:id_to_send},
function(response){
console.log(response); 
});

在console.log（响应）之后，我得到了javascript对象：

来自列表的图片中的情况就像是from_id然后to_id（示例1：4）的情况，而答复则反之亦然。如何格式化显示时间：

Today, yeasterday...from hence(on) it will display the dats on the list dividers
Time to show 10mins ago, 20mins ago, but beyond 1 hour it shows the actual time (eg: 10:15pm)
How to also sort these messages according to dates so that 
the earliest is seen first in the today area..

即：它应该像第一张图像一样出现

我的数据库记录：

Answer 1

要格式化日期，您可以使用momentjs（http://momentjs.com）。只需在SQL查询中添加ORDER BY time_sent DESC

即可实现排序

Answer 2

查看this fiddle。

使用javascript对对象进行排序是非常不明智的。像Zoran所说，你应该使用ORDER BY time_sent DESC在查询中执行此操作。

<强>更新不确定 divider基于日期的意思，但我已经更新了jsfiddle以准确输出日期在您的示例中的格式。希望它有所帮助。

在jquery移动列表视图中格式化json内容

2 个答案: