jquery datatables 在表中显示产品链接
Posted
技术标签:
【中文标题】jquery datatables 在表中显示产品链接【英文标题】：jquery datatables display product link in table 【发布时间】：2014-06-27 17:18:58 【问题描述】：我正在使用 jquery 数据表来显示具有子行和单个列过滤等的大量数据......我正在通过 json txt 文件导入我的所有数据。我需要能够将表中的零件编号（父行）直接链接到相应的产品页面。
编辑：根据 Tims 下面的回复，我已经使用新信息编辑了这篇文章
新建txt文件示例：
"data": [
"PartNumber": "201008",
"PartUrl": "99-05-sonata-optima-santafe-catalytic-converter.aspx",
"LongDesc": "Direct-Fit Converter",
"Year": "2002",
"Make": "HYUNDAI",
"Model": "SANTA FE",
"Engine": "2.4L/2351cc L4",
"Thumb": "images/products/thumb/201008.jpg",
"Location": "Front"
,
"PartNumber": "201008",
"PartUrl": "99-05-sonata-optima-santafe-catalytic-converter.aspx",
"LongDesc": "Direct-Fit Converter",
"Year": "2003",
"Make": "HYUNDAI",
"Model": "SANTA FE",
"Engine": "2.4L/2351cc L4",
"Thumb": "images/products/thumb/201008.jpg",
"Location": "Front"
,
这里是我添加到 js 文件的地方：
/* Formatting function for row details - modify as you need */
function format ( d )
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-right:50px;">'+
'<tr>'+
'<td>Category:</td>'+
'<td>'+d.LongDesc+'</td>'+
'<td rowspan="3"><img src="' + d.Thumb + '"/></td>'+
'</tr>'+
'<tr>'+
'<td>Location:</td>'+
'<td>'+d.Location+'</td>'+
'</tr>'+
'<tr>'+
'<td>Notes:</td>'+
'<td>'+d.Notes+'</td>'+
'</tr>'+
'</table>';
$(document).ready(function()
// Setup - add a text input to each footer cell
$('#example thead th').each( function ()
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
);
var table = $('#example').DataTable(
"ajax": "../data/cat-datab.txt",
"columns": [
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
,
"data": "Year" ,
"data": "Make" ,
"data": "Model" ,
"data": "Engine" ,
"data": "PartNumber"
],
"columnDefs": [
"targets": 5,
"data": "PartUrl",
"render": function ( data, type, full )
return '<a href="'+data+'">'+PartNumber+'</a>';
],
"order": [[1,'asc'], [2,'asc'], [3,'asc'], [4,'asc'], [5,'asc']],
"bSort": false,
"bPaginate": true,
"bLengthChange": true,
"bInfo": false,
"bAutoWidth": true,
"iCookieDuration": 60*60*24, // 1 day
);
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function ()
var tr = $(this).parents('tr');
var row = table.row( tr );
if ( row.child.isShown() )
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
else
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
);
// Apply the filter
$("#example thead input").on( 'keyup change', function ()
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
);
);
这是我的 HTML：
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th></th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
<th>Part #</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
现在表格根本不会呈现，我在浏览器中收到控制台错误，它返回错误
Uncaught ReferenceError: PartNumber is not defined
我希望这有助于清除它。
感谢您的帮助。
更新：已修复
其实很简单。我重新格式化了子行并在图片旁边添加了一个查看产品页面链接。
function format ( d )
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-right:50px;">'+
'<tr>'+
'<td>'+d.PartNumber+'</td>'+
'<td><a href="' + d.PartUrl + '" target="_blank">View Product Page</td>'+
'<td rowspan="4"><img src="' + d.Thumb + '"/></td>'+
'</tr>'+
'<tr>'+
'<td>Category:</td>'+
'<td>'+d.LongDesc+'</td>'+
'</tr>'+
'<tr>'+
'<td>Location:</td>'+
'<td>'+d.Location+'</td>'+
'</tr>'+
'<tr>'+
'<td>Notes:</td>'+
'<td>'+d.Notes+'</td>'+
'</tr>'+
'</table>';
【问题讨论】：
【参考方案1】：使用aoColumnDefs 和mRender。例如：
"aoColumnDefs": [
"mRender": function (data, type, row)
var $href = $("<a></a>").prop("href", data);
return $("<div/>").append($input).html();
,
"aTargets": [4]
如果我没记错的话，这将使用为第 4 列传入的数据呈现一个链接。自从我使用它已经有一段时间了，我刚刚从一个旧项目中获取了 sn-p。
编辑
自从我使用数据表已经有一段时间了，情况发生了变化——上面的例子可能只适用于旧版本的数据表。请参阅 this demo 以获得一个很好的工作示例。 columnDefs 和 render 应该可以解决问题。
来自演示：
$(document).ready(function()
$('#example').dataTable(
"columnDefs": [
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row )
return data +' ('+ row[3]+')';
,
"targets": 0
,
"visible": false, "targets": [ 3 ]
]
);
);
【讨论】：
感谢您的指导。它对我不起作用，但我确信这是我做错了。 我在您发布的演示信息出现之前发布了我的编辑。我不确定我是否理解您粘贴的代码将如何帮助我将链接添加到显示的数据中，但我使用了演示中的示例添加链接并重新发布了我上面的新信息，返回一个未定义的错误，在我上面的编辑中解释. 很高兴你把它整理好了。抱歉，我没有早点看到这个来提供帮助。我相信您已经知道，“渲染”功能允许您基本上定义一个模板，该模板可以包含您喜欢的任何元素。此外，您还可以通过row 数组访问其他数据：例如row[0]。【参考方案2】：
在以下链接： https://datatables.net/reference/option/columns.data#
如果您可以检查以下示例：
$('#example').dataTable(
"columnDefs": [
"targets": 0,
"data": function ( row, type, val, meta )
if (type === 'set')
row.price = val;
// Store the computed dislay and filter values for efficiency
row.price_display = val=="" ? "" : "$"+numberFormat(val);
row.price_filter = val=="" ? "" : "$"+numberFormat(val)+" "+val;
return;
else if (type === 'display')
return row.price_display;
else if (type === 'filter')
return row.price_filter;
// 'sort', 'type' and undefined all just use the integer
return row.price;
]
);
它根据类型和值操作第一列。您可以使用 columnDefs 参数中的数据函数定位第二列并操作内容。
希望这会有所帮助。
【讨论】：
以上是关于jquery datatables 在表中显示产品链接的主要内容，如果未能解决你的问题，请参考以下文章
d3 chart + jQuery DataTables：无法读取嵌套数组
我在 ajax 成功接收我的数据如何在表中显示 jquery 数据
Jquery datatables 插件，排序/过滤数据后显示“表中没有可用数据”
如何使用 jQuery DataTables 从数据库中显示特定数量的 HTML 表中的项目？