ID larger than 1 character not working

ID larger than 1 character not working

mrprice22mrprice22 Posts: 10Questions: 4Answers: 0

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>'
}
}]
});

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947

    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

  • mrprice22mrprice22 Posts: 10Questions: 4Answers: 0

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

    cyclegeekdev.com/osl/classes.php

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947

    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

  • mrprice22mrprice22 Posts: 10Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947
    Answer ✓

    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

  • mrprice22mrprice22 Posts: 10Questions: 4Answers: 0

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

This discussion has been closed.