jquery datatables: 添加额外列

10 浏览
0 Comments

jquery datatables: 添加额外列

情境

我第一次使用datatables (@version 1.9.4)来向用户显示数据。

我成功通过ajax检索数据并将它们绑定到datatable上。

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

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

到目前为止，如果我在DOM中添加一个额外的TH作为操作列，datatables代码会出现错误：

从数据源请求未知的第5个参数，第0行

问题

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

这是我的实际配置。

HTML


    
        

            国家
            邮编
            城市
            地区代码
            地区描述
            操作

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

}

编辑

Daniel 是对的。解决方案是在aoColumnDefs中设置自定义列，指定mData和mRender属性。特别是mRender允许定义自定义html和javascript。

/* 在datatable初始化中 */
, "aoColumnDefs": [
   {
        "aTargets": [5],
        "mData": null,
        "mRender": function (data, type, full) {
            return '处理';
        }
    }
 ]

0