Row selector not working on table reload

Eskindir

Hi,

I have a tree and when a node is selected I show the list of files under that folder... the datatable works fine and so does the row selector, but when I go to another folder... the selector still works but the selected row data is not captured... showing messages like "Uncaught TypeError: Cannot read property 'id' of undefined"

$('#tree-container').on('select_node.jstree',function(e,data){
              var id = data.node.id;
              var type = data.node.type;
              var nd_text = data.node.text;
              //create a new option
              var option = $('<option></option>').attr("value", id).text(nd_text);
              //remove previous options and add the newly created
              $("#directory").empty().append(option);
              $('#dir').val(data.node.id);

              var url = '{{ route('documents.list',[':id']) }}';
              url = url.replace(':id',data.node.id);
              $('#abstract').html('');
              $('#dready').hide();

              // $('#documents').dataTable().fnDestroy();
              var table = $('#documents').DataTable({
                    "processing":true,
                    "serverSide":true,
                    "searching":true,
                    "deferRender":true,
                    "ajax": {
                      "url":url,
                      "type":"GET"
                    },
                    "columns":[
                      {"data":"title"},
                      {"data":"author"},
                      {"data":"publication_date"},
                      {"data":"tags"}
                    ],
                    "rowId": 'extn',
                    "select": true,
                    "dom": 'Bfrtip',
                    "buttons": [
                        // 'columnsToggle',
                        'copy',
                        'excel',
                        'pdf'
                    ],
                    "bDestroy":true // destroys the table after rendering (keeps it from reinitializing)

                });

                // table.fnDraw();

                $('#documents tbody').on( 'click', 'tr', function () {
                    if ( $(this).hasClass('selected') ) {//if selected
                        $(this).removeClass('selected');//unselect
                        $('#abstract').html('');//void
                        $('#dready').hide();//hide
                    }
                    else {// if not selected
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                        var data = table.row( this ).data();
                        alert( 'You clicked on '+data.id );
                        $('#abstract').html(data.abstract);
                        $('#dready').show();

                        var url2 = '{{ route('document.download',[':id']) }}';
                        url2 = url2.replace(':id',data.id);

                        $("a").attr("href", url2);
                    }
                } );

                table.buttons().container().appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

          })

colin

It's probably because you're adding rows in, so DataTables is getting muddled. Have you looked at child rows, as shown in this example here. I suspect this will do exactly what you want, but works within the DataTables API.

Cheers,

Colin

Eskindir

Hi colin, thanks for the input but I don't want to do it with a child node, I wanted the selection to do with modal dialog box, what's really troubling me is that it works on first load. I have also tried setting deferedLoading and draw...still the same. the call is made and the respective data is populated but the row object is undefined.

kthorngren

Unfortunately there isn't much to go on for us to help. Is the error on line 2 (var id = data.node.id;) of the above code?

Without knowing which line the error is on, your data, etc its hard to debug your code. Maybe you can post a link or an example replicating the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

To start I would put some console log messages in to start debugging to see what the data is in the area that the error is occurring.

Kevin

Eskindir

The error is on line 58 inside the event listener for tr, on which I'm trying to get the data of the selected row and set it on an element. but I have finally managed to fix it by removing the var from the table declaration, which makes it global and overrides it on each call made on the jstree node. thanks for the help.