DataTables warning: table id=TableID - Invalid JSON response

Viewed 375

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

  1. It seems Data is not in correct JSON format
  2. Data is empty.

i am passing 'data' : AllDataGrid But why is still facing this error.

SAMPLE DATA For AllDataGrid

enter image description here

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>&nbsp&nbsp&nbsp&nbsp<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

enter image description here

Web method returning data in JSON formate

enter image description here

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

0 Answers
Related