显示可过滤的JSON数据

Question

我有JSON数据，这些数据按星期几分隔。

如果数据只是按日期列出，而不是在白天的数据中列出，我通常会使用数据表，以便它可以过滤。但是，我试图将数据分开，因此它有标题，如下所示：

使用这个json数据，我不确定如何使用数据表来执行此操作并使其可过滤。有没有人有任何建议（插件等），我应该用它来在可过滤的环境中以我想要的方式显示数据？

这最终是我想要显示数据的方式：

<div id="day_of_week">August 26, 2014</div>
<div id="event">
    <span id="time">5:52 AM</span>
    <span id="event_name">Page View</span>
    <div id="hidden_data">Data: Goes here</div>
</div>

Answer 1

你应该使用像@Thimoty建议的模板逻辑，手动实施，因为你需要它是轻量级的。我正在努力工作，我会尽快发布。

就是这样：http://jsfiddle.net/23e37v18/

HTML

 <div id="content">
    </div>
    <div id="template" style="display: none">
    <div class="day_of_week">August 26, 2014</div>
    <div class="event">
        <span class="time"></span>
        <span class="event_name"></span>
        <div class="hidden_data"></div>
    </div>
    </div>

JQuery的

var jsonText = '{"August 23, 2014":{"1409069553":{"Data":"Your event"},"1407859953 ":{"Data":"Your event"},"1399911153":{"Data":"Your event"}},"August 24, 2014":{"1409069553":{"Data":"Your event"},"1399911139 ":{"Data":"Your event"},"1399914139":{"Data":"Your event"}},"August 25, 2014":{"1407859953 ":{"Data":"Your event"}}}';

$(document).ready(function(){
    var data = JSON.parse(jsonText);
    for (var day in data){
        $('#content').append(day + '<br/>');
        // create block
        var blockData = data[day];
        var block = $('<div/>').addClass('event_block');

        for (var event in blockData){
            // your event block
            var eventDOM = $('#template .event').clone();

            // add content
            var date = new Date(event*1000)
            // TODO: format date for display
            $('.time', eventDOM).append(date);
            $('.time', eventDOM).append(blockData[event].Data);
            block.append(eventDOM);
        }

        $('#content').append(block);
    }
});