Question

我正在尝试使DataTable中的行可点击。在单击时，我想将用户导航到另一个页面。

当我执行脚本并单击行时，脚本始终将我导航到./test/data.php?id=1，这是我要用于第一行的页面。同一行在所有行中都处于活动状态。

有人知道为什么我的脚本会在所有行中粘贴第一行的链接以及我该如何解决吗？

这是我的剧本：

    <script type="text/javascript">
     $( document ).ready(function() {
      $('#grid1').DataTable({
       "bprocessing": true,
       "serverSide": true,
            "ajax": {
                "url": "response2.php",
                "type": "POST",
                "error": function(){
                    $("#grid_processing").css("display","none");
                }
            },
            "columnDefs": [ 
                { "targets": 1, "render": function ( data, type, full, meta ) { return  '<b>'+data+'</b>'} },
                { "targets": 3, "render": function ( data, type, full, meta ) { return  '<i>'+data+'</i>'} },
                { "targets": 6, "render": function ( data, type, full, meta ) { return  '<a href="./test/data.php?id='+data+'"></a>'; } }               
            ]                       
      });   
     });
    </script>
    <script type="text/javascript">
    $(document).ready(function() {

        $('#grid1').click(function() {
            var href = $(this).find("a").attr("href");
            if(href) {
                window.location = href;
            }
        });

    });
    </script>

编辑1：

response2.php：

<?php
    include_once("connection.php");

    $params = $columns = $totalRecords = $data = array();
    $params = $_REQUEST;
    $columns = array( 
        0 => 'name',
        1 => 'address',
        2 => 'number',
        3 => 'city',
        4 => 'country',
        5 => 'id'
    );

    $where = $sqlTot = $sqlRec = "";

    if( !empty($params['search']['value']) ) {   
        $where .=" WHERE ";
        $where .=" ( id LIKE '".$params['search']['value']."%' ";
        $where .=" OR name LIKE '".$params['search']['value']."%')";
    }

    if (!empty($where) ) {

   $where .= "AND user_id='1' ";
    } else {
     $where .= "WHERE user_id='1' ";
    }

    $sql = "SELECT name, address, number, city, country, id FROM customers ";
    $sqlTot .= $sql;
    $sqlRec .= $sql;
    if(isset($where) && $where != '') {

        $sqlTot .= $where;
        $sqlRec .= $where;
    }

    $sqlRec .=  " ORDER BY id DESC LIMIT ".$params['start']." ,".$params['length']." ";

    $queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));


    $totalRecords = mysqli_num_rows($queryTot);

    $queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch employees data");

    while( $row = mysqli_fetch_row($queryRecords) ) { 
        $data[] = $row;
    }   

    $json_data = array(
            "draw"            => intval( $params['draw'] ),   
            "recordsTotal"    => intval( $totalRecords ),  
            "recordsFiltered" => intval($totalRecords),
            "data"            => $data
            );

    echo json_encode($json_data);
?>

Answer 1

您需要为每个单独的行初始化click侦听器。

您可以指定设置URL或URL参数的列索引，在本示例中，该索引为6（与原始示例一样）。

已编辑：

以此替换您的点击监听器。该脚本将检测您单击了哪一行，并为链接使用正确的行：

<script type="text/javascript">
  $(document).ready(function() {

    var table = $('#grid1').DataTable();    
    $('#grid1').on( "click", "td", function (e) {
      var rowIdx = table.row( this ).index();
      var sData = table.cells({ row: rowIdx, column: 6 }).data()[0];
      if (sData && sData.length) {
        location.href = './test/data.php?id=' + sData;
      }
    });

  });
</script>

一个好主意是像@ygorbunkov的答案一样，在行中添加一些CSS样式，以便该行将显示为链接。

Answer 2

您的jquery函数将所有<a>个Dom放在表上。由于您的$(this)返回的是<table>，而不是您的<a>的一行。因此，您需要将点击事件的视角降低到我将分享的行级别或<a>级别一个例子。

在该行上创建类时，将其提供给<a>，例如class="redirector"。

{ "targets": 6, "render": function ( data, type, full, meta ) { return  '<a class="redirector" href="./test/data.php?id='+data+'"></a>'; } }

并像这样更改您的js;

$('.redirector').click(function() {
    var href = $(this).attr("href");
    if(href) {
        window.location = href;
    }
});

或者尝试一下；

  $('#grid1>a').click(function() {
      var href = $(this).attr("href");
      if(href) {
          window.location = href;
      }
  });

使数据表中的行可单击

2 个答案: