[HELP] Datatable empty
[HELP] Datatable empty
MrOnizuka
Posts: 5Questions: 0Answers: 0
Hello,
I have a very big problem, my datable can't fill,
here is my json file:
[
{
"IDClient": 1,
"Nom": "Name",
"Prenom": "Abracadabra",
"Adresse": "World",
"Age": "23",
"Email": "Mee@how.net"
}
]
And here's my js file, i am used a template:
var TableEditable = function () {
var handleTable = function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
jqTds[6].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[7].innerHTML = '<a class="cancel" href="">Cancel</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 6, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 7, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate(jqInputs[5].value, nRow, 5, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 6, false);
oTable.fnDraw();
}
var table = $('#sample_editable_1');
var oTable = table.dataTable({
//"ajax": "http://localhost:50876/ServiceClient1.asmx/GetList",
"ajax": {
"url": "http://localhost:50876/toto.txt",
"dataType": "json",
"aoColumnDefs": [
{ "aTargets": [0] },
{ "aTargets": [1] },
{ "aTargets": [2] },
{ "aTargets": [3] },
{ "aTargets": [4] },
{ "aTargets": [5] },
]
},
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// set the initial value
"pageLength": 10,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#sample_editable_1_wrapper");
tableWrapper.find(".dataTables_length select").select2({
showSearchInput: false //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
var nNew = false;
$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(oTable, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
table.on('click', '.delete', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
alert(oTable.length);
alert(table.length);
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
return {
//main function to initiate the module
init: function () {
handleTable();
}
};
}();
Can you help me please ? I got stuck on this problem now 5 days.
Thanks you.
This discussion has been closed.
Replies
Please take a look at this example which covers exactly what you are looking for (Ajax loaded data from a simple array of data, and object based data for each row).
Allan
Thank you, it's working now.
But how to use with fnAddData with those columns:
"columns": [
{ "data": "IDClient" },
{ "data": "Nom" },
{ "data": "Prenom" },
{ "data": "Adresse" },
{ "data": "Editer", "sType": "html", "sDefaultContent": '<a href="" class="edit">Editera</a>' },
{ "data": "Supprimer", "sType": "html", "sDefaultContent": '<a href="" class="delete">Supprimer</a>' }
],
and here is the var :
var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
I have this error:
http://prntscr.com/6lye3b
Thank's
You are using fnAddData with an array, but you are loading your data initially as an object, and telling DataTables to expect objects through the use of
columns.data.Give it an object, not an array.
Allan
Ok, thank you for your reply
But how to give fnAddData an object, not an array ?
Any help please ?
Well, here you are giving it an array:
You give it an object, you just pass in an object:
Like this ?
var aiNew = oTable.fnAddData({IDClient:'', Nom:'', Prenom:'', Adresse:'', Editer:'', Supprimer:''});
It's working now allan, thank you but another problem, when i click on add new i have all textboxx with "undifined" prefilled
Here is a screenshot: http://prntscr.com/6n9da7
I have also this error when i would like to edit a line on datatable:
Before click on edit (Editer) : http://prntscr.com/6n9e6g
Alfter click : http://prntscr.com/6n9efc
Please, i really need your help :(
Thank's
Yes like that.
It looks like you need to update your code to use objects rather than arrays. It looks like this is based upon my blog post about editing in DataTables from years ago. That code uses the legacy API and has been completely surpassed by Editor.
Allan
Can you give me a link allan please ?
Thank you.
Editor.
Allan