jQuery DataTables 呈现列数据 [英] jQuery DataTables render column data

问题描述

我正在使用 jQuery DataTables 来显示来自 JSON 编码的 PHP 响应的信息.JSON 响应包含对象名称".name"包含Full Name"、Last Name"、ID".我一直在使用 columns 以我想要的方式显示数据，但是，我遇到了一个我无法弄清楚的问题.

I'm using jQuery DataTables to display information from JSON encoded PHP response. The JSON response contains the object "name". "name" contains "Full Name", "Last Name", "ID". I have been using columns to display the data the way I want but, I've ran into a problem I can't figure out.

在下面的代码中，示例 1 工作正常，在按姓氏"排序时将显示全名".但是，示例 2 根本不起作用.所需的输出将包含 HTML 呈现的显示并按姓氏"排序.在示例 3 中，显示按照我想要的方式呈现，但排序不正确.

In the code below example 1 works fine and will display "Full Name" while sorting by "Last Name". However, example 2 is not working at all. The desired output would contain HTML rendered display and sorted by "Last Name". In example 3 the display is rendered the way I would like but it is not sorted correctly.

有谁知道如何调整示例 2 以输出我正在寻找的内容(渲染和排序的数据)?

Does anyone know how to adjust example 2 to output what I am looking for (rendered and sorted data)?

var oTable = $('#table').DataTable({
'ajax': {
    url: 'PHP-file-returns-JSON.php',
    type: "POST",
    dataSrc: function ( data ) {
            return data.cols;
        },       
    data: function(d) {

       ///send additional values to POST
       var frm_data = $('#val1, #val2').serializeArray();
       $.each(frm_data, function(key, val) {
             d[val.name] = val.value;
       });
     }
},
'columns':[

        // exapmle 1 - works but not rendered with HTML
        { data: {
                _:    "name.Full Name",
                sort: "name.Last Name",
                } 
        },

        // example 2 not working at all
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            },
            "sort" : "name.Last Name",
        },

        // example 3 works fine with HTML rendered display but not sorted
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            } 
        },
]
});

更新:

HERE 是显示我正在使用的数据结构的 JSFiddle.工作示例仅显示按姓氏排序的全名.我试图弄清楚如何使显示包含一个以 ID 作为 id 属性的 span 元素.

HERE is the JSFiddle that shows the data structure I'm working with. The working example only shows the Full Name sorted by the Last Name. I am trying to figure out how to make the display contain a span element with the ID as the id attribute.

推荐答案

事实证明，使用 name.Full Name 是行不通的.它必须是没有空格的 name.FullName.这就是最终对我有用的东西.

Turns out that using name.Full Name will not work. It has to be name.FullName without the space. Here is what ended up working for me.

  'columns': [
        { 
            "data": "name",                   
            "render": function ( data, type, row ) {
                if(type === 'display'){
                    return '<span id="'+data.ID+'">'+data.FullName+'</span>';
                }else if(type === 'sort'){
                    return data.LastName;
                }else{
                    return data;
                }
            }
        }
   ]

这篇关于jQuery DataTables 呈现列数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！