jquery datatables：添加额外的列 [英] jquery datatables: adding extra column

问题描述

场景

我正在使用 datatables （@version 1.9.4）第一次向用户显示数据。
我成功地通过ajax检索数据并将其绑定到datatable。

I am using datatables (@version 1.9.4) for the first time to display data to the user. I succeed in retrieving the data via ajax and in binding them to the datatable.

现在我要添加额外的列，让用户处理记录。为了方便起见，目的是添加一个带有onclick处理程序的按钮，以检索点击记录的数据。

Now I want to add extra columns to let the user process the records. For semplicity sake, the aim is to add a button with an onclick handler that retrieve the data of the 'clicked' record.

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

In my plan I would bind the json item corresponding to the 'clicked' record to the onclick handler.

现在，如果我添加一个额外的 TH 对DOM的操作列，从数据表代码发生错误：

Till now, if I add an additional TH for the action column to the DOM, an error occurs from datatables code:

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

问题

如何设置自定义列？如何填写HTML内容？

How to set custom columns? How to fill their content with 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

Daniel is right. The solution is to set up the custom column in the aoColumnDefs, specifying the mData and the mRender properties. In particular mRender lets to define custom html and javascript.

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

推荐答案

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

You can define your columns in a different way like this

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

或这个

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

这里有一些文档列

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

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

Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change reflects the flexibility of this property and is consistent with the naming of mRender. If 'mDataProp' is given, then it will still be used by DataTables, as it automatically maps the old name to the new if required.

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

Another solution/workaround could be adding that '5' parameter...

例如添加额外的到每行

像这样：

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

这篇关于jquery datatables：添加额外的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！