javascript - jquery 数据表添加额外的列

Question

我是 jquery 和 javascript 的新手。目前我正在使用 jquery 数据表并且需要动态地向我的数据表添加一个复选框列。我在浏览时发现此链接很有用。但是，下面这个线程中给出的解决方案在末尾添加了附加列。但我需要复选框列作为我的第一列。请引用下面的链接，该链接在末尾包含一个 hack，我目前正在使用它在数组中的每一行添加一个“”。

Link to related query

请建议我一个更好的解决方案来解决我的问题。我不希望服务器在响应中发送额外的列。

Answer 1

我假设您正在使用 sAjaxSource 从服务器获取数据。如果您不想发送额外的列，您可以手动将数据移动一列，但您的 html 表中仍然需要有一个额外的列。像这样:

假设您有一个格式如下的 json:

{
    "aaData":
    [
        [
            "1",
            "Alice"
        ],
        [
            "2",
            "Bob"
        ]
    ]
}

您有一个包含 3 行的表格，第一行保留用于复选框:

<table>
    <thead>
        <tr>
            <th>Checkbox</th>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

然后，在您的 aoColumns 中创建数据表时，您必须手动调整每条数据的位置。默认情况下，DataTables 只是遍历数组索引，从 0 开始并将其分配给相应的列，所以让我们重新分配它们:

"aoColumns": [
        { "mData": null,
          "mRender": function(){
            return '<input type="checkbox"/>';
          }
        },
        { "mData": 0 },
        { "mData": 1 }
    ]

发送一个空记录来填充一行只是让您避免手动分配 mData。