row().select() with select extension on initComplete (Uncaught TypeError:)

2Tiny

Hi All,

Using Datatables 1.10.9 and the select extension version 1.0.1 with Bootstrap 3.3.5

My intention is to select a row after a page refresh with the api using the select extension.

...
"stateSave": true,
"stateDuration": 60*60*24,
"select": {
    style: 'single'
},
"initComplete": function(settings, json) {
    console.log( 'DataTables has finished its initialisation.' );
    table.row( ':eq(0)', { page: 'current' } ).select()
}

This returns an error:
Uncaught TypeError: Cannot read property 'style' of undefined
dataTables.select.min.js:8

Same error with using row-selector (int), for example: table.row(0).select()

Am I missing something or is it a bug?

Sorry for not providing an example but live.datatables.net is down since yesterday morning.

FlashII

Join of the question.

2Tiny

In the mean time I found out that accessing live.datatables.net with Chrome and OS X 10.9. 5 responds with "DataTables live test page is currently offline." every time. With safari I noticed some unexpected behaviour. Finally Firefox was OK.

Then adding library Select 1.0.0 or 1.0.1.dev with following code

$(document).ready( function () {
  var table = $('#example').DataTable({
    "select": true
  });
} );

will result in console message:

"Script error. (line 0)"

http://live.datatables.net/fezodoza/1/

Still looking for an answer on the initial question how to use extension select with table.row().select()?

furuian

I've got the exact same error message with the following code. Also using Datatables 1.10.9, select extension version 1.0.1, Bootstrap 3.3.5.

      "drawCallback": function( settings ) {
          var api = this.api(); 
          if (api.column(0).data().length>0) {
             api.rows().select(); // select all rows
          }
      } 

Any help or resolution would be greatly appreciated, thanks!

furuian

I just noticed that the selection of rows works for me if I use the following code:

setTimeout(function(){
  api.rows().select();
}, 1000);

Of course this implementation is not the desired way. I'd like to select all rows as soon as the table is loaded.

allan

Here is an updated version of your live.datatables.net code which works. The only change I made was to change the file load order (jQuery, DataTables then Select).

Can you update it to show the issue so I can debug it?

Allan

2Tiny

Hi Allan,

Oeps didn't even think about wrong order of scripts (assumed that live.datatables.net would have taken care of inserting (Add Library) using the correct order).

Anyway, version with code added

Adding setTimeout makes select based on ':eq(0)' work.

Using table.row(1).select(); won't work, but if I'm not mistaken the docs state that row-selector can also be an integer value.

Since the "saveState" will not return to last selected row, my final goal is to automatically return to last selection after page-refresh or when returning to the page. In the table I have the field some_id which is stored to localStorage this unique value is fetched then I need to get the corresponding row index and select row.

allan

assumed that live.datatables.net would have taken care of inserting (Add Library) using the correct order

You would think that won't you - but I've never been able to persuade it to do that...

Regarding the issue you are seeing - thanks for the test case - hugely appreciated!

There are two issues in it:

1. A bug in Select which I've just committed a fix for and is now in the nightly.
2. The use of table.row... - the issue here is that initComplete will execute at the very end of the DataTables initialisation, but before it has returned. i.e. table will be undefined. This isn't an issue if you use Ajax, but for DOM tables like in the example, to access the API in initComplete you need to use this.api().row....

Updated and working example: http://live.datatables.net/fezodoza/4/edit

Allan

2Tiny

Thank you allan.

Well you noticed, no Javascript ninja on this side :')

When trying your update, the Row index selector (int), this.api().row(1).select(); there is still no selection made..

Am I missing something?

http://live.datatables.net/fezodoza/5/

allan

this.api().table.row(1).select();

should be:

this.api().row(1).select();

http://live.datatables.net/fezodoza/7/edit

Also note that row data index 1 is on the second page of the table with default sorting.

Allan