-1

我在网页中有一个如下表格来显示从数据库中获取的结果，

<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>

我尝试了所有网站上可用的每个tablesorter jquery 插件，但是一些 jquery 库函数（在我的网页中）阻止了tablesorter工作......我不知道哪个（虽然这里没有给出）......我需要手动进行表格排序。

有什么想法吗，求指教。。。。。

4

2 回答 2

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 回答
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 库，直到您可以确定是哪一个导致了问题。如果在添加库后仍然无法复制问题，则需要进一步挖掘页面上的其他脚本和标记。是否有其他具有相同 ID 的元素与您尝试将表绑定到等。

于 2013-02-27T05:27:01.067 回答