jquery 数据表：添加额外的列

Posted 2023-02-16

【中文标题】jquery 数据表：添加额外的列

【英文标题】：jquery datatables: adding extra column

【发布时间】：2012-10-25 06:26:14

【问题描述】：

场景

我第一次使用datatables（@version 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

编辑

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

【问题讨论】：

它对我有用，每行上的附加 html 链接/按钮 +1，并带有“获取行 ID 值”。

【参考方案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 使用，因为它会在需要时自动将旧名称映射到新名称。

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

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

像这样：

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

【讨论】：

直截了当，第 5 个缺失参数只对应于操作列。向数据源添加 empty 字段似乎是一种解决方法，而不是答案。

【参考方案2】：

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

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

【讨论】：

是的。使用“默认内容”

【参考方案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');
    );

 );