jQuery的数据表：添加额外的列(jquery datatables: adding extra

脚本

我使用的数据表的第一次显示数据显示给用户（@version 1.9.4）。 我在检索通过ajax的数据，并在它们结合到DataTable成功。

现在，我想添加额外的列，让用户进程的记录。 对于semplicity起见，目的是与检索“点击”记录的数据的onclick处理程序添加一个按钮。

在我的计划我将绑定对应的“点击”记录到onclick处理json的项目。

截至目前，如果我添加一个额外的TH的行动列于DOM，从数据表的代码出现错误：

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
    }
]

这里是一些文档列

看看这个数据表AJAX源的例子-空数据源列

需要注意的是之前的数据表1.9.2 MDATA被称为mDataProp。 名称的改变反映了这个属性的灵活性，并与mRender的命名保持一致。 如果“mDataProp”给定，那么它仍然会受到数据表使用，因为它会自动如果需要旧名称映射到新的。

另一种解决方案/解决方法可以补充说，“5”参数...

例如增加额外的""每行

像这样：

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

Answer 2:

就在使用数据表的新版本（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');
    });

} );

文章来源: jquery datatables: adding extra column