快速HTML表格排序？

Question

是的,我知道有很多 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使用quicksort在几毫秒内排序了数十万个数字;有谁知道JS.sort()使用什么算法？)

Answer 1

我使用DataTables(另一个jQuery插件)取得了巨大成功,其中行号与您所说的相似.你在javascript中看到的速度损失超过了你在java中看到的它实际上是渲染一个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并返回.这可能有助于仅在用户查看时加载返回排序的渲染部分; 服务器还为JS提供与JSON格式的表相同的信息.这两种技术消除了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>

JQUERY:

$(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"]
]}