Reload Table through Ajax Datasource
Reload Table through Ajax Datasource
Every time I call this function below the call to the web service is the same data.
function PopulateInventory()
{
var ddlCountryList, ddlCanadaStateList, ddlProductLineList, lsSKU, txtModel, txtDescription
ddlCountryList = $('.ddlCountryList').val();
ddlCanadaStateList = '';
ddlProductLineList = $('.ddlProductLineList').val();
lsSKU = $('#txtSKU').val();
txtModel = $('#txtModel').val();
txtDescription = $('#txtDescription').val()
var table = $('#tblInventory').DataTable({
processing: true,
serverSide: true,
ajax: {
type: "POST",
dataType: 'json',
url: 'Data.asmx/GetInventoryData',
data: {
'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
},
dataSrc: 'data'
, success: function (data) {
console.log(data)
}
},
destroy: true,
//deferRender: false,
retrieve: true,
stateSave: false,
oLanguage: {
"sSearch": 'Search Results'
},
responsive: true,
orderClasses: true,
caseInsensitive: true,
stripeClasses: ['GridLight', 'GridDark'],
pageLength: 10,
crossDomain: true,
columns: [
{ mDataProp: "CustomerDisplayName" },
{ mDataProp: "ModelNo" },
{ mDataProp: "SkuNo" },
{ mDataProp: "ItemDescription" },
{ mDataProp: "QtyAvailable" }
],
columnDefs: [
{
type: 'sort-numbers-ignore-text', targets: 4
}]
});
}
When I call separate ajax code I get new data every time.
function PopulateInventoryData(aretrieve, astateSave, adestroy, apageLength, ddlCountryList, ddlCanadaStateList, ddlProductLineList, lsSKU, txtModel, txtDescription) {
var request = $.ajax({
type: "POST",
dataType: 'json',
url: 'Data.asmx/GetInventoryData',
data: {
'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
},
dataSrc: 'data',
success: function (data) {
console.log(data)
}
});
}
When I put them both in the same function I get 2 calls to the web service with different data being sent. Even when they are the same variable.
function PopulateInventory()
{
var ddlCountryList, ddlCanadaStateList, ddlProductLineList, lsSKU, txtModel, txtDescription
ddlCountryList = $('.ddlCountryList').val();
ddlCanadaStateList = '';
ddlProductLineList = $('.ddlProductLineList').val();
lsSKU = $('#txtSKU').val();
txtModel = $('#txtModel').val();
txtDescription = $('#txtDescription').val();
var request = $.ajax({
type: "POST",
dataType: 'json',
url: 'Data.asmx/GetInventoryData',
data: {
'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
},
dataSrc: 'data',
success: function (data) {
console.log(data)
}
});
var table = $('#tblInventory').DataTable({
processing: true,
serverSide: true,
ajax: {
type: "POST",
dataType: 'json',
url: 'Data.asmx/GetInventoryData',
data: {
'ddlCountryList': ddlCountryList, 'ddlCanadaStateList': ddlCanadaStateList, 'ddlProductLineList': ddlProductLineList, 'lsSKU': lsSKU, 'txtModel': txtModel, 'txtDescription': txtDescription
},
dataSrc: 'data'
, success: function (data) {
console.log(data)
}
},
destroy: true,
//deferRender: false,
retrieve: true,
stateSave: false,
oLanguage: {
"sSearch": 'Search Results'
},
responsive: true,
orderClasses: true,
caseInsensitive: true,
stripeClasses: ['GridLight', 'GridDark'],
pageLength: 10,
crossDomain: true,
columns: [
{ mDataProp: "CustomerDisplayName" },
{ mDataProp: "ModelNo" },
{ mDataProp: "SkuNo" },
{ mDataProp: "ItemDescription" },
{ mDataProp: "QtyAvailable" }
],
columnDefs: [
{
type: 'sort-numbers-ignore-text', targets: 4
}]
});
}
What am I missing? I have tried every "reload" code under the sun. Please show me the way!