Row selection not working, but argument sRowSelect is recognized (hand-like cursor)

tknop

Hi,

First thank you so much for those great plugins.
I've a hard time trying to make the row selection working (multi or single)... I've already use the search function to see if a similar topic with a working solution exists but it appears not.

Actually, i've no errors in the console, and the table acts like it recognize the possibility to select a row (the cursor is a hand when passing over rows). However, nothing happens when i click on the rows : they are nor highlighted, nor the "edit" and "delete" buttons become clickable.
Unfortunately, I can't provide the links to the app.

I'm a little desperate right now...

Could you guys help me figuring out where is the problem ?

Thank you so much !

Maybe i have to precise that in order to make the tabletools plugin working when sRowSelect is present, i had to modify the datatables.min.js at line 47 : the live call is now deprecated and i replaced it by "on". I don't know if it's relevant or not since i'm a newbie with web development (jquery, ajax, js)

Here are the report from the datatable debugging tools : http://debug.datatables.net/oxases
Here are the (i think) relevant part of my code :

[code]




N°
Name
E-mail
Player 1
Study
University
Year
Player 2
Study
University
Year






$(function() {
var oTable;
var editor;
function getParticipants(){
$.ajax({
url: 'tools/getJSON.php',
type: 'POST',
data: {value: 1},
dataType:'json',
success: function(data){
editor = new $.fn.dataTable.Editor({
'ajaxUrl': 'tools/table.participants.php',
'domTable': '#datatable',
'fields': [
{
'label': 'N°',
'name': 'ID',
'type': 'text'
},
{
'label': 'Name',
'name': 'teamName',
'type': 'text'
},
{
'label': 'E-Mail',
'name': 'email',
'type': 'text'
},
{
'label': 'Challenger 1',
'name': 'challenger1',
'type': 'text'
},
{
'label': 'Studies (Chall. 1)',
'name': 'studies1',
'type': 'text'
},
{
'label': 'University (Chall. 1)',
'name': 'university1',
'type': 'text'
},
{
'label': 'Study year (Chall. 1)',
'name': 'studyyear1',
'type': 'text'
},
{
'label': 'Challenger 2',
'name': 'challenger2',
'type': 'text'
},
{
'label': 'Studies (Chall. 2)',
'name': 'studies2',
'type': 'text'
},
{
'label': 'University (Chall. 2)',
'name': 'university2',
'type': 'text'
},
{
'label': 'Study year (Chall. 2)',
'name': 'studyyear2',
'type': 'text'
}
]
});
oTable = $('#datatable').dataTable({
'sDom': '<\'row-fluid\'<\'span6\'l><\'span6\'fT>r>t<\'row-fluid\'<\'span6\'i><\'span6\'p>>',
'oTableTools': {
'sRowSelect': 'single',
'aButtons': [
{ 'sExtends': 'editor_create', 'editor': editor },
{ 'sExtends': 'editor_edit', 'editor': editor },
{ 'sExtends': 'editor_remove', 'editor': editor },
'copy',
'csv',
'xls',
{
'sExtends': 'pdf',
'sTitle': 'List of Participants',
'sPdfOrientation': 'landscape',
'sFileName': 'Participants - LSM Cup 2014'
},
'print'
],
'sSwfPath': 'datatable/copy_csv_xls_pdf.swf'
},
'sPaginationType': 'bootstrap',
'bProcessing': true,
'bPaginate': true,
'bFilter': true,
'bDestroy': true,
'bStateSave' : true,
'aaData': data
});

},
error: function(data){
alert('Ajax Failure');
}
});
};
function reload(){
getParticipants()

};
getParticipants();
$.extend( $.fn.dataTableExt.oStdClasses, {
'sWrapper': 'dataTables_wrapper form-inline'
});
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
'container': 'btn-group',
'buttons': {
'normal': 'btn',
'disabled': 'btn disabled'
},
'collection': {
'container': 'DTTT_dropdown dropdown-menu',
'buttons': {
'normal': '',
'disabled': 'disabled'
}
}
} );

// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
'collection': {
'container': 'ul',
'button': 'li',
'liner': 'a'
}
} );
setInterval(reload, 60000);
});
[/code]

allan

Hi,

Thanks for trying out Editor. I see your trial expired back at the end of August. How have you been getting on with it (other than this error!)?

The error should be relatively simple to resolve if you could show me the change that you made in TableTools please?

Thanks,
Allan

tknop

Hi Allan,

Thanks for your answer !

Here at the part of the TableTools.min.js. For readability purpose, i show you the change in the TableTools.js file. Here is the relevant part (without modification). I juste replace the
[code]
$('tr', dt.nTBody).live( 'click', function(e)
[/code]

by

[code]
$('tr', dt.nTBody).on( 'click', function(e)
[/code]

since i read somewhere that the "live" function was now deprecated and totally removed from the last version of jQuery. If I don't modify the source, my app get stuck on the 'live' call (the console displays an error on the live call).

[code]
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Row selection functions
*/

/**
* Add event handlers to a table to allow for row selection
* @method _fnRowSelectConfig
* @returns void
* @private
*/
"_fnRowSelectConfig": function ()
{
if ( this.s.master )
{
var
that = this,
i, iLen,
dt = this.s.dt,
aoOpenRows = this.s.dt.aoOpenRows;

$(dt.nTable).addClass( this.classes.select.table );

$('tr', dt.nTBody).live( 'click', function(e) {
/* Sub-table must be ignored (odd that the selector won't do this with >) */
if ( this.parentNode != dt.nTBody )
{
return;
}

/* Check that we are actually working with a DataTables controlled row */
if ( dt.oInstance.fnGetData(this) === null )
{
return;
}

if ( that.fnIsSelected( this ) )
{
that._fnRowDeselect( this, e );
}
else if ( that.s.select.type == "single" )
{
that.fnSelectNone();
that._fnRowSelect( this, e );
}
else if ( that.s.select.type == "multi" )
{
that._fnRowSelect( this, e );
}
} );

// Bind a listener to the DataTable for when new rows are created.
// This allows rows to be visually selected when they should be and
// deferred rendering is used.
dt.oApi._fnCallbackReg( dt, 'aoRowCreatedCallback', function (tr, data, index) {
if ( dt.aoData[index]._DTTT_selected ) {
$(tr).addClass( that.classes.select.row );
}
}, 'TableTools-SelectAll' );
}
},

[/code]

Do you have any ideas ?

Thank you for your help !

tknop

Actually, i just saw that the content of min.js is not exactly the same as the .js file for that part of the code. Is it normal ?

allan

> Actually, i just saw that the content of min.js is not exactly the same as the .js file for that part of the code. Is it normal ?

No that doesn't sound correct.

Could you clarify your Editor usage for me please? You are currently using an unlicensed version of Editor, unless it was purchased with a different account? If so, can you let me know so I can support the software correctly.

Allan

tknop

Allan,

I answer your question by inbox message :)

allan

Thanks for your message. I'd suggest using TableTools 2.1.5, the current release, which uses `on` rather than `live` : http://datatables.net/download .

Specifically:

> $('tr', dt.nTBody).live( 'click', function(e) {

Should become:

[code]
$(dt.nTBody).on( 'click', 'tr', function(e) {
[/code]

Allan

tknop

Thanks Allan, it works fine now :)

I can select the row, but it makes disappearing the edit and delete buttons, as if the buttons bar was not correctly linked to the table. But i'm gonna check this.
Its for sure a stupid mistake.

tknop

It works fine now, thanks to your answer in that thread : http://www.datatables.net/forums/discussion/comment/42713

Thanks a lot!