Make rows in DataTables clickable

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>

from Make rows in DataTables clickable