Dynamically adding a row and adding an id for edittable
Dynamically adding a row and adding an id for edittable
Hi All,
First off, I'd like to say I'm blown away by this plugin. Combined with edittable it simply rocks at delivering a modifiable html table. Amazing! For context, this is my first time at jQuery, and I can at best be described as a 'newbie' at manipulating the DOM through javascript, so aim your answers or pointers to FAQs at the simple end of the scale, please.
Anyway, I'm trying to combine the edittable plugin and datatable. Not to pile it on too thick, but well done to both plugin authors because it Just Worked for me. The table walks and talks. Editting the contents apply on the server through ajax almost like I knew what I was doing, the table is smooth as silk. It's truly magic!
Sadly, this is the part where I don't know what I'm doing.
From the 'fnAddData' example (http://datatables.net/examples/api/add_row.html) I'm adding rows to the table like nobody's business...except I don't see how to add a CSS 'id' to the row, so the edittable plugin will have trouble reporting it to the server.
I'm looking at a function like this:
[code]
function fnClickAddRow() {
$.post("insertrow.php", { name: "John", time: "2pm" },
function(data){
oTable.fnAddData( [
giCount+".2",
giCount+".3",
giCount+".4" ] );
alert("Data Loaded: " + data);
});
giCount++;
}
[/code]
Just to be complete: this is me not knowing what I'm doing. Pointers to documents to read, or explanations on how to easily translate from datatable nomeclature to DOM node to which I can add the 'id' tag would be ideal.
Thanks all!
-Ken
First off, I'd like to say I'm blown away by this plugin. Combined with edittable it simply rocks at delivering a modifiable html table. Amazing! For context, this is my first time at jQuery, and I can at best be described as a 'newbie' at manipulating the DOM through javascript, so aim your answers or pointers to FAQs at the simple end of the scale, please.
Anyway, I'm trying to combine the edittable plugin and datatable. Not to pile it on too thick, but well done to both plugin authors because it Just Worked for me. The table walks and talks. Editting the contents apply on the server through ajax almost like I knew what I was doing, the table is smooth as silk. It's truly magic!
Sadly, this is the part where I don't know what I'm doing.
From the 'fnAddData' example (http://datatables.net/examples/api/add_row.html) I'm adding rows to the table like nobody's business...except I don't see how to add a CSS 'id' to the row, so the edittable plugin will have trouble reporting it to the server.
I'm looking at a function like this:
[code]
function fnClickAddRow() {
$.post("insertrow.php", { name: "John", time: "2pm" },
function(data){
oTable.fnAddData( [
giCount+".2",
giCount+".3",
giCount+".4" ] );
alert("Data Loaded: " + data);
});
giCount++;
}
[/code]
Just to be complete: this is me not knowing what I'm doing. Pointers to documents to read, or explanations on how to easily translate from datatable nomeclature to DOM node to which I can add the 'id' tag would be ideal.
Thanks all!
-Ken
This discussion has been closed.
Replies
[code]
var oTable;
$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#data tbody td').editable( 'uup_ajax.html', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
/* Init DataTables */
oTable = $('#data').dataTable( {
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bJQueryUI": true,
"bAutoWidth": true,
"aoColumns": [
/* id */ { "bSearchable": false,
"bVisible": true},
/* keyword */ null,
/* url */ null,
/* datetime */ null
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('tr', nRow).attr("id",$('td:eq(0)', nRow).html()); //I'm sure this is the line that's bogus.
$('td:eq(0)', nRow).attr("id","id");
$('td:eq(1)', nRow).attr("id","keyword");
$('td:eq(2)', nRow).attr("id","url");
$('td:eq(3)', nRow).attr("id","datecreated");
return nRow;
}
} );
} );
/* Global var for counter */
var giCount = 2;
function fnClickAddRow() {
$.post("insertrow.html", { name: "John", time: "2pm" },
function(data){
oTable.fnAddData( [
data,
"",
"",
"" ] );
alert("Data Loaded: " + data);
});
giCount++;
}
[/code]
Can anyone see the newbie mistake here?
Thanks,
-Ken
[code]
var oTable;
$(document).ready(function() {
/* Apply the jEditable handlers to the table */
$('#data tbody td').editable( 'uup_ajax.html', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
/* Init DataTables */
oTable = $('#data').dataTable( {
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bJQueryUI": true,
"bAutoWidth": true,
"aoColumns": [
/* id */ { "bSearchable": false,
"bVisible": true},
/* keyword */ null,
/* url */ null,
/* datetime */ null
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).attr("id",$('td:eq(0)', nRow).html());
$('td:eq(0)', nRow).attr("id","id");
$('td:eq(1)', nRow).attr("id","keyword");
$('td:eq(2)', nRow).attr("id","url");
$('td:eq(3)', nRow).attr("id","datecreated");
return nRow;
}
} );
} );
/* Global var for counter */
var giCount = 2;
function fnClickAddRow() {
$.get("insertrow.html",
function(data){
oTable.fnAddData( [
data,
"keyword",
"Enter new url",
"date not shown yet" ] );
$('#data tbody td').editable( 'uup_ajax.html', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return { "row_id": this.parentNode.getAttribute('id') };
},
"height": "14px"
} );
},"text");
giCount++;
}
[/code]
The way I understand it is that the fnRowCallback cleans up the labels each time the table is modified, while the second call to 'editable' in fnClickAddRow() adds the event bindings to the whole table again so that the new rows are clickable.
On a table of 3 rows, it's irrelevant, but on a table with 1 million rows this does seem rather a wasteful approach. Anyone know how to just add the bindings onto the new row by itself? Likewise, stepping through the whole table reassigning ids after each change feels wasteful.
Finally, I noticed that columns that aren't visible also cannot be reached using the "$('td:eq(0)', nRow).attr("id","id");" syntax. Is there a good way to access the data in those columns? I'd rather not show the primary key into my database tables if I can help it. It doesn't add any usability for the end user, so therefore it's just cluttering things up.
-Ken
if you want to use the id from a row that you have hidden you should be able to access the data from the aData variable like this:
[code]
$(nRow).attr("id", aData[0]);
[/code]
instead of
[code]
$(nRow).attr("id",$('td:eq(0)', nRow).html());
[/code]