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

Question

我正在 jquery 移动设备中创建一个应用程序，最终输出应该与此类似：

生成该图像的原始 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 based on date 是什么意思，但我已经更新了 jsfiddle 以准确输出示例中日期的格式。希望对你有帮助。

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

Formatting json content in jquery mobile list view

javascript

jquery

json

jquery-mobile