8

是的，我知道有很多JS/jQuery 程序可以做到这一点。我目前正在使用http://www.kryogenix.org/code/browser/sorttable/sorttable.js。这很简单：只需一个 JS 文件，向您的表中添加一些类属性，然后就可以了。特别是，您实际上不需要了解 JS 即可使用它，并且您可以添加自定义排序键，而无需编写自己的 JS 来扩展它。由于这两个原因，我非常喜欢它。主要问题：我的表大约 9300 行长，排序需要 10-20 秒。所以我想知道，还有比这更快的脚本吗？这些是我发现的：

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html（甚至不知道这有什么用）
http://tablesorter.com/docs/（真的很好，但不容易扩展，需要了解 JS/ jQuery) http://flexigrid.info/ (Overkill，我只需要一个表格排序器，而不是一个完整的数据操作程序)
http://datatables.net/ (Overkill，需要 Js/jQuery 来扩展)

我敢肯定还有 5000 个其他程序可以做我想做的事，但我没有时间弄清楚并测试它们是否都快。因此，我想知道 StackOverflow 上的某个人是否可以将我指向他们知道速度快的任何库，所以我只需要弄清楚如何使用一个程序。

（顺便说一句，我已经看到 Java 使用快速排序在毫秒内对数十万个数字进行排序；有人知道 JS.sort() 使用什么算法吗？）

4

4 回答 4

8

我在 DataTables（另一个 jQuery 插件）方面取得了巨大的成功，其行号与您所谈论的内容相似。与在 java 中看到的相比，您使用 javascript 看到的速度损失实际上是在渲染 DOM，这需要更多的工作。DataTables 的美妙之处在于您能够从 javascript 数组（本质上是 json）中获取数据 - 所以排序是在数组上完成的（与 java 的速度相似），然后只需要用户查看表的一部分在 DOM 中生成。

有关示例，请参见以下网址：

http://datatables.net/examples/data_sources/js_array.html

或者

http://datatables.net/examples/data_sources/ajax.html

我建议使用后者。如果使用静态 json 数组仍然不够快，您将需要构建一个服务器端脚本来减轻 javascript 的负载 - 这里是服务器端代码的一个很好的例子：

http://datatables.net/examples/data_sources/server_side.html

编辑：无限滚动

正如评论中所讨论的，问题不在于排序，而在于将 HTML 表转换为 JS 并返回。这可能有助于在用户查看时仅加载返回排序的渲染部分；服务器还以 JSON 形式向 JS 提供与表格相同的信息。这两种技术消除了 HTML-JS 转换和渲染问题，从而大大提高了速度。

HTML（这是在 JSON 出现之前最初必须呈现的所有内容 - 添加与列一样多的标签）：

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

查询：

$(document).ready(function() {
    $('#table_id').dataTable( {
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "sScrollY": "200px",
        "bProcessing": true,
        "sAjaxSource": 'array.txt'
    });
});

array.txt 包含：

{ "aaData": [
    ["This will be in column 1","This in two","this in 3"],
    ["another row - column 1","another two","another 3"]
]}
于 2012-07-03T05:13:58.067 回答
2

除了库之外，表格排序很容易自己完成。

与 DOM 需要移动项目的时间相比，实际对行进行排序所花费的时间可以忽略不计。

将为您提供最佳性能的一件事是分离行，根据您的需要排列它们并再次附加它们。您不需要原始 JSON 数据，只需分离 $tr，从 td 中获取要比较的值，创建一个 $tr 数组，根据您想要的列对该数组进行排序并将它们附加回您的 tbody。

例如，使用这种技术，我在 1 秒内对 3000 行 15 列进行排序，这是完全可行的。有了这样的性能，唯一的问题是如何获取 3000 行到浏览器......

于 2014-10-13T23:28:38.267 回答
1

我知道这篇文章有点老了，但这里的 ES6+ 解决方案对我来说非常有用。

/**
 * Sort table data based on a direction of asc or desc for a specific column
 * @param {number} n- column number calling this sort
 * @param {string} dir -direction of the sort (asc or desc)
 * @param {HTMLSpanElement} targetElem -sort icon
 */
function sortTable(n, dir = "asc", targetElem) {
    targetElem.style.cursor = "progress";       
    let sortArr = [];
    let table =targetElem.closest('table');
    table.querySelectorAll('tbody > tr > td:nth-Child(' + parseInt(n) + ')').forEach((x, y) => sortArr.push(
        {
            sortText: x.innerHTML.toLowerCase(),
            rowElement: x.closest('tr')
        }));
    var sorted = sortArr.sort(function (a, b) {
        if (dir == "asc") {
            if (a.sortText < b.sortText) {
                return -1;
            }
        } else if (dir == "desc") {
            if (a.sortText > b.sortText) {
                return -1;
            }
        }
        return 0;
    });
    sorted.forEach((x, y) => {
        x.rowElement.parentNode.insertBefore(x.rowElement, x.rowElement.parentNode.children[y]);
    });
    targetElem.style.cursor = null;
}

在我的每个元素中，我都有用于调用此函数的排序图标。它们的列号嵌入在数据标签中。他们看着像是：

<th data-field-name="lastLogin" role="columnheader" class="lastLogin">Last Login
    <span class="fa fa-unsorted sort-icon" title="Sort Descending" data-col-number="6" style="font-size: 1.2em; margin-left: 15px;"></span>
</th>

图标的点击动作：

click(icon){
        var parent = icon.closest('tr');
        parent.querySelectorAll('.sort-icon').forEach(x => {
            if (x == icon) {
                return;
            }
            delete x.dataset.dir;
            x.classList.replace('fa-sort-down', 'fa-unsorted');
            x.classList.replace('fa-sort-up', 'fa-unsorted');
        });

        if (icon.classList.contains('fa-unsorted')) {
            icon.classList.replace('fa-unsorted', 'fa-sort-up');
            icon.title = icon.title.replace('Ascending', 'Descending');
            icon.dataset.dir = "asc";
        } else if (icon.classList.contains('fa-sort-down')) {
            icon.classList.replace('fa-sort-down', 'fa-sort-up');
            icon.dataset.dir = "asc";
            icon.title = icon.title.replace('Ascending', 'Descending');
        } else if (icon.classList.contains('fa-sort-up')) {
            icon.classList.replace('fa-sort-up', 'fa-sort-down');
            icon.title = icon.title.replace('Descending', 'Ascending');
            icon.dataset.dir = "desc";
        }
        sortTable(icon.dataset.colNumber, icon.dataset.dir, icon);
}
于 2020-12-16T02:07:11.287 回答
0

我认为这个 javascript 库简单而强大： http ://tabulator.info

Tabulator 允许您在几秒钟内从任何 HTML 表格、JavaScript 数组、AJAX 数据源或 JSON 格式的数据创建交互式表格。

在单元格内，您可以放置​​文本、进度条、图像、其他表格！

于 2019-03-12T20:30:06.503 回答