How to initialize an empty DataTable without giving any error

andrew85

Hello,

Firstly, I would like to appreciate this widget, I find it really useful :)

Back to the topic, I'm working now managing two Datatables, in which one of them ("#tablaTransacciones") depend on certain value of the other (#tablafornituras), as each tablafornituras row may have 0-n tablaTransacciones rows (each dataTable has its own MySQL table), the column that links these two tables is piece_ref (it's called 'Referencia').

tablaTransacciones is loaded each time you choose the action "Manage transactions" in tablafornituras, which is located in a special column called Acciones (its type is defined as HTML code).

tablaTransacciones is loaded afterwards as an jquery ui dialog element, which contains the datatable, to understand all this easily, I have uploaded an image as an example: http://img543.imageshack.us/img543/1589/i5xc.jpg.


The idea it's that tablaTransacciones load the real transaction history of each piece_ref (Referencia) of tablafornituras if its current stock ("Stock Actual") is lower than original stock ("Stock Original"), if this situation doesn't happen then the idea was to create an empty DataTable with just piece_ref filled in, and there should be as many rows as original_stock amount.

Later on the user may edit this datable (I was thinking about using jEditable to accomplish this), to fill in the rest of the information and then click "Guardar" to update the information on database.


The issue that when there is no records of transactions, datatables is not working properly, and I don't know why, could you please provide me some help? I'm sure I'm doing something wrong :S


This the html code related to tablaTransacciones:

[code]




idVenta
Referencia
Número de piezas enviadas
Tipo de venta
Cliente
Actualizado en
Actualizado por






[/code]


And this the piece of code used to create tablaTransacciones:

[code]
/*******************************************************************************************************
Movements.Table.PopUpEditMovement.init
Initilizate the PopUp related to edition of sales transactions
********************************************************************************************************/
Movements.Table.PopUpEditTransactions.loadTransactionTable = function(original_stock, piece_reference_val){

Movements.Globals.TransactionDataTable = $('#tablaTransacciones').dataTable( {
"oLanguage": {
"sProcessing": "Cargando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"sButtonText": "Copiar a portapapeles",
"mColumns": [ 1, 2, 3, 4, 5, 6],
"bFooter": false
},
{
"sExtends": "xls",
"sButtonText": "Guardar a Excel",
"mColumns": [ 1, 2, 3, 4, 5, 6],
"bFooter": false
},
{
"sExtends": "pdf",
"sButtonText": "Guardar a PDF",
"mColumns": [ 1, 2, 3, 4, 5, 6],
"bFooter": false
}
]
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../get_sales_byref.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "piece_ref_defined", "value": piece_reference_val } );
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback,
"error": function(){

var saleObject = {
id_sale: -1,
piece_ref: "",
number_of_pieces: "",
type: "",
customer: "",
lastupdate_date: "",
lastupdate_by: ""
};

for(var i= 0; i< original_stock; i++){
saleObject.id_sale = i+1;
saleObject.piece_ref = piece_reference_val;
Movements.Globals.TransactionDataTable.fnAddData(saleObject);
}

Movements.Globals.TransactionDataTable.fnDraw();
}
} );
},
"aoColumns": [
{ "mData": "id_sale", "sClass": "restCol", "bVisible":false},
{ "mData": "piece_ref", "sClass": "restCol" },
{ "mData": "number_of_pieces", "sClass": "restCol"},
{ "mData": "type", "sClass": "restCol"},
{ "mData": "customer", "sClass": "restCol"},
{ "mData": "lastupdate_date", "sClass": "restCol"},
{ "mData": "lastupdate_by", "sClass": "restCol"}
]
});

Movements.Globals.TransactionDataTable.fnSort( [[5,'desc']]);
};
[/code]

The previous method is called by the method which calls the JQuery UI Dialog, here:

[code]

/*******************************************************************************************************
Movements.Table.PopUpEditMovement.init
Initilizate the PopUp related to edition of sales transactions
********************************************************************************************************/

Movements.Table.PopUpEditTransactions.init = function(event){

var row = $(event).closest("tr").get(0).rowIndex - 1
var dataRow = Movements.Globals.MainDataTable.fnGetData(row);

var original_stock = parseInt(dataRow.original_stock);
var piece_reference_val = dataRow.piece_ref;


Movements.Table.PopUpEditTransactions.loadTransactionTable(original_stock, piece_reference_val);

//We make the form visible
$("#view_Transaction" ).css("visibility", "visible");
$("#view_Transaction" ).dialog({
autoOpen: false,
height: 500,
width: 800,
modal: true,
buttons: {
"Guardar": function() {
Movements.Globals.TransactionDataTable.fnDestroy();
},
"Cancelar": function() {
Movements.Globals.TransactionDataTable.fnDestroy();
$( this ).dialog("close" );
}
},
close: function() {
Movements.Globals.TransactionDataTable.fnDestroy();
$( this ).dialog("close" );
}
});

$("#view_Transaction" ).dialog("open" );

};

[/code]

You can find the details of each dataTable here: http://debug.datatables.net/edeyuf,

Thanks for everything!

allan

As far as I can see from the code above and the debug trace, it looks okay.

> "bServerSide": true,

The fact that you are getting and error and this parameter is set, suggests that there might be something wrong wrong with the server data get I think. Looking at the debug trace, the second table hasn't made any Ajax requests. So either there is a script error occurring, or I'm missing something (entirely possible).

Can you link to a test case showing the issue so I can debug it further please.

Allan

andrew85

[quote]andrew85 said: ock, piece_reference_v[/quote]

Hello allan, I've been able to do a workaround inserting directly into database as many pieces as it's defined in "Stock Original" with the piece_id and the rest of values are default.

Afterwards I load this table like any datatables and doing this there is no problem.

I'm managing now how to implement jquery.datatables.editor in the table shown in the popup. I may create a new post related to this.

Thanks for the support anyway!