我使用jQuery数据表来显示来自JSON编码的PHP响应的信息。JSON响应包含对象"name"。"name"包含"全名"、"姓氏"、"ID"。我一直在使用列以我想要的方式显示数据，但是，我遇到了一个我无法解决的问题。
在下面的代码中，示例1工作正常，按“姓氏”排序时将显示“全名”。然而，示例2根本不起作用。所需的输出将包含HTML呈现的显示，并按“姓氏”排序。在示例3中，显示按我希望的方式呈现，但排序不正确。
有人知道如何调整示例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>';
}
},
]
});
更新：
下面是显示我正在使用的数据结构的JSFIDLE。工作示例仅显示按姓氏排序的全名。我试图弄清楚如何使显示包含ID作为ID属性的span元素。
结果是使用名称。全名不起作用。它必须是名称。全名，不带空格。这就是最终对我有用的东西。
'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;
}
}
}
]
如果您需要对姓氏的列进行排序，应该可以：
$.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'
}]
});
它在这里工作。您还可以删除渲染函数，只需调整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'
}]
});
它在这里。希望这有所帮助，我已经正确理解了你的要求。
enter code herefunction Display() {
$('#xyz').dataTable({
"bServerSide": true,
"bSort": false,
"sAjaxSource": ,
"lengthMenu": [10, 25, 50, 100],
"iDisplayLength": 10,
"bDestroy": true,
"bFilter": true,
"bPaginate": true,
"bInfo": true,
"sSearch": true,
"bLengthChange": true,
"sEmptyTable": "Loading data from server",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"columns": [
{
"sWidth": "0.5%",
"render": function (data, type, row, meta) {
return '<a href="javascript:void(0);" User_ID="' + row[0] +
'" Otp_Mobile="' + row[11] + '" IsActive="' + row[12] +
'" onclick="GetEdit(this);"><i class="glyphicon glyphicon-edit"></i></a>';
}, "targets": 0
},
{
"sWidth": "0.5%",
"render": function (data, type, row, meta) {
return '<a href="javascript:void(0);" onclick="DeleteData(' + row[0] + ')"><i class="glyphicon glyphicon-trash"></i></a>';
}, "targets": 0
},
{
"sWidth": "2%",
"render": function (data, type, row) {
return row[2];
}
},
{
"sWidth": "2%",
"render": function (data, type, row) {
return row[1];
}
},
{
"sWidth": "2%",
"render": function (data, type, row) {
return row[5];
}
},
{
"sWidth": "2%",
"render": function (data, type, row) {
return row[7];
}
},
{
"sWidth": "2%",
"render": function (data, type, row) {
return row[12];
}
},
],
});
}
