31

设想

我第一次使用数据表（ 1.9.4）向用户显示数据。我成功地通过 ajax 检索数据并将它们绑定到数据表。

现在我想添加额外的列来让用户处理记录。为简单起见，目的是添加一个带有 onclick 处理程序的按钮，该处理程序检索“点击”记录的数据。

在我的计划中，我会将与“点击”记录对应的 json 项绑定到 onclick 处理程序。

到现在为止，如果我在 DOM 中添加额外TH的操作列，数据表代码会出现错误：

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>';
        }
    }
 ]
4

3 回答 3

33

您可以像这样以不同的方式定义列

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

或这个

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

这里有一些文档列

看看这个DataTables AJAX 源示例 - 列的空数据源

请注意，在 DataTables 1.9.2 之前，mData 被称为 mDataProp。改名体现了该属性的灵活性，与mRender的命名一致。如果给出了“mDataProp”，那么它仍将被 DataTables 使用，因为它会在需要时自动将旧名称映射到新名称。

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

例如""为每一行添加额外的

像这样：

    [
        "IT",
        "10030",
        "VILLAREGGIA",
        "TO",
        "Torino",
        ""
    ],
    [
        "IT",
        "10030",
        "VISCHE",
        "TO",
        "Torino",
        ""
    ]
于 2012-11-05T14:16:45.650 回答
9

以防万一使用较新版本的 DataTables (1.10+) 的人正在寻找此问题的答案，我按照此页面上的说明进行操作：

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

于 2015-04-27T16:34:44.937 回答
6

在这里发布这个答案，只是为了表明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');
    });

} );
于 2017-04-25T10:06:34.567 回答