Question

我正在从外部查询中动态创建一系列<div>。使用Javascript创建<div>并使用单独的列表元素填充。结构类似于：

<div class="container" id="1">
    <li class="date"> </li>
    <li class="name"> </li>
<div>

搜索框在keyUp上运行一个jQuery livefilter，它隐藏了与搜索不匹配的<div>。

然后，我希望能够通过单击<li>（日期，名称等）中单个<div>元素的表头来对可见div进行排序。我已经尝试过使用tablesorter并将每个<li>放在<td>中，但是桌头最终位于正文下方但不起作用。

如何仅对当前可见的列表元素应用排序，但是对整个div进行排序？

Diagram of table

JSFiddle of live filter with non operational header.

Answer 1

每当遇到需要根据数据更改呈现内容的情况时，请考虑在数据和视图层之间进行解耦。因为您的视图必须根据数据更改进行更改。您可以自己实现这种逻辑，也可以使用Angular.js，Backbone.js，Ember.js等框架来试图解决这类问题。那么在你的情况下，有几种方法可以解决你的问题，但就像我之前说过的解耦会更好（我认为）。你可以做点什么

修改HTML（便于数据提取）。您可以保留原始HTML，但必须更改用于提取数据的逻辑。

Sort data by:
<a href="#">Date</a>&nbsp;<a href="#">Name</a>
<br />
<br />
<form id="live-search" action="" class="styled" method="post">
<fieldset>
    <input type="text" class="text-input" id="filter" value="Date" />
    <br />
    <input type="text" class="text-input" id="filter2" value="Name" />
    <br /> <span id="filter-count"></span>

</fieldset>
</form>
<ul class="records2" id="records">
<div data-record='{"year": "2012","name":"Joe"}'>
    <li>2012</li>
    <li>Joe</li>     
</div>
<br />
<div data-record='{"year": "2013","name":"Dave"}'>
    <li>2013</li>
    <li>Dave</li>

</div>
<br />
<div data-record='{"year":"2013","name":"Adam Brown"}'>
    <li>2013</li>
    <li>Adam Brown</li>  
</div>

function sortArray(arr, prop, asc) 
{
    arr = arr.sort(function(a, b) 
    {
        if (asc)
        {
            return (a[prop] > b[prop]);
        }
        else 
        {
            return (b[prop] > a[prop]);
        }
    });
    return arr;
}

$(document).ready(function () 
{
    var recordDiv = $('#records'), dataDivs = $('#records div'), data = [], sortLink = $('a');
    for (var i = 0, len = dataDivs.length; i < len; i++) 
    {
        var t = $(dataDivs[i]).attr('data-record');
        t = $.parseJSON(t);
        data.push(t);
    }
    sortLink.click(function()
    {
        var sortBy = this.innerHTML.toLowerCase();
        data = sortArray(data, sortBy, true);
        //Now render the element inside #record DIV as per sorted data
        return false;
    });
});

让我们知道它是怎么回事。：）

如何通过单个列表元素将表头排序应用于div？

1 个答案: