2

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

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

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

然后，我希望能够通过单击处理（日期、名称等）中各个<li>元素的表头来对可见的 div 进行排序。<div>我尝试使用 tablesorter 并将每个<li>放入 a<td>但表头最终位于身体下方并且不起作用。

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

表格示意图

带有非操作标头的实时过滤器的 JSFiddle。

4

1 回答 1

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;
    });
});

让我们知道怎么回事。:)

于 2013-03-20T19:32:59.993 回答