如何使用jQuery DataTables在单元格中显示超链接 [英] How to display a hyperlink in a cell with jQuery DataTables

问题描述

我有一些Ajax数据读入jQuery数据表。问题是我需要将第一列中的数据变成一个超链接。如< td>< a href =5555.html> 5555< / a>< / td> 。

我的JSON数据：

  {
data：[
 [ 5555，07/17/2010，RCC周六开放，E10，哈里斯，弗雷德，1900，尼古拉耶夫，伊戈尔（FM），2367，1-0 ]，
 [5554，07/17/2010，RCC Saturday Open，B01，Nikolayev，Igor（FM），2367，Motroni，Richard ，1-0] 
] 
} 
  

JavaScript： / p>

  $（document）.ready（function（）{
 $（'＃cccr'）。DataTable（{
render：function（data，type，row）{
 return'< a href =basic.php？game ='+ data +'>< / a>'; //不工作
}，
ajax：'games.json'，
deferRender：true 
}）; 
}）; 
  

我对JavaScript不太了解，几个小时的谷歌搜索datatables.net后，我无法弄清楚网站。

C任何人请帮忙？

解决方案

原因

选项 render 应该是列或 columnDefs 的子属性。 p>

解决方案

使用 columnDefs.render 选项可以动态显示单元格中的超链接。

例如：

  var table = $（'＃cccr'）DataTable b $ b / * ... skipepd其他选项... * / 
 columnDefs：[
 {
 targets：0，
 render：function（data，type，row， meta）{
 if（type ==='display'）{
 data ='< a href =basic.php？game ='+ encodeURIComponent（data）+'>'+ data +'< / a>'; 
} 
 
返回数据; 
} 
} 
] 
}）; 
  

演示

请参阅这个jsFiddle 进行代码和演示。

I have some Ajax data read into jQuery DataTables. Problem is I need to make the data in the first column into a hyperlink. As in <td><a href = "5555.html">5555</a></td>.

My JSON data:

{
   "data": [
      ["5555","07/17/2010","RCC Saturday Open","E10","Harris, Fred","1900","Nikolayev, Igor (FM)","2367","1-0"],
      ["5554","07/17/2010","RCC Saturday Open","B01","Nikolayev, Igor (FM)","2367","Motroni, Richard","1728","1-0"]
   ]
}

JavaScript:

$(document).ready(function() {
   $('#cccr').DataTable( {
      "render": function ( data, type, row ) {
         return '<a href="basic.php?game=' + data + '></a>'; //doesn't work
      },
      "ajax": 'games.json',
      "deferRender": true
   } );
} );

I'm not too knowledgeable about JavaScript. I was unable to figure it out after hours of googling the datatables.net website.

Can anyone please help ?

解决方案

CAUSE

Option render should be sub-property of either columns or columnDefs.

SOLUTION

Use columnDefs.render option to display hyperlink in a cell dynamically.

For example:

var table = $('#cccr').DataTable({
    /* ... skipepd other options ... */
    columnDefs: [
        {
            targets: 0,
            render: function ( data, type, row, meta ) {
                if(type === 'display'){
                    data = '<a href="basic.php?game=' + encodeURIComponent(data) + '">' + data + '</a>';
                }

                return data;
            }
        }
    ]      
});

DEMO

See this jsFiddle for code and demonstration.

这篇关于如何使用jQuery DataTables在单元格中显示超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！