Я использую jQuery DataTables с установленным плагином jEditable. У меня все работает корректно, таблица корректно рендерит и тянет данные. Таблица доступна для редактирования, и скрипт правильно обновляет внутреннюю базу данных. Единственная проблема заключается в том, что значение обновляется, тогда ячейка пуста, пока вы не нажмете «Обновить», после чего новое значение станет видимым.
Я попытался включить fnDraw в обратный вызов, чтобы он перерисовал таблицу, но я не могу понять это? Единственное, чего мне не хватает, так это динамического обновления таблицы после записи нового значения в БД.
Вот мой код:
<script>
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#district').dataTable();
/* Apply the jEditable handlers to the table */
$('#district', oTable.fnGetNodes()).editable( 'lib/editable_ajax.php', {
tooltip : 'Click cell to edit value...',
indicator : 'Saving...',
style : 'display:block;',
submit : 'OK',
cancel : 'Cancel',
data : " {'PDC 30':'PDC 30','PDC 14':'PDC 14','PDC 81':'PDC 81','PDC 58':'PDC 58'}",
type : 'select',
"Callback": function( sValue, x) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1]);
/* Redraw the table from the new data on the server */
oTable.fnClearTable( 0 );
oTable.fnDraw();
},
"submitdata": function ( value, settings ) {
var aPos2 = oTable.fnGetPosition( this );
var id2 = oTable.fnGetData( aPos2[0] );
return {
"row_id": this.parentNode.getAttribute('id'),
"id2": id2[0],
"column": oTable.fnGetPosition( this )[ 2 ]
};
},
"height": "14px",
} );
} );
</script>