rowId - can't get this guy to work

dotfreelance

I'm adding the property "rowId": "id" to a lengthy existing DataTables() call expecting that the rowId will be set, but it doesn't seem to. Perhaps I misunderstand what this does?

The shape of the data passed to DataTables() is simple: it's an Ajax call that returns a javascript array of objects. Each object has several properties, and id is one of them. What I expect to happen is that each TR should have an id property with the id of each object that makes up that row. However, no id is set whatsoever.

Note that the creation of the DataTable works just fine, all columns are populated correctly.

kthorngren

Seems to work in this example:
http://live.datatables.net/voxofuze/1/edit

<tr id="Ashton Cox" role="row" class="even">
            <td class="sorting_1">Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>

Maybe you can provide more specifics (example) of your data and the Datatables init code. Better yet maybe you can update my example with a sample of your data and table structure.

Kevin

dotfreelance

Here's an example of what I'm working with:

_$developersDataTable = $developersTable.DataTable({
            "processing": false,
            "serverSide": true,
            "searching": false,
            "paging": true,
            "pagingType": "full_numbers",
            "pageLength": 25,
            "lengthChange": false,
            "ordering": true,
            "orderClasses": false,
            "order": [[0, "desc"]],
            "responsive": true,
            "rowId": "id",
            "language": {
                "zeroRecords": "No developers were found",
                "paginate": {
                    "previous": "<<",
                    "next": ">>"
                }
            },
            "columns": [
                {
                    "title": "Created", "data": "created", "orderable": true, "width": "13%",
                    "className": "hidden-xs"
                },
                {
                    "title": "Contact", "data": "name", "orderable": false, "width": "10%",
                    "render": _renderContactDetails
                },
                {
                    "title": "Type", "data": "type", "orderable": false,
                    "className": "hidden-xs"
                },
                {
                    "title": "Fav Restaurant", "data": "favouriteRestaurant", "orderable": false,
                    "className": "hidden-xs"
                },
                {
                    "title": "Likes Games?", "data": "likesVideoGames", "orderable": false,
                    "className": "text-center hidden-xs", "render": _renderCheckmarkIcon
                },
                {
                    "title": "Customer Account?", "data": "hasCustomerAccount", "orderable": false,
                    "className": "text-center hidden-xs", "render": _renderCheckmarkIcon
                },
                {
                    "title": "Bugs Fixed", "data": "bugsFixed", "orderable": false,
                    "className": "text-center hidden-xs"
                },
                {
                    "title": "", "data": "actions", "orderable": false, "width": "18%",
                    "render": _renderActions
                }
            ],
            "ajax": {
                "url": getDevelopersUrl,
                "type": "POST",
                "data": function (data) {
                    data.name = _$nameFilter.val();
                    data.email = _$emailFilter.val();
                    data.developer_type = _$developerTypeFilter.val();
                    data.likes_video_games = _$likesVideoGamesFilter.val();
                    data.bugs_fixed = _$bugsFixedFilter.val();
                },
                "dataSrc": function (json) {
                    if (json.errorMessage) {
                        _displayErrorMessage(json.errorMessage);
                    }
                    return json.data;
                }
            },
            "preDrawCallback": function () {
                _setTableIsLoading(true);
            },
            "drawCallback": function () {
                _setTableIsLoading(false);
                _bindActions();
            }
        });

The shape of the data returned by the Ajax call looks like this (Chrome console log):

(25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:{bugsFixed: 0, created: " Oct 20, 01:25  PM", createdDate: 1508523903401, hasCustomerAccount: false, type: "Mobile", …}
1:{bugsFixed: 0, created: " Oct 20, 10:17  AM", createdDate: 1508512674155, hasCustomerAccount: false, type: "Front End", …}
2:{bugsFixed: 0, created: " Oct 18, 10:15  AM", createdDate: 1508339756457, hasCustomerAccount: false, type: "Mobile", …}
3:{bugsFixed: 0, created: " Oct 16, 12:10  PM", createdDate: 1508173826520, hasCustomerAccount: false, type: "Full Stack", …}
...etc

Note that not all fields are shown above. Here's an example of item 0:

bugsFixed:0
created:" Oct 20, 01:25  PM"
createdDate:1508523903401
email:"test@skip.ca"
favouriteRestaurant:""
hasCustomerAccount:false
id:"279ee769-67df-445a-874c-06dc415d9edf"
likesVideoGames:true
name:"test"
type:"Mobile"
__proto__:Object

kthorngren

Not sure what the problem is. I updated my example which seems to work:

var data = [{'id': '179ee769-67df-445a-874c-06dc415d9edf',
             'name': 'Number 1'},
            {'id': '279ee769-67df-445a-874c-06dc415d9edf',
             'name': 'Number 2'},
            {'id': '379ee769-67df-445a-874c-06dc415d9edf',
             'name': 'Number 3'},
           ];

$(document).ready( function () {
  var table = $('#example').DataTable({
    data: data,
    rowId: "id",
    columns: [
      {data: 'name'},
             ]
  });
} );

<tr id="179ee769-67df-445a-874c-06dc415d9edf" role="row" class="odd"><td class="sorting_1">Number 1</td></tr>

Here is the live example:
http://live.datatables.net/voxofuze/2/edit

I might be missing something but it seems your ID value works in a generic test. Can you post a link to your page for troubleshooting?

Kevin

dotfreelance

That it does, so it appears there's a more complex bug, perhaps a conflict in properties with the DataTables library. Hopefully a contributor can locate the issue and solve this quickly!

dotfreelance

Unfortunately the forums here are pretty broken, so it's difficult for me to make an edit, so I'll make a second comment.

Re: posting link to page -- I cannot post a link to the page as it's a private repository used internally.

kthorngren

Maybe you can generate debugger output and post s link to the result. This provide the full data set returned.
https://datatables.net/manual/tech-notes/10

Kevin

allan

My guess is that you are using an old version of DataTables which doesn't support rowId - as the documentation shows you need DataTables 1.10.8 or newer.

Kevin has already kindly posted an example showing it working. We would need a test case showing it not working to be able to help debug and resolve the issue.

Allan

dotfreelance

No, sorry, the version of DataTables is 1.10.9. I forgot to list that.

Over the evening we managed to solve this. It's unrelated to DataTables. I really appreciate the effort you guys put in, thank you!

weijgaert

The row-id is not set when e.g. "rowId": "id" is set and the (ajax) datastring provided is like {"sColumns":"id,device,name","aaData":[["9317","MyPC","My computer"],["5247....

This is tested on DataTables version 1.10.18.

It would be an improvement when the datatable accepts this data/config as well. Thank you!

kthorngren

@weijgaert ,

The row-id is not set when e.g. "rowId": "id" is set and the (ajax) datastring provided is like {"sColumns":"id,device,name","aaData":[["9317","MyPC","My computer"],["5247....

Using "rowId": "id" indicates that the data is in object form and using columns.data to define the columns. But the example you show the data is in array form. Looks like you can set an array position to define the rowId. For example:
http://live.datatables.net/huhaquju/1/edit

I set rowId: 1 to show that it works. You can change it to rowId: 0 as that is likely your true ID.

It would be an improvement when the datatable accepts this data/config as well.

There isn't an option to set the columns when using the ajax option. However you can use an external jQuery Ajax request to get both the data and columns and set them accordingly. For example:
http://live.datatables.net/huyexejo/1/edit

Instead of processing the first data element for the columns you would process the sColumns object.

Kevin