Date Error When Adding Row
Date Error When Adding Row
klermann
Posts: 277Questions: 67Answers: 1
Hello Allan, I'm using the code below to add a new row in the datatable and when I throw the rendering of the date the line is added normally and when it has rendered the date error indefined. Can you help?
Input of error:
{
data: "dataDespesa"/*,
mRender: function(data){
dataDay = data.dayOfMonth < 10 ? '0' + data.dayOfMonth : data.dayOfMonth;
dataMonth = data.monthValue < 10 ? '0' + data.monthValue : data.monthValue;
dataObj = dataDay + '/' + dataMonth + '/' + data.year
var dt = new Date(dataObj);
var options = { day: 'numeric', weekday: 'long', month: 'long',};
//return dt.toLocaleDateString('pt-BR', options);
return dataObj;
}*/
},
Code add row:
function appendRow(pagamento, descricaoDespesa, dataDespesa, grupos, conta, categoria, valorDespesa, cor) {
var t = $('#despesasTable').DataTable();
var node = t.row.add([
pagamento,
descricaoDespesa,
dataDespesa,
grupos,
conta,
categoria,
valorDespesa,
cor,
]).draw().node();
var detail_row = '';
detail_row = '<h3>Custom HTML</h3>';
$(node).addClass('result-row');
node = node.outerHTML += detail_row;
$(node).hide().fadeIn('normal');
}
$('#btnInsert').click(function() {
appendRow(null, null, null, null, null, null, '3000', null, null);
});`
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has accepted answers - jump to:
This discussion has been closed.
Answers
It looks like you are adding an array of data, but you are telling DataTables to expect an object (through the use of the
columns.dataoption).See the manual for more information.
Allan
Alan, my problem is that I need to add just one row to the datatable at time of excution, in order to insert some data in this line ... How can I do it?
Even if I use this example the same error happens, and I have to disable the rendering of the date for the example to work, after that the table data does not just show the example.
`$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
} );`
Oi Klerman,
What is the exact error message you are receiving? I am adding rows on the fly too and without any problems. So the message must give some kind of hint.
As Allan indicated you are using
columns.dataso you need to add the row as an object not an array. Something like the first example here:https://datatables.net/reference/api/row.add()#Examples
Kevin
I gotta add it here! And now, how do I make the cell date empty, because when I add a row the date field shows in cell: undefined / undefined / undefined, and I do not need to show any information in the cell!
As I said above, you need to pass in an object to
row.add(), not an array:Allan
Allan I passed the object and managed to add the line. Now the question is and how can I send the empty date cell because even though I'm sending an empty string, when it displays in the datatable it is shown like this: undefined / undefined / undefined /, but I need to be empty
Simply give it an an empty string.
dateProperty: ''.Even passing an empty string, I get undefined return!
t.row.add({pagamento : '',descricaoDespesa : '',dataDespesa : '',grupos : '',conta : '',categoria : '',valorDespesa : '30000',cor : '',}).draw()Post your full Datatables init code and your code to add the row so we can see what you are doing.
Kevin
editor = new $.fn.dataTable.Editor({ajax:{dataType: "JSON",contentType: 'application/json',data: function ( d ) {var obj;for (var key in d.data) {obj = d.data[key];break;}return JSON.stringify( obj );},create: {type:"POST",url: "/financeiro/despesas/listOne"},edit: {type: "POST",url: "/financeiro/despesas/listOne_id_"},remove: {type: "POST",url: "/financeiro/despesas/listOne_id_"}},table: "#despesasTable",template: '#form-group-editor',idSrc: "id",i18n: {error: {system: '<div class="alert alert-danger alert-dismissible" role="alert">' +'<button type="button" class="close" data-dismiss="alert" aria-label="close">' +'<span aria-hidden="true">x</span></button> Ocorreu um erro! Atualize a página e refaça a operação!</div>'}},fields: [{name: "descricaoDespesa",attr: {placeholder: 'Descrição da despesa'},"type": "autoComplete","opts": {minLength: 1,source: function( request, response ) {$.getJSON( "/financeiro/despesas/getPalavraDespesas", request, function( data, status, xhr ) {response( data );});}}},{name: "dataDespesa",type: "datetime",opts: {minDate: new Date('2000-01-01'),maxDate: new Date('2050-12-31'),format: 'DD/MM/YYYY',locale : 'pt-br',showTodayButton : true,showClear : true}},{name: "pagamento",type: "recebida",def: 0},{name: "valorDespesa",id: "receitaValor",type: "money"},{name: "cor",id: "receitaCor",type: "receitasCor",def: "#FF9562"},{name: "grupos",id: "grupos",fieldInfo: 'Sua despesa pode ser atribuída a um grupo!',type: "grupos"},{name: 'minhasContas[].id',type: "select2","opts": {"placeholder": "Selecione a Conta","allowClear": true}},{name: 'tipoDespesas[].id',"type": "select2","opts": {"placeholder": "Selecione um categoria","tags": false,"allowClear": true}},{name: "despesaFixa",type: "despesaFixa",def: 0},{name: "repetirLancDespesa",type: "condition",def: 0},{name: "despesaFixaQuantidade",id: "despesaFixaQuant",type: "spinner"},{name: "despesaFixaTempo",id: 'despesaFixaTempo',type: 'select2',"opts": {"placeholder": "Período","allowClear": true}},{name: "addObservacao",id: "addObservacao",type: "textarea",attr: {placeholder: 'Adicionar observação'}}]});What if you change
locale : 'pt-br',inlocale : 'pt-BR',?That's your Editor initialisation. The problem appears to be that you have a formatter for that column in your DataTable initialisation - although without being able to see that code I can't say for sure. My guess is that whatever formatter you have there isn't correctly handling an empty string.
The problem is here:
or in the formatting file that I use the bootstrap.
EDIT: Updated code to use Markdown code formatting.
Klerman, in your render function put a console.log to see what values you are generating.
You didn't post you row add code but I suspect the problem is you don't have fields like
dataDespesa.dayOfMonth,dataDespesa.monthValueordataDespesa.yearwhich presumably you do in the original data. This is causing theundefined. You can check to see ifdataDespesais blank and return it if so otherwise format your date field.Also, please use the Markdown code formatting.
Kevin
Perfect your suggestion kthorngren. Thanks for All!