click on row and navigate to next page

extjac

I am trying to create a "customers list" using datatables where the user can click anywhere in the row and navigate to the next page.

The two issues I have are the followings:

1- The table has a customer ID as a column, but when I want to navigate to the next page I want to do it using a UUID instead which is not shown in the table.

Currently the html looks like this

 <tr class="pointer" onclick="window.location='{{ URL::to("/customers/{$customer->uuid}/show") }}'">
<td>ID</td>
<td>name</td>
etc....

2- The second issue is that I am not able to make the click work using jquery. The code looks like below

var table = $('#customers').dataTable({ ... })

 $('#customers').on( 'click', 'tr', function(  ) {
        e.preventDefault();
        var id = table.row( this ).id(); /// How can i get the UUID 
    } );

i get the following error:

Uncaught TypeError: table.row is not a function

the data is loaded via Ajax...and it looks like this

{
id : 1 ,
uuid : "asda0asd-ad22ad-asdad-asd-",
name : "Some Name"
},

colin

That should work - see here. office is a field in the ajax that isn't displayed in the table, but you can get its value from row().data(). Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

extjac

this is the full code

<table 
id="customers" 
class="table"  
data-page-length="25" 
data-order='[[ 1,"asc" ]]' 
data-ajax="/customers"
>
<thead class="">
<tr>
<th>id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
</table>

<script type="text/javascript">
$(document).ready(function (){
    var table = $('#customers').dataTable({
        "columns"       : [
            { data: "id"}, 
            { data: "name"}, 
            { data: "email"}, 
        ]
    });
 
    $('#customers  tbody').on( 'click', 'tr', function () {
        console.log( table.row(this) );
    } );
});
</script>

when i tried this...

    $('#customers tbody').on( 'click', 'tr', function () {
        console.log( table.row( this ).data() );
    } );

i get this error....

clients:866 Uncaught TypeError: table.row is not a function
    at HTMLTableRowElement.<anonymous>

extjac

the link you shared doesnt work

http://live.datatables.net/vuyolaka/1/edit

extjac

I think a found a solution...Added the following

    var table = $('#customers').dataTable({
        "columns"       : [
            { data: "id"},
            { data: "name"},
            { data: "email"},
        ],
        rowId: function(data) {
            return  data.uuid;
        },   
    });

then use javascript

    $('#customers tbody').on( 'click', 'tr', function () {
        var uuid = $(this).closest('tr').attr('id');
        window.location.href = baseUrl + '/customers/'+ uuid +'/edit';
    });

kthorngren

the link you shared doesnt work

It works but your browser is likely using https instead of http. Try typing http:// or try a different browser. You can see a similar example here.

table.row is not a function

See this FAQ. You need to change var table = $('#customers').dataTable( to var table = $('#customers').DataTable( with an upper case D.

Kevin