单击一行必须将页面重定向到另一个URL

Question

I'm using a Datatable in my .Net MVC application. Currently I have implemented the following:

• The first column of the table is 'ID' and its data is clickable.
• Clicking on the data redirects the user to another page.
• The URL where the user is redirected is dependent on the ID being clicked. Hence each row has a unique URL.

Atop of this I have one condition applied which is as follows:

• There's another row named Status. It contains one of these values: Draft or Saved.
• So based on the value of Draft the URL to be redirected is decided.

Here's my current script:

"ajax":
   {
     "url": "/Request/Search/LoadData",
     "type": "POST",
     "datatype": "json",
     "data": function (d) {
       d.obj = searchFilters();
     },
   },
   "columns":
     [
       {
         "data": "RequestNo",
         "render": function (data, type,row, full, meta) {
           if (row.Status == "Draft") {
             return '<a href="/ChopRequest/Request?RequestId=' + data + '">' + data + '</a>';
           } else {
             return '<a href="/ChopRequest/ViewRequest/Index?id=' + data + '">' + data + '</a>';
           }
         }
       }
     ]

So in this case the only option the user has is to click the data in the very first column. Instead I want the entire row to be clickable while preserving the above mentioned conditions.

Can anyone tell me how can I achieve this?

Answer 1

You can detect clicks in other cells and redirect browser to the link located in the first column of the same row.

For example:

$('#example').on('click', 'tbody td', function(){
   window.location = $(this).closest('tr').find('td:eq(0) a').attr('href');
});

 $(document).ready(function (){ var table = $('#example').DataTable(); $('#example').on('click', 'tbody td', function(){ window.location = $(this).closest('tr').find('td:eq(0) a').attr('href'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script> <link href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css" rel="stylesheet"/> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td><a href="//www.datatables.net">Tiger Nixon</a></td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> </tbody> </table>