DataTables列中所有行的超链接

Question

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

例如： ...

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

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

以下是我用来初始化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>

Answer 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,
    ...
});

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

Answer 2

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

这里有你所有，包括dataTables错误处理..

享受..

Yosi Lev

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日