jquery - 如何在jquery中重新排序表列位置

标签 jquery datatables

我有下表,想要根据 <th> 对表列重新排序页面加载后使用jquery的position属性值。

我查看了以下解决方案,但无法解决我的问题:

  1. jQuery re-ordering table columns
  2. Re-order table columns?
  3. Change table columns order

<table>
    <head>
        <tr>
            <th position = "3">Email</th>
            <th position = "1">Name</th>
            <th position = "2">Phone</th>
        </tr>
    </head>
    <tbody>
        <tr>
            <td>Ali@gmail.com</td>
            <td>Hamid</td>
            <td>0776567432</td>
        </tr>
    </tbody>
</table>

预期结果: enter image description here

最佳答案

使用<th>从位置属性创建一个对象索引作为键。

然后在 sort() 中使用该对象回调以查找每个元素的新顺序

const colOrder = {}

$('thead th').each(function(i){
    colOrder[i] = parseInt( $(this).attr('position') );
});


$('tr').html(function(i){
    return $(this).children().sort(function(a,b){
       const aOrder = colOrder[$(a).index()],
            bOrder = colOrder[$(b).index()];
       return aOrder - bOrder;
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th position = "3">Email</th>
            <th position = "1">Name</th>
            <th position = "2">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ali@gmail.com</td>
            <td>Hamid</td>
            <td>0776567432</td>
        </tr>
    </tbody>
</table>

关于jquery - 如何在jquery中重新排序表列位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55322221/

相关文章:

javascript - 使用 Ajax 的大数据表上的下拉过滤器列表

javascript - 使用 dataTable 的列过滤不起作用

javascript - 在 ng-repeat 中将所有先前项目的数据添加到当前项目

jquery - 防止每行的第一个下拉选项重复

javascript - 如何在指令的情况下更改下拉列表的默认文本并对指令应用所需的验证

datatables - 选择要在数据表中排序的列

javascript - 如何在 jQuery 中定义条件属性选择器?

javascript - 从 document.ready 调用 jQuery 插件抛出 getPreventDefault 错误

mysql - 如何使用 R 打开压缩的 mySQL 数据表

javascript - JQuery 数据表中的 Bootstrap Popover 在搜索后不起作用