需要表分拣机（手动完成）答案

【问题标题】：Need Table Sorter (Manually Done)需要表分拣机（手动完成）
【发布时间】：2016-10-30 18:02:27
【问题描述】：

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

<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 工作......我不'不知道是哪一个（虽然这里没有给出）...我需要手动进行表格排序。

有什么想法，请指教.....

【问题讨论】：

你都试过什么？
当我在 google 中搜索关键字“tablesorter”时...无论结果如何...@masterofdestiny
选择一项 Google 结果并将代码和错误消息添加到您的问题中。
我的意思是你能在没有 jquery 的情况下制作表格排序器吗（我可能不知道，但它需要是动态的）
@Sven 没有错误信息，但是表格没有排序功能

标签： php jquery html sorting html-table

【解决方案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

【讨论】：

谢谢伙计，但我试过这个......它不适合我......好吧，我会发布脚本......这给了我这些困难......
他我做了一些改变，看看它

【解决方案2】：

使用来自 Chrisrtian Bach 的出色 tablesorter plugin，它可以与您提供的代码 (see here) 完美配合。

脚本

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

尝试分解您的问题。为自己设置一个最低限度的测试页面。我建议使用 table 和 tablesorter 脚本（和 jquery）。然后一次添加一个其他 javascritpt 库，直到您可以确定是哪一个导致了问题。如果在添加库后仍然无法复制问题，则需要进一步挖掘页面上的其他脚本和标记。是否有其他具有相同 ID 的元素正在尝试将表绑定到等。

【讨论】：