Jquery数据表添加额外的列

jquery datatables adding extra column

本文关键字:数据表 添加 Jquery      更新时间:2023-09-26

我是jquery和javascript的新手。目前我使用jquery数据表,并有一个要求,以动态添加一个复选框列到我的数据表。我正在浏览,发现这个链接很有用。但是,下面这个线程给出的解决方案在末尾添加了额外的列。但我需要将复选框列作为第一列。请参阅下面的链接,其中包含一个hack在结束,我正在使用目前添加一个"在数组中的每一行。

链接到相关查询

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

我假设您正在使用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中创建dataTable时,您必须手动调整每个数据块的位置。默认情况下,DataTables只是遍历数组索引,从0开始并将其分配给相应的列,因此让我们重新分配它们:

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

发送一个空记录来填充一行简单地让您避免手动分配mData