Сделайте строки в DataTables кликабельными

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

Ваша функция jquery принимает все <a> doms на столе.Поскольку ваш $(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;
      }
  });

Answer 2

Вам необходимо инициализировать прослушиватель 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>

Хорошая идея - добавить несколько стилей CSS в строку, как в ответе @ ygorbunkov, чтобы строка отображаласькак ссылка.