rowId - can't get this guy to work

rowId - can't get this guy to work

dotfreelancedotfreelance Posts: 5Questions: 1Answers: 0

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.

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • dotfreelancedotfreelance Posts: 5Questions: 1Answers: 0

    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": "&lt;&lt;",
                        "next": "&gt;&gt;"
                    }
                },
                "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
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited October 2017

    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

  • dotfreelancedotfreelance Posts: 5Questions: 1Answers: 0

    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!

  • dotfreelancedotfreelance Posts: 5Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • dotfreelancedotfreelance Posts: 5Questions: 1Answers: 0
    edited October 2017

    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!

  • weijgaertweijgaert Posts: 1Questions: 0Answers: 0
    edited October 2019

    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!

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited October 2019

    @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

This discussion has been closed.