Populate the datatable with Ajax call
Populate the datatable with Ajax call
Hi,
I want to display the values into the table using an AJAX call. The code used for it is,
initTable();
function initTable (){
return $('#exEmpListTable').dataTable({
"bPaginate": false,
"sScrollY": "200px",
"bScrollCollapse": true
});
}
function tableActions (){
var oTable = initTable();
// perform API operations with oTable
oTable.fnSort( [ [1,'desc']] );
}
$("#btnShowExEmpList").click(function (e){
// ajax call
var selectedShop = $('#Shop').val();
if(selectedShop == null){
alert(" Please select a shop first ");
return false;
}
if(selectedShop != null){
alert("==== Selected Shop ==== "+selectedShop);
var $exEmpDialog = $("#Dialog").dialog({
width :275,
height: 400,
resizable: false,
position: ['top', 200],
modal: true
});
$exEmpDialog.dialog('close');
$.ajax({
url : 'empReqCreateNewReq.do',
data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
method : 'GET',
dataType : 'json',
contentType: "application/json; charset=utf-8",
success : function(data) {
alert('success === ' +data.exemplist.length);
alert("======== ELEMENTS ======== "+JSON.stringify(data));
//rePopulateExEmpList(data);
//data = JSON.stringify(data);
$exEmpDialog.dialog('close');
//$(this).dialog('close')
var oTable = initTable();
oTable = $("#exEmpListTable").dataTable();
//oTable.fnClearTable(0);
oTable.oData[data];
oTable.fnDraw();
$exEmpDialog.dialog('open');
},
error : function(xhr, status) {
alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
}
});
}
//$("#Dialog").dialog();
});
While running this, I can see the valus in the alert bot. But after that, it shows an error message that
DataTables warning (table id = 'exEmpListTable'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).
Please help me to solve this problem.
Regards,
Joby Joseph
I want to display the values into the table using an AJAX call. The code used for it is,
initTable();
function initTable (){
return $('#exEmpListTable').dataTable({
"bPaginate": false,
"sScrollY": "200px",
"bScrollCollapse": true
});
}
function tableActions (){
var oTable = initTable();
// perform API operations with oTable
oTable.fnSort( [ [1,'desc']] );
}
$("#btnShowExEmpList").click(function (e){
// ajax call
var selectedShop = $('#Shop').val();
if(selectedShop == null){
alert(" Please select a shop first ");
return false;
}
if(selectedShop != null){
alert("==== Selected Shop ==== "+selectedShop);
var $exEmpDialog = $("#Dialog").dialog({
width :275,
height: 400,
resizable: false,
position: ['top', 200],
modal: true
});
$exEmpDialog.dialog('close');
$.ajax({
url : 'empReqCreateNewReq.do',
data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
method : 'GET',
dataType : 'json',
contentType: "application/json; charset=utf-8",
success : function(data) {
alert('success === ' +data.exemplist.length);
alert("======== ELEMENTS ======== "+JSON.stringify(data));
//rePopulateExEmpList(data);
//data = JSON.stringify(data);
$exEmpDialog.dialog('close');
//$(this).dialog('close')
var oTable = initTable();
oTable = $("#exEmpListTable").dataTable();
//oTable.fnClearTable(0);
oTable.oData[data];
oTable.fnDraw();
$exEmpDialog.dialog('open');
},
error : function(xhr, status) {
alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
}
});
}
//$("#Dialog").dialog();
});
While running this, I can see the valus in the alert bot. But after that, it shows an error message that
DataTables warning (table id = 'exEmpListTable'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).
Please help me to solve this problem.
Regards,
Joby Joseph
This discussion has been closed.