jQuery DataTables 呈现列数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41982049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTables render column data
提问by Austin
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 columnsto display the data the way I want but, I've ran into a problem I can't figure out.
我正在使用 jQuery DataTables 来显示来自 JSON 编码的 PHP 响应的信息。JSON 响应包含对象“名称”。“name”包含“Full Name”、“Last Name”、“ID”。我一直在用columns我想要的方式显示数据，但是，我遇到了一个我无法弄清楚的问题。
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.
在下面的代码中，示例 1 工作正常，并在按“姓氏”排序时显示“全名”。但是，示例 2 根本不起作用。所需的输出将包含 HTML 呈现的显示并按“姓氏”排序。在示例 3 中，显示按照我想要的方式呈现，但没有正确排序。
Does anyone know how to adjust example 2 to output what I am looking for (rendered and sorted data)?
有谁知道如何调整示例 2 以输出我正在寻找的内容（渲染和排序的数据）？
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>';
}
},
]
});
UPDATE:
更新：
HEREis 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.
这里是显示我正在使用的数据结构的 JSFiddle。工作示例仅显示按姓氏排序的全名。我试图弄清楚如何使显示包含一个以 ID 作为 id 属性的 span 元素。
回答by Austin
Turns out that using name.Full Namewill not work. It has to be name.FullNamewithout the space. Here is what ended up working for me.
事实证明，使用是name.Full Name行不通的。它必须name.FullName没有空间。这就是最终为我工作的内容。
'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;
}
}
}
]
回答by annoyingmouse
If you need to sort the column on the last name this should work:
如果您需要对姓氏的列进行排序，这应该可以工作：
$.extend($.fn.dataTableExt.oSort, {
"last-name-pre": function(a) {
return $(a).data("lastname");
},
"last-name-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"last-name-desc": function(a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
$("#example").DataTable({
"data": data,
"columns": [{
"title": "Full Name",
"data": "Full Name",
"render": function(data, type, row) {
return $("<span></span>", {
"text": data,
"data-lastname": row["Last Name"]
}).prop("outerHTML");
},
"type": 'last-name'
}]
});
It's working here. You could also remove the render function and just adapt the last-namefunction to split the full name and return the last name:
它在这里工作。您还可以删除渲染函数并仅调整该last-name函数以拆分全名并返回姓氏：
$.extend($.fn.dataTableExt.oSort, {
"last-name-pre": function(a) {
return a.split(" ")[1];
},
"last-name-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"last-name-desc": function(a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
$("#example").DataTable({
"data": data,
"columns": [{
"title": "Full Name",
"data": "Full Name",
"type": 'last-name'
}]
});
Which is here. Hope that helps, and that I've understood your requirements properly.
这是在这里。希望有所帮助，并且我已经正确理解了您的要求。
