ID larger than 1 character not working

mrprice22

Here is the code for my data table. Everything renders fine, however, any data[0] ID larger than 1 digit is not working?

If I do an inspect I get something like this. The ID ( data-whatever) in my database is 214.
<a class="btn btn-small btn-primary" data-toggle="modal" data-target="#editClassModal" data-whatever="2 ">Edit</a>

$('#example').DataTable( {
"paging": true,
"fixedHeader": {
"header": false
},
"ajax": "sql/classes-dat.php",
"rowId": "id",
"columns": [
{ "data": "id", "className": "text-center" },
{ "data": "name" },
{ "data": "classdate", "className": "text-center" },
{ "data": "starttime", "className": "text-center" },
{ "data": "endtime", "className": "text-center" },
{ "data": "orgid", "className": "text-center" },
{ "data": "club" },
{ "data": "id" }
],
"columnDefs": [ {
"targets": 5,
"visible": false
},
{
"targets": -1,
"className": "text-center",
"orderable": false,
"data": "",
"render": function ( data, type, row ) {
// return '<a href="presentedit.php?id='+data[0]+'" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editClassModal" role="button">Edit</a> <button class="btn btn-danger btn-sm" data-href="index.php?d='+data[0]+'" data-toggle="modal" data-target="#confirm-delete">Delete</button>'
return '<a class="btn btn-small btn-primary" data-toggle="modal" data-target="#editClassModal" data-whatever="'+data[0]+' ">Edit</a> <button class="btn btn-danger btn-sm" data-href="classes.php?id='+data[0]+'" data-toggle="modal" data-target="#confirm-delete">Delete</button>'
}
}]
});

kthorngren

Looks like the problem is you are using objects with the columns.data option. You should be using data.id instead of data[0] in your render function

If this doesn't help please post a link to your page or put together a simple test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mrprice22

That didn't work. Here's a link.

cyclegeekdev.com/osl/classes.php

kthorngren

Looks like you still are using data[0]:

            "render": function ( data, type, row ) {
                // return '<a href="presentedit.php?id='+data[0]+'" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editClassModal" role="button">Edit</a>&nbsp;<button class="btn btn-danger btn-sm" data-href="index.php?d='+data[0]+'" data-toggle="modal" data-target="#confirm-delete">Delete</button>'
                return '<a class="btn btn-small btn-primary" data-toggle="modal" data-target="#editClassModal" data-whatever="'+data[0]+' ">Edit</a>&nbsp;<button class="btn btn-danger btn-sm" data-href="classes.php?id='+data[0]+'" data-toggle="modal" data-target="#confirm-delete">Delete</button>'
            }
        }]

Try changing the return statement to look like this:

return '<a class="btn btn-small btn-primary" data-toggle="modal" data-target="#editClassModal" data-whatever="'+data.id+' ">Edit</a>&nbsp;<button class="btn btn-danger btn-sm" data-href="classes.php?id='+data.id+'" data-toggle="modal" data-target="#confirm-delete">Delete</button>'
    }

Kevin

mrprice22

OK, I did that and now none of them are working.

kthorngren

Sorry, didn't look close enough at your code. You have defined data: "id" twice which probably won't work. Your columns should look more like this:

"columns": [
{ "data": "id", "className": "text-center" },
{ "data": "name" },
{ "data": "classdate", "className": "text-center" },
{ "data": "starttime", "className": "text-center" },
{ "data": "endtime", "className": "text-center" },
{ "data": "orgid", "className": "text-center" },
{ "data": "club" },
{ "data": null, defaultContent: '' }
],

You might not need the defaultContent option. Then your render function should use row.id instead of data.id.

return '<a class="btn btn-small btn-primary" data-toggle="modal" data-target="#editClassModal" data-whatever="'+row.id+' ">Edit</a>&nbsp;<button class="btn btn-danger btn-sm" data-href="classes.php?id='+row.id+'" data-toggle="modal" data-target="#confirm-delete">Delete</button>'

The row parameter is the full row data object.

Kevin

mrprice22

That did the trick. Thanks for your help, Kevin!