jquery datatables:添加额外的列

Question

脚本

我使用的数据表的第一次显示数据显示给用户(@version 1.9.4).我成功通过ajax检索数据并将它们绑定到数据表.

现在我想添加额外的列以让用户处理记录.为简单起见,目的是添加一个带有onclick处理程序的按钮,该处理程序检索"clicked"记录的数据.

在我的计划中,我将对应于"clicked"记录的json项绑定到onclick处理程序.

到现在为止,如果我TH为DOM 添加了一个for action列的附加内容,则会从datatables代码中发生错误:

Requested unknown parameter '5' from data source for row 0

题

如何设置自定义列？如何用HTML填充他们的内容？

---

这是我的实际配置.

HTML

<table id="tableCities">
    <thead>
        <tr>
            <th>country</th>
            <th>zip</th>
            <th>city</th>
            <th>district code</th>
            <th>district description</th>
            <th>actions</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

使用Javascript

$('#tableCities').dataTable({
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "bAutoWidth": true
    , "bJQueryUI": true
    , "bProcessing": true
    , "bServerSide": true
    , "sAjaxSource": "../biz/GetCitiesByZip.asp?t=" + t
});

示例Json结果

{
    "aaData":
    [
        [
            "IT",
            "10030",
            "VILLAREGGIA",
            "TO",
            "Torino"
        ],
        [
            "IT",
            "10030",
            "VISCHE",
            "TO",
            "Torino"
        ]
    ],
    "iTotalRecords": 2,
    "iTotalDisplayRecords": 2,
    "iDisplayStart": 0,
    "iDisplayLength": 2
}

编辑

丹尼尔是对的.解决方案是在其中设置自定义列aoColumnDefs,指定mData和mRender属性.特别是mRender让我们定义自定义html和javascript.

/* inside datatable initialization */
, "aoColumnDefs": [
   {
        "aTargets": [5],
        "mData": null,
        "mRender": function (data, type, full) {
            return '<a href="#" onclick="alert(\''+ full[0] +'\');">Process</a>';
        }
    }
 ]

Answer 1

您可以使用不同的方式定义列

"aoColumns": [
        null,
        null,
        null,
        null,
        null,
        { "mData": null }
    ]

或这个

"aoColumnDefs":[
    {
        "aTargets":[5],
        "mData": null
    }
]

这里有一些文档列

看看这个DataTables AJAX源代码示例 - 列的null数据源

请注意,在DataTables之前,1.9.2 mData被称为mDataProp.名称更改反映了此属性的灵活性,并与mRender的命名一致.如果给出'mDataProp',那么DataTables仍将使用它,因为如果需要,它会自动将旧名称映射到new.

另一个解决方案/解决方法可能是添加'5'参数...

例如,""为每行添加额外内容

像这样:

    [
        "IT",
        "10030",
        "VILLAREGGIA",
        "TO",
        "Torino",
        ""
    ],
    [
        "IT",
        "10030",
        "VISCHE",
        "TO",
        "Torino",
        ""
    ]

Answer 2

如果有人使用较新版本的DataTables(1.10 +)正在寻找这个问题的答案,我按照此页面上的说明操作:

https://datatables.net/examples/ajax/null_data_source.html

Answer 3

在这里发布这个答案，只是为了表明aoColumnDefs需要定义的地方。我从这个问题本身得到了帮助，但我挣扎了一段时间，想把aoColumnDefs. 此外还添加了 onclick 事件的功能。

$(document).ready(function() {
  var table = $('#userTable').DataTable( {
        "sAjaxSource": "/MyApp/proctoring/user/getAll",
        "sAjaxDataProp": "users",
        "columns": [
                    { "data": "username" },
                    { "data": "name" },
                    { "data": "surname" },
                    { "data": "status" },
                    { "data": "emailAddress" },
                    { "data" : "userId" }
                  ],
        "aoColumnDefs": [
           {
                "aTargets": [5],
                "mData": "userId",
                "mRender": function (data, type, full) {
                    return '<button href="#"' + 'id="'+ data + '">Edit</button>';
                }
            }
         ]
    } );

    $('#userTable tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        console.log(data);
        $('#userEditModal').modal('show');
    });

} );