Question

方案

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

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

在我的计划中，我将对应于'clicked'记录的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
}

修改

Daniel是对的。解决方案是在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
    }
]

这里有一些文档Columns

看看这个DataTables AJAX source example - null data source for a column

请注意，在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

在此发布此答案，只是为了表明需要定义Polygon polygon = new Polygon(); polygon.Points = new PointCollection { new Point(0, 0), new Point(0, 100), new Point(150, 150) }; polygon.Arrange(new Rect(canvas.RenderSize)); polygon.Measure(canvas.RenderSize); var path = new Path { Data = polygon.RenderedGeometry, Stroke = Brushes.LightBlue, StrokeThickness = 2, Fill = Brushes.Green, Opacity = 0.5 }; Panel.SetZIndex(path, 2); canvas.Children.Add(path);的位置。我自己从这个问题中得到了帮助，但是我挣扎了一段时间来放置aoColumnDefs。此外，还添加了onclick事件的功能。

aoColumnDefs

jquery datatables：添加额外的列

3 个答案: