搜索
搜索

使用JavaScript和jQuery进行表排序的问题

Dim13i 发表于 Dev
25
Dim13i

尝试根据第一列中的内容对表进行排序时遇到问题。我的代码与本答复中的代码几乎相同，但是不幸的是，它不起作用。如您所见，运行该代码段表未正确排序。

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).eq(0).text().trim();
        var keyB = $('td',b).eq(0).text().trim();
        
        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;     // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                    // append rows after sort
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>
<table id="sort-table" border="1">
    <tbody>
        <tr>
            <td>MOSELLE CONSTRUCTION ET FAÇADE SA</td>
            <td>xc</td>
            <td>xa</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>CHANTIER ECH SUR ALZETTE-STORE A " Z "</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td>xd</td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>ANTONIO GEORGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SATRAP DIFF PHASE x - x</td>
        </tr>
        <tr>
            <td>DE OLIVEIRA SANTOS - CWIEK CRISTOVAO ET IWONA</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>idem</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>FERNANDO - RODANGE</td>
        </tr>
        <tr>
            <td>DEMAY SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>IDEM</td>
        </tr>
        <tr>
            <td>BETRA SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LOT x RIES-WEISS (KAHLER)</td>
        </tr>
        <tr>
            <td>BER CREATION</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>BOUSSE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/ULx SEUIL MANQUANT</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/NachLieferung GLASLEISTE ELx</td>
        </tr>
        <tr>
            <td>MURIC &amp; FILS SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>x TELECOMMANDES</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>APP x DOMELDANGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LIMPERSBERG HS - GLAS</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - BETTANGE-REDING</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - DOMMELDANGE - KRAMER</td>
        </tr>
    </tbody>
</table>

ᶌ

您需要添加其他条件才能进行排序 

    if (sortAsc) {
        // if a > b return 1 / if a < b return -1 / else same so return 0
        return (keyA > keyB) ? 1 : (keyA < keyB) ? -1 : 0;     // A bigger than B, sorting ascending
    } else {
        // if a < b return 1 / if a > b return -1 / else same so return 0
        return (keyA < keyB) ? 1 : (keyA > keyB) ? -1 : 0;     // B bigger than A, sorting descending
    }

另外，也不需要在末尾循环以添加行-您可以这样做

$table.find('tbody').append($rows);  // no need to loop through to append  


$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).eq(0).text().trim();
        var keyB = $('td',b).eq(0).text().trim();
        
        if (sortAsc) {
            return (keyA > keyB) ? 1 : (keyA < keyB) ? -1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : (keyA > keyB) ? -1 : 0;     // B bigger than A, sorting descending
        }
    });
    $table.find('tbody').append($rows);  // no need to loop through to append  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>
<table id="sort-table" border="1">
    <tbody>
        <tr>
            <td>MOSELLE CONSTRUCTION ET FAÇADE SA</td>
            <td>xc</td>
            <td>xa</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>CHANTIER ECH SUR ALZETTE-STORE A " Z "</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td>xd</td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>ANTONIO GEORGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Apr&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SATRAP DIFF PHASE x - x</td>
        </tr>
        <tr>
            <td>DE OLIVEIRA SANTOS - CWIEK CRISTOVAO ET IWONA</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>idem</td>
        </tr>
        <tr>
            <td>TECHNIC MONTAGE SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;May&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>FERNANDO - RODANGE</td>
        </tr>
        <tr>
            <td>DEMAY SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>IDEM</td>
        </tr>
        <tr>
            <td>BETRA SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LOT x RIES-WEISS (KAHLER)</td>
        </tr>
        <tr>
            <td>BER CREATION</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>BOUSSE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/ULx SEUIL MANQUANT</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV/NachLieferung GLASLEISTE ELx</td>
        </tr>
        <tr>
            <td>MURIC &amp; FILS SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jun&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>x TELECOMMANDES</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>APP x DOMELDANGE</td>
        </tr>
        <tr>
            <td>MENUIS'ART SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>LIMPERSBERG HS - GLAS</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td>x</td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - BETTANGE-REDING</td>
        </tr>
        <tr>
            <td>CIALUX SARL</td>
            <td></td>
            <td>x</td>
            <td>x&nbsp;Jul&nbsp;x</td>
            <td align="right">x.x€</td>
            <td align="right">x.x€</td>
            <td>SAV - DOMMELDANGE - KRAMER</td>
        </tr>
    </tbody>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用jQuery和JavaScript进行选择排序算法仿真的动画问题

使用 jquery 对 html 表进行排序

使用javascript对数组表进行排序

使用 Javascript 进行 JSON 计数和排序

使用JavaScript（jQuery）对<table>进行排序

使用jQuery和插件使表可排序

使用一个输入字段和一个Select对HTML表进行排序-Javascript

仅使用 javascript 对 html 元素进行排序的问题

Spring Data JPA：使用联接表进行排序和分页

使用Java进行数字和字母排序表

使用多个表和 PIVOT 进行排序的 sql 查询

使用dplyr进行过滤，表化和排序？

使用jQuery对不在HTML表中的元素进行排序

如何使用单独的列对jQuery DataTables表进行排序？

使用 JQuery 数据表进行自定义排序

如何使用备用值对 JavaScript 数据表进行排序？

使用拖放和jQuery对表列进行重新排序

使用函数对奇数和偶数进行排序Javascript

使用jquery或Javascript进行自定义表格排序

如何使用jQuery或JavaScript对对象数组进行排序

使用排序和通讯的问题

通过拖动行使用jquery对数据表中的数据进行排序（行重新排序）

使用Javascript和jQuery创建表

JavaScript Table使用排序表对带重音符号的字符进行排序

在表之间进行排序和查询

jQuery tablesorter无法对多个表进行排序

jQuery UI可对动态表进行排序

使用联合和连接对另一个表中的表进行排序

使用可排序的jquery UI对多个UL和LI元素进行排序

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档