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列传入的数据呈现链接。我使用它已经有一段时间了，我只是抓住了一个旧项目的片段。

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

Answer 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数据表显示表中的产品链接

2 个答案: