DataTables列中所有行的超链接 [英] DataTables hyperlink on all rows in a column

问题描述

我正在使用DataTables来生成表。有一列包含订单号码。

例如：
...

我需要此列中的每一行都有超链接到 view / order？id =？其中？是行的内容在订单号列。例如，第一行将是 view / order？id = 1321755 等的超链接。

什么是最简单的方法我可以这样做？

以下是我用于初始化数据表的代码：

 < script type =text / javascriptcharset =utf-8> 
 $（document）.ready（function（）{
 $（'＃example'）。dataTable（{
serverSide：true，
ajax：{
url：../server_processing/orders.php，
type：POST
}，
order：[[0，desc ]] 
}）; 
}）; 
< / script> 
 
< table id =exampleclass =displaycellspacing =0width =100％> 
< thead> 
< tr> 
< th>订单号< / th> 
 ... 
< / tr> 
< / thead> 
< tbody> 
< / tbody> 
< / table> 
  

解决方案

查看：
http://datatables.net/reference/option/columns.render

您可以在指定列定义时添加列渲染回调。

  var columnsDef = [
 .. 
 {
title：Order No.，
render：function（data，type，row，meta）{
 return'< a href = view / order？'+ data +'>'+ data +'< / a>'; 
} 
}，
 ... 
]; 
 
 $（＃table）。dataTable（{
 ... 
columns：columnsDef，
 ... 
}）; 
  

该列中的数据将更改为render函数返回。

I am using DataTables to generate a table. There is a column containing order numbers.

For example: ...

I need every row in this column to have a hyperlink to view/order?id=? where ? is the contents of row in the Order No column. For example the first row would be a hyperlink to view/order?id=1321755 etc.

What is the simplest way I can do so?

Here is the code that I am using to initialize the DataTables:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example').dataTable( {
            "serverSide": true,
            "ajax": {
                    "url": "../server_processing/orders.php",
                    "type": "POST"
                    },
            "order": [[ 0, "desc" ]]
        } );
    } );
</script>

  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Order No</th>
        ...
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

解决方案

Check this out: http://datatables.net/reference/option/columns.render

You can add a column render callback when you specify columns definition.

var columnsDef = [
...
{
    "title": "Order No.",
    "render": function (data, type, row, meta) {
        return '<a href="view/order?' + data + '">' + data + '</a>';
    }
},
...
];

$("#table").dataTable({
    ...
    "columns": columnsDef,
    ...
});

The data in that column will be changed to what the render function return.

这篇关于DataTables列中所有行的超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！