Datatables开发中如何读取无元素名JSON的指定字段值

解决方法 #

你的JSON返回的data字段中每一行都是索引数组，没有自定义键名，直接通过数组下标取值即可，首先修正你代码里的语法错误：data.[6]写法错误，正确写法为data[下标]，不需要多余的点。

对应你给出的JSON样例，两个目标值的下标如下（数组下标从0开始计数）：

• 2021-06-21 对应下标3
• $ 8.000 对应下标5

场景1：在展开的详情区域使用这两个值

直接修改format函数即可，可配合trim()方法去掉值末尾的多余换行符：

function format ( data ) {
    const targetDate = data[3].trim();
    const targetPrice = data[5].trim();
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>日期:</td>'+
            '<td>'+ targetDate +'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>金额:</td>'+
            '<td>'+ targetPrice +'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+data[11].trim()+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

场景2：将两个值渲染到表格列中

修改Datatables的columns配置，给对应列指定data属性为对应下标即可，另外你原配置里的targets是columnDefs的专属配置项，放到columns中无效可直接删除：

"columns": [
    { "width": "15px", "className": 'details-control', "orderable": false },     
    { "width": "15px", "data": 1 },
    { "data": 2 }, // 产品链接列
    { "width": "55px", "data": 3 }, // 2021-06-21所在列
    { "width": "90px", "data": 4 },
    { "width": "40px", "data": 5 }, // $8.000所在列
    // 剩余列按需对应下标配置即可
]

内容的提问来源于stack exchange，提问作者alejo jaramillo