我想根据 JSON 数据在 DataTables 的记录字段中创建链接

Posted 2023-05-07

【中文标题】我想根据 JSON 数据在 DataTables 的记录字段中创建链接

【英文标题】：I want to create links in record fields in DataTables from JSON data

【发布时间】：2011-04-14 11:29:04

【问题描述】：

我正在创建一个 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 >Author</th>

            <th >Title</th>
            <th >Episode</th>
            <th >Date</th>
            <th >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 没有太多意见，所以如果您在解决方案中明确表示，那将不胜感激。

【参考方案1】：

您还可以将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 选择它们，这在您以后添加列时会有所帮助。

【讨论】：

谢谢！这非常有用，但 full[0] 对我不起作用。我正在使用 DataTables.net 1.10。但是，您可以使用点表示法（例如 full.Id）或括号表示法（full["Id"]）访问属性。

【参考方案2】：

您应该使用fnRowCallback 选项，请参阅documentation。

$('#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;
        ,
);

DT 的

Allan 向我展示了一种直接在数据本身中执行此操作的方法，但这更优雅一些。谢谢。

在较新版本的 DataTables 中，事件被调用：createdRow，这是它的回调函数：createdRow: function ( row, data, index ) ..

【参考方案3】：

$('#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;
        ,
);

【讨论】：

这段代码是关于什么的？你应该和代码一起写一个简报。

抱歉，Stack Overflow 只懂英文！我也是。

【参考方案4】：

如果使用最新版本v1.10.16可以使用render function回调。

$('#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 仅指当前列数据，而row 对象指整行数据。因此，我们可以使用它来获取该行的任何其他数据。

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

if(type === 'display')
    data = '<a href="' + data + '">' + data + '</a>';

【参考方案5】：

下面是我为在列单元格中更改 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);

【参考方案6】：

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

我想在数据表列中显示 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>';
   

...

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