jquery数据表显示表中的产品链接

Question

我正在使用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" width="100%">
    <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 

我希望这有助于澄清它.

谢谢你的协助.

更新:已修复

实际上这很容易.我重新格式化了子行,并在图片旁边添加了一个View Product Page链接.

 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>';
}

Answer 1

使用aoColumnDefs和mRender.例如:

"aoColumnDefs": [
            {
                "mRender": function (data, type, row) {
                    var $href = $("<a></a>").prop("href", data);
                    return $("<div/>").append($input).html();
                },
                "aTargets": [4]
            }

如果内存为我提供正确的话,这将使用传入第4列的数据呈现链接.我使用它已经有一段时间了,我只是抓住了一个旧项目的片段.

编辑
由于我使用数据表已经有一段时间了,事情已经发生了变化 - 上面的例子可能只适用于较旧版本的数据表.有关良好的工作示例,请参阅此演示.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 ] }
        ]
    } );
} );