2

<div>外部クエリから一連の を動的に作成しています。Javascript を使用すると、 a<div>が作成され、個別のリスト要素が取り込まれます。構造は次のようなものです。

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

検索ボックスは、検索に一致しない を非表示にする keyUp で jQuery livefilter を実行し<div>ます。

次に、 (日付、名前など)の個々の<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 に答える