jQuery DataTables 呈现列数据
Posted
技术标签:
【中文标题】jQuery DataTables 呈现列数据【英文标题】：jQuery DataTables render column data 【发布时间】：2017-06-18 08:00:58 【问题描述】：我正在使用 jQuery DataTables 来显示来自 JSON 编码的 php 响应的信息。 JSON 响应包含对象“名称”。 “name”包含“Full Name”、“Last Name”、“ID”。我一直在使用columns 以我想要的方式显示数据，但是我遇到了一个我无法弄清楚的问题。
在下面的代码中，示例 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>';
,
]
);
更新：
HERE 是显示我正在使用的数据结构的 JSFiddle。工作示例仅显示按姓氏排序的全名。我试图弄清楚如何使显示包含一个以 ID 作为 id 属性的 span 元素。
【问题讨论】：
从所有示例中我发现问题在于，为了允许数据表的顺序，它们不会在单元格中创建任何额外的标签，那么为什么您尝试只将 id 添加到 td 并且不使用跨度?，用你的例子 1 你能设计一个简单的 JSFiddle 来说明你的用例吗？例如，您的表格是否有 3 列？您可以只使用简单的 JSON 对象作为数据源来模拟 ajax 返回。 @annoyingmouse 我不确定如何使用 JSFiddle 设置 JSON 响应。但是，我的代码示例应该只显示一列，其中包含呈现为 HTML 的全名。我只是展示了 3 个示例，以便人们更好地了解我正在尝试做什么。 【参考方案1】：原来使用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;
]
【讨论】：
【参考方案2】：如果您需要按姓氏对列进行排序，这应该可以：
$.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'
]
);
它正在工作here。您还可以删除渲染函数，只需调整 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'
]
);
这是here。希望对您有所帮助，并且我已正确理解您的要求。
【讨论】：
我添加了一个我正在使用的数据结构的示例。我尝试使用您的代码，但无法正常工作。"data" 只允许我使用Full Name。它不会让我添加任何 HTML 格式。我正在寻找显示为：<span id="'+ID+"'>'+Full Name+'</span>'
再试一次，更新 JSFiddle 以输出正确的span。希望对您有所帮助。【参考方案3】：
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];
,
],
);
【讨论】：
【参考方案4】：你可以试试这个：
data: null,
title: "Audio",
render: function (data)
return `<a onclick="UpdateRecord('$data.audio_status_id_string','$"Audio"','$data.request_id')">$AudiostatusColor(data.audio_status_id_string)</a>`
,
【讨论】：
以上是关于jQuery DataTables 呈现列数据的主要内容，如果未能解决你的问题，请参考以下文章
第二次渲染后表格列宽发生变化 - JQuery DataTables