使每一行数据表成为 ID 的超链接答案

【问题标题】：Make Each Row of DataTables a Hyperlink to ID使每一行数据表成为 ID 的超链接
【发布时间】：2018-07-17 00:08:32
【问题描述】：

我尝试了其他解决方案，但无法使其正常工作。

如何使每一行 DataTables 成为指向其 ENSG ID 的超链接？我尝试在 Ajax 界面之外进行。

<!DOCTYPE html>
<html>
<title>Datatable Demo1 | CoderExample</title>
<head>
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
    <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" >
        $(document).ready(function() {
            var dataTable = $('#gene-grid').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax":{
                    url :"gene-grid-data.php", // json datasource
                    type: "post",  // method  , by default get
                    error: function(){  // error handling
                        $(".gene-grid-error").html("");
                        $("#gene-grid").append('<tbody class="gene-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                        $("#gene-grid_processing").css("display","none");

                    }
                }



            } );
        } );
    </script>
</head>
<body>
    <div class="container">
        <table id="gene-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                <thead>
                    <tr>
                        <th>ENSG ID</th>
                        <th>Gene</th>
                        <th>Biotype</th>
                    </tr>
                </thead>
        </table>
    </div>
</body>

【问题讨论】：

看到这个datatables.net/forums/discussion/26590/…

标签： php sql datatables

【解决方案1】：

我会将行的 id 存储在数据属性中，然后编写一个单击处理程序来执行此操作...但请记住，数据表会创建动态 html，因此如果为正在销毁和重绘的内容设置单击事件，您需要将处理程序附加到父元素。我通常使用body元素。

//add this option to datatables initialization
//this will add a data attribute containing the id
//to each row in table.
"rowCallback": function( row, data ) {
      $(row).data('id',data.ID);
 }

//handler to redirect to detail page... 
$('body').on('click', 'tr', function(){
    window.location = "http://svr/app/controller/action/" + $(this).data('id');
});

【讨论】：