我想从 JSON 数据在 DataTables 的记录字段中创建链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3748262/
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
I want to create links in record fields in DataTables from JSON data
提问by Adam
I'm creating a dataTables table to use as an archive of pages for a site that produces a comic strip. On that archives page, I'd like to have the title of the comic be a link to the page of that comic strip.
我正在创建一个 dataTables 表，用作生成连环漫画的站点的页面存档。在那个档案页面上，我希望漫画的标题是指向该漫画页面的链接。
Initialization:
初始化：
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "archive/archive.txt"
} );
} );
</script>
HTML:
HTML：
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Author</th>
<th width="25%">Title</th>
<th width="25%">Episode</th>
<th width="15%">Date</th>
<th width="15%">Tags</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JSON Data:
JSON 数据：
{ "aaData": [
["Bob","Title One","Episode 1","9/30/2010","tag1,tag2,tag3"],
["Bob","Title One","Episode 2","10/2/2010","tag1,tag2,tag3"],
["Bob","Title One","Episode 3","10/4/2010","tag1,tag2,tag3"],
["Bob","Title Four","Episode 1","10/8/2010","tag1,tag2,tag3"],
["Bob","Title Five","Episode 1","10/11/2010","tag1,tag2,tag3"],
["Bob","Title Six","Episode 1","10/12/2010","tag1,tag2,tag3"],
["Kevin","Title Seven","Episode 1","10/15/2010","tag1,tag2,tag3"],
["Kevin","Title Eight","Episode 1","10/17/2010","tag1,tag2,tag3"],
["Kevin","Title Eight","Episode 2","10/20/2010","tag1,tag2,tag3"],
["Kevin","Title Ten","Episode 1","10/22/2010","tag1,tag2,tag3"],
["Kevin","Title Eleven","Episode 1","10/23/2010","tag1,tag2,tag3"],
["Kevin","Title Twelve","Episode 1","10/24/2010","tag1,tag2,tag3"]
] }
Where "Title One" or "Title Four" etc, would be a link to the page of that comic. Admittedly, I don't have much in the way of chops with dataTables, so if you might be explicit in your solution, that would be well appreciated.
其中“标题一”或“标题四”等将是指向该漫画页面的链接。诚然，我对 dataTables 的处理方式并不多，所以如果您在解决方案中明确表示，那将不胜感激。
回答by a darren
You could also use the mRenderfunction with aoColumnDefs:
您还可以使用该mRender功能aoColumnDefs：
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "archive/archive.txt",
"aoColumnDefs": [
{
"aTargets": [ 2 ], // Column to target
"mRender": function ( data, type, full ) {
// 'full' is the row's data object, and 'data' is this column's data
// e.g. 'full[0]' is the comic id, and 'data' is the comic title
return '<a href="/comics/' + full[0] + '">' + data + '</a>';
}
}
]
});
This is more explicit and likely more maintainable because you can specify how individual columns render at the column level, rather than selecting them through the DOM at the row level, which helps when you're adding columns later on.
这更加明确并且可能更易于维护，因为您可以在列级别指定各个列的呈现方式，而不是在行级别通过 DOM 选择它们，这在您稍后添加列时会有所帮助。
回答by jcubic
you should use fnRowCallbackoption see documentation.
你应该使用fnRowCallback选项见文档。
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "archive/archive.txt",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
aData[2] + '</a>');
return nRow;
},
});
回答by Sohib
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "archive/archive.txt"
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
aData[2] + '</a>');
return nRow;
},
});
回答by Adarsh Madrecha
If using the latest version v1.10.16can use renderfunctioncallback.
如果使用最新版本v1.10.16可以使用render函数回调。
$('#example').dataTable({
"data": responseObj,
"columns": [
{ "data": "information" },
{
"data": "weblink",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '<a href="' + row.myid + '">' + data + '</a>';
}
return data;
}
}
]
});
I have just changed the render function. datarefers to only current column data, while rowobject refers to entire row of data. Hence we can use this to get any other data for that row.
我刚刚更改了渲染功能。data仅指当前列数据，而row对象指的是整行数据。因此，我们可以使用它来获取该行的任何其他数据。
If you wnat to link based on the value of current column, can use
如果您想根据当前列的值进行链接，可以使用
if(type === 'display'){
data = '<a href="' + data + '">' + data + '</a>';
}
回答by Spencer Sullivan
I could not get any of the answers to accomplish what I was trying to do.
我无法得到任何答案来完成我想要做的事情。
I wanted to show the DisplayedColumn in the datatable column, but have the ID sent with the request when clicked. I also did not want to display the ID column.
我想在数据表列中显示 DisplayedColumn，但在单击时将 ID 与请求一起发送。我也不想显示 ID 列。
Here is how I achieved this:
这是我实现这一目标的方法：
columns: [
{ "data": "ID", "visible" : false },
{ "data": "DisplayedColumn" },
...
columnDefs: [ {
targets: [1],
"render": function (data, type, row, meta) {
return '<a href="/Area/Controller/Action/' + row.ID + '">' + data + '</a>';
}
}
...
This was, sadly, very hard to find an answer that worked for me, I hope it helps someone.
遗憾的是，很难找到对我有用的答案，我希望它可以帮助某人。
回答by user206890
Below, is what I did to get altered html text in column cell, given a certain value in the aaData object array. This works, but feels horrible because html markup is in the javascript as above.
下面是我在列单元格中获取更改的 html 文本所做的工作，给定 aaData 对象数组中的某个值。这有效，但感觉很糟糕，因为 html 标记在上面的 javascript 中。
var dataTableMeta = { "bProcessing": true,
"bServerSide": true,
"sAjaxSource": url
, "aoColumns": aoColumns
, "fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback,
'dataFilter': function (data, type) {
var jsObject = jQuery.parseJSON(data);
for (var i = 0; i < jsObject.aaData.length; i++) {
jsObject.aaData[i].CaseID = '<a href="" >' + jsObject.aaData[i].CaseID + '</a>';
}
var jsonString = JSON.stringify(jsObject);
return jsonString;
}
});
}
};
$('#caseSearchTable').dataTable(dataTableMeta);
