different class for the row added with fnAddData
different class for the row added with fnAddData
Hello,
I am studying javascript and datatable widget and meet a problem in using fnAddData.
I illustrate the problem with the following code. When it is loaded, only one row ("Andrew 5") is in the datatable.
If the row is dragged and then released, chrome console shows "event.currentTarget" of the mouseup event is ..., and a new row "Smith 10" will be added into the datatable. If continue dragging the first row, the class prompted out always contains "ui-draggable". However, if dragging other rows, the class does not contains "ui-draggable".
Why could these mouseup events have different classes? Is there a way to always get the classes containing "ui-draggable" if dragging any row in the datatable? I guess my way of using fnAddData is not correct.
Many thanks.
/////////////////////////////////////////////////////////
<!DOCTYPE html>
What is wrong with my code
#dt-Patients {
width: 150px;
height: 100px;
border: 2.0px solid #888;
}
$(document).ready(function() {
$('#dt-Patients').append(
'');
oTable2 = $('#wardPat').dataTable( {
"sScrollY": "470px",
"bPaginate": false,
"bInfo": false,
"sDom": 'lp',
"aaData": [
['Andrew', '0', 5]
],
"aoColumns": [
{ "sTitle": "Name" },
{ "sTitle": "ID" },
{ "sTitle": "AGE" }
]
}).on('mouseup', 'tr', function(event) {
console.log("mouseup Event");
console.log(event);
console.log(event.currentTarget);
var rec = ['Smith', '1', 10];
oTable2.fnAddData(rec);
});
$("#wardPat tbody").click(function(event) {
$(oTable2.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
$("#wardPat tbody").sortable({
cursor: "move",
start:function(event, ui){
startPosition = ui.item.prevAll().length + 1;
},
update: function(event, ui) {
endPosition = ui.item.prevAll().length + 1;
}
});
$("#dt-Patients tr:gt(0)").draggable({
revert: 'invalid',
helper: 'clone'
});
oTable2.fnSetColumnVis(1, false);
});
I am studying javascript and datatable widget and meet a problem in using fnAddData.
I illustrate the problem with the following code. When it is loaded, only one row ("Andrew 5") is in the datatable.
If the row is dragged and then released, chrome console shows "event.currentTarget" of the mouseup event is ..., and a new row "Smith 10" will be added into the datatable. If continue dragging the first row, the class prompted out always contains "ui-draggable". However, if dragging other rows, the class does not contains "ui-draggable".
Why could these mouseup events have different classes? Is there a way to always get the classes containing "ui-draggable" if dragging any row in the datatable? I guess my way of using fnAddData is not correct.
Many thanks.
/////////////////////////////////////////////////////////
<!DOCTYPE html>
What is wrong with my code
#dt-Patients {
width: 150px;
height: 100px;
border: 2.0px solid #888;
}
$(document).ready(function() {
$('#dt-Patients').append(
'');
oTable2 = $('#wardPat').dataTable( {
"sScrollY": "470px",
"bPaginate": false,
"bInfo": false,
"sDom": 'lp',
"aaData": [
['Andrew', '0', 5]
],
"aoColumns": [
{ "sTitle": "Name" },
{ "sTitle": "ID" },
{ "sTitle": "AGE" }
]
}).on('mouseup', 'tr', function(event) {
console.log("mouseup Event");
console.log(event);
console.log(event.currentTarget);
var rec = ['Smith', '1', 10];
oTable2.fnAddData(rec);
});
$("#wardPat tbody").click(function(event) {
$(oTable2.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
$("#wardPat tbody").sortable({
cursor: "move",
start:function(event, ui){
startPosition = ui.item.prevAll().length + 1;
},
update: function(event, ui) {
endPosition = ui.item.prevAll().length + 1;
}
});
$("#dt-Patients tr:gt(0)").draggable({
revert: 'invalid',
helper: 'clone'
});
oTable2.fnSetColumnVis(1, false);
});
This discussion has been closed.
Replies
I add the row to the table with jQuery then I destroy and re-initialize my dataTable.
[code]
var trHead = '';
$('#tblDragArea').prepend(trHead + 'CellData');
$('#tblSelector').dataTable().fnDestroy();
initDataTables();//where this is the function that has my $('#tblSelector).dataTable() code
[/code]
In chrome at least there seems to be no noticable redraw when this happens, but dataTables picks up the new row properly, and the classes work correctly.
This answer will work for how to add a row with attributes.
I noticed that if I had paginated data, only the rows on the first page would drag, so I did this
[code]
$('#tblWithDrag').dataTable().bind( 'draw', initMergeDrag);
[/code]
where initMergeDrag() is a function containing my $('selector').draggable(); initialization
That way after sorts, or page changes the new rows would be draggable again. This will probably also add your ui-draggable classes for you.
Many thanks for your quick reply. I clicked “Run in JS Bin" in your replies but got: DataTables live test page is currently offline. I am not sure how long this problem will last.
Is it possible that you could attach your js code to the end of your reply?
BW
zq
The run in jsBin is just an extra deal build into the forum.
The live site was the target for an attack in the last few days and is offline until I resolve that situation. I'm not sure how long it will be either. However, as Steve says, just copy and paste the code. You can double click it to get the plain, unformatted code.
Regarding adding a class to a row using fnAddData - fnAddData returns the row index of the added row(s), so you could use:
[code]
var rowIdxes = table.fnAddData( [ 1,2,3 ] );
var rowTr = table.fnGetNodes( rowIdxes[0] );
$(rowTr).addClass('myClass');
[/code]
Allan
I extended my original html page a bit which is attached. After the page is loaded, only one row is in the datatable (Andrew 5). If the row is dragged into the red box and released, other two rows will turn up in the datatable: "James 11" and "Smith 10".
I checked the details of all these three rows in "Elements" of Chrome, and they are very similar:
Andrew5
James11
Smith10
Now do the second drag:
if the first row (i.e. "Andrew 5") is dragged into the red box, no error at all.
if either the second or the third row is dragged into the red box, I got the error mentioned above.
I find this error is caused by "fnDeleteRow" (line 92) or "fnClearTable" (line 93)
Any ideas? Many thanks in advance.
zq
///////////////////////////////////////////////////////////
<!DOCTYPE html>
What is wrong with my code
#dt-Patients {
width: 150px;
height: 100px;
border: 2.0px solid #888;
}
#dt-drop {
width: 150px;
height: 20px;
background-color: #f33;
border: 2.0px solid #888;
}
$(document).ready(function() {
$('#dt-Patients').append(
'');
oTable2 = $('#wardPat').dataTable( {
"sScrollY": "470px",
"bPaginate": false,
"bInfo": false,
"sDom": 'lp',
"aaData": [
['Andrew', '0', 5]
],
"aoColumns": [
{ "sTitle": "Name" },
{ "sTitle": "ID" },
{ "sTitle": "AGE" }
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var className = nRow.className.indexOf('ui-draggable') > -1
? nRow.className:(nRow.className + " ui-draggable");
nRow.className = className;
}
}).on('mouseup', 'tr', function(event) {
console.log("mouseup Event");
console.log(event);
console.log(event.currentTarget);
console.log('event.currentTarget.className: ' + event.currentTarget.className);
});
$("#wardPat tbody").click(function(event) {
$(oTable2.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
$("#wardPat tbody").sortable({
cursor: "move",
start:function(event, ui){
startPosition = ui.item.prevAll().length + 1;
},
update: function(event, ui) {
endPosition = ui.item.prevAll().length + 1;
}
});
$("#dt-Patients tr:gt(0)").draggable({
revert: 'invalid',
helper: 'clone'
});
oTable2.fnSetColumnVis(1, false);
$('#dt-drop').droppable({
drop: function (event, ui) {
if(ui.draggable.context.outerHTML.indexOf('ui-droppable')>0)
return;
event.stopPropagation();
var rowIndex = ui.draggable.context._DT_RowIndex;
if(oTable2.fnSettings().fnRecordsTotal() < 2) {
var rec = ['Smith', '1', 10];
oTable2.fnAddData(rec);
rec = ['James', '2', 11];
oTable2.fnAddData(rec);
return;
}
// oData = oTable2.fnDeleteRow(rowIndex);
oTable2.fnClearTable();
}
});
});