使用jQuery DataTables更改列顺序

Question

我的代码如下：http://jsfiddle.net/oscar11/ebRXw/805/

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "responsive": true
    } );
} );

在我的示例中：

• 列 0 = 名称
• 列 1 = 职位
• 列 2 = 办公室

我想要在不改变 HTML 的情况下将其更改为以下内容：

• 列 0 = 薪水
• 列 1 = 开始日期
• 列 2 = 年龄

- moses toh

---

更改HTML怎么样？或者你想改变顺序而不更改HTML？ - Gyrocode.com

@Gyrocode.com，是的，我想要在不改变HTML的情况下改变顺序。 - moses toh

@Gyrocode.com，我需要你的帮助。你可以在这里看到：链接。它是否修改了Ignited-Datatables库？ - moses toh

Answer 1

解决方案

使用 columns.data 来为每个列设置数据源索引。

var table = $('#example').DataTable( {
    "responsive": true,
    "columns": [
        { "data": 5 },
        { "data": 4 },
        { "data": 3 },
        { "data": 0 },
        { "data": 1 },
        { "data": 2 }
    ]
} );

请不要忘记相应地调整 thead 区域中的表头。

演示

查看此 jsFiddle了解代码和演示。

- Gyrocode.com

---

对不起，我的意思是更改索引而不更改顺序。这是否可以实现？ - moses toh

@mosestoh，这是不可能的。如果您不想使用索引，可以使用name，但这就是您能做到的最多了。 - Gyrocode.com

谢谢。我会提出另一个正确的问题来解决我的问题。 - moses toh

Answer 2

您可以在初始化时包含ColReorder插件来重新排列列：

您可以在初始化时包含ColReorder插件以重新排序列：

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "responsive": true,
        colReorder: {
          order: [5,4,3,0,1,2]
        }
    } );
} );

分支小提琴 -> http://jsfiddle.net/8qrqpjsp/

- davidkonrad

---

对不起，我的意思是更改索引而不更改顺序。这是否可以实现？ - moses toh

@mosestoh，你为什么需要那个？听起来像是一个 XY 问题 - 猜测你正在寻找一种奇特的解决方案来解决完全不同的问题...？ - davidkonrad

谢谢。我会提出另一个正确的问题来解决我的问题。 - moses toh