DataTable-列1单元格(使用数组中的值），列2单元格(使用自定义html）

DataTable - Column 1 cells ( use values from array ), column 2 cells ( use custom html)

本文关键字：单元格自定义 html 数组 DataTable- 更新时间：2023-09-26

我想创建一个数据表，其中我的第一列值来自数组和第二列和其他列定义html（选择框、输入等）。我以前使用过，但当时我从json读取数据（针对所有列），如下所示：

    function basketTable(data){
        topTable = $('#at-top-100').dataTable({
             //layout of data table 
             "dom": 'Tlfrtip',
             "bInfo" : false,
             "bDestroy":true,
             "bFilter" : false,
             "responsive":true,
             "aaData" : data,
             "aoColumns": [
                         { "mData": "Ap" },
                         { "mData": "Dp" },
                         { "mData": "A"},
                         { "mData": "S"},
                         { "mData": "S"},
                     ],
             "iDisplayLength": 10,
             "oLanguage": {
                    "sSearch": "",
                    "sSearchPlaceholder" : "Search..",
                    "sLengthMenu": " _MENU_ ",
              }
        });
}

关于我如何做到这一点的任何见解。任何帮助都将不胜感激！！

使用"mrender"函数，并在函数中放置要为每个单元格呈现的任何html。

如果要在显示中使用行中对象的属性，也可以访问这些属性。http://legacy.datatables.net/usage/columns

function basketTable(data){
        topTable = $('#at-top-100').dataTable({
             //layout of data table 
             "dom": 'Tlfrtip',
             "bInfo" : false,
             "bDestroy":true,
             "bFilter" : false,
             "responsive":true,
             "aaData" : data,
             "aoColumns": [
                         { "mData": "Ap" },
                         { "mData": "Dp" },
                         { "mData": "A"},
                         { "mData": "S"},
                         { "mData": "S",
                           "mRender": function(data,type,full)
                           {
                             return '<input type="text" value="Scanners and Scales"/>'
                           }
                     ],
             "iDisplayLength": 10,
             "oLanguage": {
                    "sSearch": "",
                    "sSearchPlaceholder" : "Search..",
                    "sLengthMenu": " _MENU_ ",
              }
        });
}