15

我正在创建一个 dataTables 表，用作生成漫画的网站的页面存档。在该档案页面上，我想让漫画的标题成为该漫画页面的链接。

初始化：

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
            $('#example').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "archive/archive.txt"
    } ); 
} );

        </script>

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数据：

{ "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"]
] }

其中“标题一”或“标题四”等将是该漫画页面的链接。诚然，我对 dataTables 的处理方式并不多，因此，如果您可能在解决方案中明确表示，那将不胜感激。

4

6 回答 6

24

您还可以使用该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>';
       }
     }
   ]
});

这更明确并且可能更易于维护，因为您可以指定各个列如何在列级别呈现，而不是通过 DOM 在行级别选择它们，这在您稍后添加列时会有所帮助。

于 2013-08-29T15:00:29.040 回答
21

您应该使用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;
        },
});
于 2010-09-20T08:16:48.600 回答
1 
$('#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;
        },
});
于 2014-06-26T17:35:58.943 回答
1

如果使用最新版本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;
         }
      } 
   ]
});

我刚刚更改了渲染功能。data仅指当前列数据，而rowobject 指整行数据。因此，我们可以使用它来获取该行的任何其他数据。

如果您想根据当前列的值进行链接，可以使用

if(type === 'display'){
    data = '<a href="' + data + '">' + data + '</a>';
}
于 2017-12-07T13:55:48.060 回答
0

下面是我为在列单元格中获取更改的 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);
于 2011-08-31T14:47:58.740 回答
0

我无法得到任何答案来完成我想做的事情。

我想在数据表列中显示 DisplayedColumn，但是在单击时将 ID 与请求一起发送。我也不想显示 ID 列。

这是我实现这一目标的方法：

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

可悲的是，很难找到对我有用的答案，我希望它对某人有所帮助。

于 2019-06-28T16:11:12.040 回答