列中所有行上的 DataTables 超链接答案

【问题标题】：DataTables hyperlink on all rows in a column列中所有行上的 DataTables 超链接
【发布时间】：2014-08-26 09:28:48
【问题描述】：

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

例如： ...

我需要此列中的每一行都有指向view/order?id=? 的超链接，其中? 是Order No 列中行的内容。例如，第一行是指向view/order?id=1321755 等的超链接。

我能做到的最简单的方法是什么？

这是我用来初始化数据表的代码：

<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>

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

检查一下： 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,
    ...
});

该列中的数据将更改为渲染函数返回的内容。

【讨论】：

嗨，您知道如何解决始终连接到第一列的+data+ 的解决方案吗？我有多个列，第 1-2 列是可链接的。第一个有 ID，第二个有 NAME。我希望如果有人点击 NAME，它会使用 ID 号作为链接。希望有意义
在这种情况下，您需要探索行变量提供了什么。我猜它包含该特定行中的每一列。

【解决方案2】：

我需要使用 jQuery dataTables 并将普通字段转换为 HREF 字段。

这里有一切，还包括 dataTables 错误处理..

享受吧。。

约西列夫

1) The HTML part:
<!-- COMPANIES LIST start -->
<div id="compListDiv" style="visibility:hidden; position : absolute; left : 360px; top : 40px;">
   <br>
   <table id="compList"  align="left" border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>address</th>
                </tr>
            </thead>
   </table>
</div>
<!-- COMPANIES LIST end -->

2) The javascript dataTables part:
When a button is clicked the following js function is called:
function companiesList(){
        accountstable=$('#compList').dataTable({
            sort : true,
            bFilter: false, 
            bInfo: false,
            paging:false,
            autoWidth: true,
            ajax: {
                url: "http://localhost:8080/j112/rest-1/companies/list",
                dataType: 'json',
                dataSrc: "data",
                error: function ( xhr, textStatus, error ) {
                    if ( textStatus === 'timeout' ) {
                        alert( 'Timout error. The server took too long to send back the data.\nPlease try again.' );
                    }
                    else {
                        alert( 'User Not In Session.' );
                        location.href = "login.html";
                    }
                    myDataTable.fnProcessingIndicator( false );
                }//function
            }/* ajax: */,
            scrollCollapse: true,

            bDestroy: true,
            serverSide:true,
            fnRowCallback : function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { // this function is called for each row, but I could not use it to add the link
                 // if ( aData[1] == "A" )
                  //var td0 = $('td:eq(0)', nRow)[0];
                  // $('td:eq(0)', nRow).html( 'A');
                  // $('td:eq(0)', nRow).html( '<b>A</b>' )             
            },// fnRowCallback
            initComplete : function(settings, json) { // this function is called after table is populated
                //$("#compListDiv").show();  // this did not work so I used regular js to show the DIV
                var d1 = document.getElementById('compListDiv');
                d1.style.visibility = 'visible';
              }, //initComplete
            "columnDefs": [  
                         { "width": "10%", "targets": 0 },
                         { "width": "20%", "targets": 0 },
                         { "width": "70%", "targets": 0 }
                       ],

            "columns":[
                       //{"data" : "id"},
                       { // render
                        "data": function (data, type, row, meta) {
                                          return '<a href="view/order?' + data.id + '">' + data.id + '</a>';
                                  }
                       },
                       {"data" : "name"},
                       {"data" : "address"}
                      ]
        }); // dataTable()
 }// companiesList()

Yosi Lev - 2016 年 2 月 22 日

【讨论】：