I have a response coming from DB, for which I want to bind those data in HTML table. So for that I have written below code. But with below jquery datatable logic the data is not getting bound
function loadCMPWiseData() {
var CMP;
showLoading();
try {
CMP = $("#ddlCMPSignOff option:selected").text();
//if (validRequest() == true) {
var Values = { "CIRCLE": CMP};
$.ajax({
type: "POST",
url: AppConfig.PrefixURL + "App/GetMPFTTXData",
data: JSON.stringify(Values),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
$("#fttxPanWiseDatatable").hide();
$("#fttxCmpWiseDatatable").show();
$('#fttxCmpWiseDatatable').dataTable({
data: response,
"columns": [
{ "CIRCLE": "CIRCLE" },
{ "FSA": "FSA" },
{ "TotalKM": "TotalKM" },
{ "UGKM": "UGKM" },
{ "AerialKM": "AerialKM" },
{ "MDUKM": "MDUKM" }
]
});
},
error: function (response) {
hideLoading();
},
complete: function (response) {
if (CurrentGroupName != UserGrouop.NHQPMO && response.responseJSON.length > 0) {
// $("#btnExportPDFFTTX").show();
} else {
// $("#btnExportPDFFTTX").hide();
}
hideLoading();
}
});
// } else {
//jAlert("All fields are mandatory!", "Alert");
hideLoading();
//}
} catch (e) {
hideLoading();
}
}
<table id="fttxCmpWiseDatatable" class="table sodTable table-bordered nowrap pageResize dataTable" style="width: 100%;">
</table>
Also see the response:
[
{
"CIRCLE": "Tirupati",
"FSA": 1,
"TotalKM": 11.88,
"UGKM": 0.35,
"AerialKM": 11.53,
"MDUKM": 0
},
{
"CIRCLE": "Vishakhapatnam",
"FSA": 2,
"TotalKM": 0,
"UGKM": 0,
"AerialKM": 0,
"MDUKM": 0
},
{
"CIRCLE": "Kakinada",
"FSA": 1,
"TotalKM": 0,
"UGKM": 0,
"AerialKM": 0,
"MDUKM": 0
},
{
"CIRCLE": "Rajahmundry",
"FSA": 2,
"TotalKM": 0,
"UGKM": 0,
"AerialKM": 0,
"MDUKM": 0
},
{
"CIRCLE": "Kurnool",
"FSA": 1,
"TotalKM": 0,
"UGKM": 0,
"AerialKM": 0,
"MDUKM": 0
},
{
"CIRCLE": "Vijaywada",
"FSA": 2,
"TotalKM": 13.39,
"UGKM": 13.12,
"AerialKM": 0.26,
"MDUKM": 0
},
{
"CIRCLE": "Anantapur",
"FSA": 1,
"TotalKM": 0.04,
"UGKM": 0,
"AerialKM": 0,
"MDUKM": 0.04
}
]
Update after C3roe statement
Here is the final try what I did
function loadCMPWiseData() {
var CMP;
showLoading();
CMP = $("#ddlCMPSignOff option:selected").text();
$('#fttxCmpWiseDatatable').DataTable({
ajax: {
type: "POST",
url: AppConfig.PrefixURL + "App/GetMPFTTXData",
data: JSON.stringify(Values),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false
},
columns: [
{ data: "CIRCLE" },
{ data: "FSA" },
{ data: "TotalKM" }
]
} );
}