Make rows in DataTables clickable

Question

I am trying to make the rows in my DataTable clickable. On click I want to navigate the user to another page.

When I execute the script and click on the rows the script always navigates me to ./test/data.php?id=1 which is the page I want to use for the first row. The same script is active in all the rows.

Does someone know why my script is pasting the link for the first row in all the rows and how I can fix this?

Here is my script:

    <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>

Edit 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);
?>

your $(this).find("a") will always find the first anchor tag it comes across which is the first row. Hence it is redirecting to ./test/data.php?id=1 every time. — prinkpan
– prinkpan, Commented Feb 10, 2019 at 17:41
I know the example. When I replace my javascript with the javascript in the example I get the same result. I get always You clicked on 1's row. I tried to use <thead> an <tr> in my script but the result is the same. I still get You clicked on 1's row. — John
– John, Commented Feb 11, 2019 at 22:27

lofihelsinki · Accepted Answer · 2019-02-26 13:10:37Z

1

+50

You need to initialize the click listener to each individual row.

You can specify the column index where the URL or URL parameter is set, in this example the index is 6 as in your original example.

Edited:

Replace your click listener with this. This script will detect which row you clicked and use the correct row for the link:

<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>

A good idea is to add some CSS styles to the row as in @ygorbunkov's answer, so that the row will appear as a link.

edited Feb 26, 2019 at 13:10

answered Feb 25, 2019 at 11:17

lofihelsinki

2,5852 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lofihelsinki Over a year ago

True, the listener does not need to be reinitialized after the ajax call, edited accordingly. As for the other points: I think having the listener on a td element instead of a tr is good practice, threfore the row has to be investigated with the cell co-ordinates. Your comment about the data model doesn't apply here, since the asked specified ajax, if i understood your comment correctly.

lofihelsinki Over a year ago

My approach does work weather the link is rendered or not. It uses the original value rather than the rendered value.

lofihelsinki Over a year ago

I see, and understand your point. I however don't think it's relevant regarding the original question since the asker specified the data model to have only visible cells.

lofihelsinki Over a year ago

I guess .data()[6]. But that wouldn't work with your data model, as data() wouldn't return an array :)

arici · Accepted Answer · 2019-02-25 15:05:37Z

0

Your jquery function takes all <a> doms on table. Because your $(this) returns <table> not a row of the your <a>.So you need to reduce your click event's perspective to row level or to <a> level as which I will share an example with you.

Give a class to <a> for example class="redirector" when you are creating it on that line.

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

And change your js like;

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

Or try just this;

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

edited Feb 25, 2019 at 15:05

answered Feb 25, 2019 at 14:54

arici

778 bronze badges

2 Comments

lofihelsinki Over a year ago

Wouldn't this make only the link clickable, not the whole row? Both $('.redirector') and $('#grid1>a') only point to the link itself, not the whole row?

lofihelsinki Over a year ago

In the original question: I am trying to make the rows in my DataTable clickable

Collectives™ on Stack Overflow

Make rows in DataTables clickable

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related