-1

DBからフェッチされた結果を表示するために、Webページに次のようなテーブルがあります。

<table id="newspaper-a">
    <thead>
        <tr>
            <th scope="col">Word</th>
            <th scope="col">Rank</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>stol</td><td>0</td></tr>
        <tr><td>stole</td><td>0</td></tr>
        <tr><td>stoll</td><td>0</td></tr>
        <tr><td>strohl</td><td>0</td></tr>
        <tr><td>strole</td><td>0</td></tr>
        <tr><td>stroll</td><td>0</td></tr>
        <tr><td>thoele</td><td>0</td></tr>
    </tbody>
</table>

すべての Web サイトで利用可能なすべてのtablesorter jquery プラグインを試しましたが、いくつかの jquery ライブラリ関数 (私の Web ページ内) がtablesorterの動作をブロックしています...どれが (ここには示されていませんが) わかりません...必要ですテーブルソートを手動で行う。

アイデアはありますか、アドバイスをお願いします.....

4

2 に答える 2

1

Chrisrtian Bachの素晴らしいtablesorter プラグインを使用する と、提供されたコードで問題なく動作します (こちらを参照)。

脚本 

/*Make sure to include javascript and table sorter libraries*/    
$(document).ready(function () {
    $("#newspaper-a").tablesorter({widgets: ['zebra']});
});

問題を分解してみてください。最低限のテスト ページを設定します。table および tablesorter スクリプト (および jquery) をお勧めします。次に、他の javascritpt ライブラリを 1 つずつ追加して、どのライブラリが問題の原因であるかを突き止めます。ライブラリを追加しても問題を再現できない場合は、ページ上の他のスクリプトとマークアップをさらに掘り下げる必要があります。テーブルをバインドしようとしているのと同じ ID を持つ他の要素はありますか?

于 2013-02-27T05:27:01.067 に答える
1

こんにちは、このコードを試してみてください

<!DOCTYPE html>
<html>
    <head>
<title>Light Javascript Table Sorter</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
<style>

h2 {
  margin-bottom: 50px;
}

.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}

.container table {
  width: 100%;
}

.container td, .container th {
  padding: 10px;
}

.container td:first-child, .container th:first-child {
  padding-left: 20px;
}

.container td:last-child, .container th:last-child {
  padding-right: 20px;
}

.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
  cursor: pointer;
}

.container th.desc:after {
  border-top-color: #666;
}

.container th.asc:before {
  border-bottom-color: #666;
}

.container th:after, .container th:before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  width: 0;
  height: 0;
}

.container th:after {
  border-top-color: #ddd;
  top: 22px;
}

.container th:before {
  border-bottom-color: #ddd;
  top: 10px;
}

.github {
  margin-top: 50px;
}



</style>

<script>

(function(document) {
    'use strict';

    var LightTableSorter = (function(Arr) {

        var _th, _cellIndex, _order = '';

        function _text(row) {
            return row.cells.item(_cellIndex).textContent.toLowerCase();
        }

        function _sort(a, b) {
            var va = _text(a), vb = _text(b), n = parseInt(va, 10);
            if (n) {
                va = n;
                vb = parseInt(vb, 10);
            }
            return va > vb ? 1 : va < vb ? -1 : 0;
        }

        function _toggle() {
            var c = _order !== 'asc' ? 'asc' : 'desc';
            _th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
            _order = c;
        }

        function _reset() {
            _th.className = _th.className.replace('asc', '').replace('desc', '');
            _order = '';
        }

        function onClickEvent(e) {
            if (_th && _cellIndex !== e.target.cellIndex) {
                _reset();
            }
            _th = e.target;
            _cellIndex = _th.cellIndex;
            var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
                rows = tbody.rows;
            if (rows) {
                rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
                if (_order === 'asc') {
                    Arr.reverse.call(rows);
                }
                _toggle();
                tbody.innerHtml = '';
                Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
            }
        }

        return {
            init: function() {
                var ths = document.getElementsByTagName('th');
                Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            LightTableSorter.init();
        }
    });

})(document);
</script>
    </head>
    <body>
<section class="container">

    <h2>Light Javascript Table Sorter</h2>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@gmail.com</td>
                <td>0123456789</td>
                <td>99</td>
            </tr>
            <tr>
                <td>Jane Vanda</td>
                <td>jane@vanda.org</td>
                <td>9876543210</td>
                <td>349</td>
            </tr>
            <tr>
                <td>Alferd Penyworth</td>
                <td>alfred@batman.com</td>
                <td>6754328901</td>
                <td>199</td>
            </tr>
        </tbody>
    </table>


</section>

    </body>
</html>

ライブデモについては、このリンクを参照してください... http://cssdeck.com/labs/light-javascript-table-sorter

于 2013-02-21T13:24:44.117 に答える