Datatables and jEditable

jwmonteith

I have run across what appears to be a problem using Datatables and jEditable. When pagination is enabled, the number of rows that can be edited via jEditable seems to be limited to the number of rows specified per page. If 10 rows per page is in effect, then all 10 can edited, but once you try to edit row 11 or greater, editing is not possible. If the rows per page is changed to 25, then all 25 rows can be edited, but not 26 or greater. This is based on whatever the value is for number of rows per page when the program loads. Simply changing the number of rows per page using the selector, does not change the number of rows that can be edited. It's as if the class for each editable column is not available for the rows outside the scope of the orignal number displayed on the first page. Turning pagination off allows all rows in the table to be editable. Below is the sample code:

$('#BCDtable').dataTable( {
"bPaginate": false,
"bJQueryUI": true,
"bAutoWidth": true,
//"iDisplayLength": 25,
//"sPaginationType": "two_button",
"aaSorting": [ [0,'desc']],
"aoColumns": [
{ "sType": 'numeric', "sClass": "edit" },
null,
{ "sClass": "edit" },
null,
null,
null,
null,
{ "sClass": "edit_area" },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
});


$('.edit').editable(function(value, settings) {
updateDB(value);
return(value);
},

{
type : 'text',
cancel : 'Cancel',
submit : 'Submit',
indicator : '',
tooltip : 'Click to edit...'
});

tommybravo

The source of you problem
On initialization of DataTables, rows that are not visible (due to the pagination) are removed from the DOM (from your page). After that, jEditable is looking in the DOM for elements that match your pattern (".edit" in your case) and makes them editable. When you click on "page 2" in your datatable, the original rows are removed and new rows are shown. However, jEditable's "editable' function is not called again.

Solution: Use dataTables' "fnDrawCallback" function, see example:
[code]
$('#BCDtable').dataTable( {
"fnDrawCallback": function() {
$('.edit').editable();
}
});
[/code]

jwmonteith

Thanks tommy for your help. The program is working better now, but on pages 2-n the tooltip, submit and cancel are missing which are defined in the .editable function. Here is the code.

$('#BCDtable').dataTable( {

"fnDrawCallback": function() {
$('.edit').editable();
},

"bPaginate": true,
"bJQueryUI": true,
"bAutoWidth": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"aaSorting": [ [0,'desc']],
"aoColumns": [
{ "sType": 'numeric' },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]

});

$('.edit').editable(function(value, settings) {
updateDB(value);
return(value);
}, {
type : 'text',
cancel : 'Cancel',
submit : 'Submit',
//indicator : '',
tooltip : 'click to edit...'
});

tommybravo

You should include the whole jEditable code in the fnDrawCallback including all necessary configuration. Moreover, as fnDrawCallback is called even on initialization fo DataTables, it is unnecessary to call "editable" separately.

I updated your code as follows. However, I may have made some typos, so you should doublecheck it before using it.
[code]
$('#BCDtable').dataTable( {

"fnDrawCallback": function() {
$('.edit').editable(function(value, settings) {
updateDB(value);
return(value);
}, {
type : 'text',
cancel : 'Cancel',
submit : 'Submit',
//indicator : '',
tooltip : 'click to edit...'
});
},

"bPaginate": true,
"bJQueryUI": true,
"bAutoWidth": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"aaSorting": [ [0,'desc']],
"aoColumns": [
{ "sType": 'numeric' },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]

});


[/code]

jwmonteith

Thanks again tommy. Works great now!