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

问题描述

我正在使用jQuery DataTables显示来自JSON编码的PHP响应的信息. JSON响应包含对象名称". 名称"包含全名"，姓氏"，"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屋！