I want to pass data on AJAX Call of OnSuccessCall. On the success of AJAX call I am using DataTable for downloading of excel and pagination. So that I am using another ajax call for binding this table with button Like this :
References
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css" />
DataTable function
$('#test').DataTable({
"bProcessing": true,
"pageLength": 10,
"serverSide": true,
"searching": true,
"order": [],
'serverMethod': 'post',
dom: 'Bfrtip',
"ajax": {
"url": "MobileUser_Login.aspx/Get_Data",
"dataType": "json",
"type": "POST",
"data": function (s) {
return JSON.stringify(s); //added this line but no changes
}
},
buttons: ['csv', 'excel', 'pdf', 'pageLength']
});
Table
<table id="test" class="width100p borderTable table_new">
<thead>
<tr>
<th></th>
</tr>
</thead>
</table>
This is Table structure for displaying related record Table is binding as Expected but Button functionality is not working Properly.
while debugging notice that at ajax is firing but I am getting following error:
DataTables warning: table id=test - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
- It seems Data is not in correct JSON format
- Data is empty.
i am passing 'data' : AllDataGrid But why is still facing this error.
SAMPLE DATA For AllDataGrid
AJAX
var AllDataGrid = [];
function load_DataForGrid() {
//debugger;
var params = {
UserName: $('#txtUserName').val(), UserID: $('#txtUserIDEdit').val(),
Status: $('input[name="Status"]:checked').val()
};
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(params),
url: "MobileUser_Login.aspx/Get_Data",
dataType: "json",
async: false,
success: function (result) {
FunctionalDataForGrid(result.d)
OnSuccessFunctionalGridCall();
},
error: function (err) { // Added this event to capture the failed requests.
console.log(err);
}
});
function FunctionalDataForGrid(pdata) {
AllDataGrid = pdata;
}
function OnSuccessFunctionalGridCall(data, status) {
d = AllDataGrid;
$("#test").DataTable({
"bProcessing": true,
"pageLength": 10,
"serverSide": true,
"searching": true,
"order": [],
'serverMethod': 'post',
dom: 'Bfrtip',
"ajax": { "url": "MobileUser_Login.aspx/Get_Data", "type": "POST", "dataType": "json", 'data': AllDataGrid },
buttons: ['csv', 'excel', 'pdf', 'pageLength']
});
//d = data.GetDraftedSDDResult.ResultObject;
var tbl = "<table id='lineItemTable' border='1' cellspacing='0' cellpadding='3' width='100%'>";
if ($('#test').length != 0) // remove table if it exists
{ $('#test').empty(); }
if (d.length == 0) {
alert('No Record to display');
}
else {
tbl += "<tr class='tr-Highlighted' style='height:30px;'><td class='align-text-center' >Sr.No</td><td class='align-text-center' style='font-weight:bold !important'>User Login</td><td id='tdUserName' class='align-text-center' style='font-weight:bold !important'>User Name</td><td class='align-text-center' style='font-weight:bold !important'>Status</td><td class='align-text-center' style='font-weight:bold !important'>Action</td></tr>";
for (i = 0; i < d.length; i++) {
tbl += "<tr><td class='width4p align-text-center'>"
+ (i + 1) + "</td><td class='width10p'>"
+ d[i].USER_LOGIN + "</td><td class='width24p'>"
+ d[i].USER_NAME + "</td><td class='width14p'>"
+ d[i].Status + "</td><td class='width4p'>" +
"<a href='#my_modal' data-toggle='modal' class='open-AddBookDialog' data-book-id='my_id_value'><img src='Images/edit.png' height='20' width='20'></a>    <a href='#my_modal' class='delete-Record'><img src='Images/delete.png' height='18' width='18'></a></td>";
}
$("#test").append(tbl);
//Paggination();
return;
}
}
return false;
};
on this AJAX call I am getting error.
"ajax": { "url": "MobileUser_Login.aspx", "type": "POST", "dataType": "json", 'data': AllDataGrid }
As we can in screen shots all data is in JSON Format But why still I am getting same error. where I am doing mistake
Dom ready
When page load I am getting this error
Web method returning data in JSON formate
Can any one help me on same what I should change in that or where abjectly I am doing wrong. How to Pass data in correct format
Thanks In Advance


