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

时间:2018-07-17 00:08:33

标签: php sql datatables

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

如何使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>

1 个答案:

答案 0 :(得分:0)

我会将行的ID存储在data属性中,然后编写一个点击处理程序来执行此操作……尽管要记住,datatables创建了动态html,所以如果将click事件设置为被破坏并重绘,您将需要将处理程序附加到父元素。我通常使用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');
});