Datatables warning : Requested unknown parameter

Question

User-1355965324 posted

I am using javascript  datatable to list employee record . The record is coming on the list but when I bind the data with column the following error is coming

DataTables warning: table id=EmpTable - Requested unknown parameter 'DepotNo' for row 0, column 0.

View file
<table id="EmpTable" class="table table-bordered table-striped" style="width:100%;font-size:90%">
                            <thead>
                                <tr>
                                    <th>DepotNo</th>
                                    <th>Department</th>
                                    <th>Employee</th>
                                    <th>Leave Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    DepotNo
                                </tr>
                                <tr>
                                    DepartmentID
                                </tr>
                                <tr>
                                    EmployeeName
                                </tr>
                                <tr>
                                    EmpLeaveDate
                                </tr>
                            </tbody>
                        </table>


<script type="text/javascript">
    $(document).ready(function () {

        GetEmployeeRecord();
    })
    function GetEmployeeRecord() {
        var datefrom = '@ViewBag.DateFrom';
        var dateto = '@ViewBag.DateTo';
        alert(datefrom + "," + dateto);
        var url = "/Report/GetEmployeeRecord?dtfrom=" + datefrom + "&dtto=" + dateto
        $.ajax({
            type: "GET",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                BindDataTable(response);
            } 
        });

        


    }
    function BindDataTable(response) {
        
        table = $('#EmpTable').DataTable({
            data: response,
            "columns": [
                { "data": "DepotNo" },
                { "data": "DepartmentID" },
                { "data": "EmployeeName" },
                { "data": "EmpLeaveDate" },

            ]
        });


    }

</script>

Contoller
public JsonResult GetEmployeeRecord(string dtfrom, string dtto)
        {
            DateTime _dtfrom = new DateTime();
            DateTime _dtto = new DateTime();
            _dtfrom = DateTime.Parse(dtfrom);
            _dtto = DateTime.Parse(dtto);
           

            List<EmployeeModel> EmpList = _iRepo.GetAll().Where(u => u.EmpLeaveDate >= _dtfrom && u.EmpLeaveDate <= _dtto).
                 Select(u => new EmployeeModel
                 {
                     DepotNo = u.DepotNo,
                     DepartmentID=u.DepartmentID,
                     EmployeeName = u.EmployeeName

                 }).ToList();

            String jsonResult = JsonConvert.SerializeObject(EmpList);
            return Json(jsonResult);  The recordlist is coming here


        }
Please help

The record is coming as list as given below

 

EmployeeID":100,"DepartmentID":1,"DepotNo":1,"EmployeeName":"James"

Answer 1

User-474980206 posted

Your action is returning a a json string whose value is another json string. Therefore in the response in the Ajax call is a json string that must be deserializes. Not sure why you doubled up the serialization. If you just:

          return Json(EmpList); 

It would be simpler.

Answer 2

User-1355965324 posted

Many Thanks Bruce

I chnaged my code as you advised. But still the record is  not mapped to the datatable column. Please can you advise me where is the problem it would be very appreciated

  public JsonResult GetEmployeeRecord(string dtfrom, string dtto)
        {
            DateTime _dtfrom = new DateTime();
            DateTime _dtto = new DateTime();
            _dtfrom = DateTime.Parse(dtfrom);
            _dtto = DateTime.Parse(dtto);
           

            List<EmployeeModel> EmpList = _iRepo.GetAll().Where(u => u.EmpLeaveDate >= _dtfrom && u.EmpLeaveDate <= _dtto).
                 Select(u => new EmployeeModel
                 {
                     DepotNo = u.DepotNo,
                     DepartmentID=u.DepartmentID,
                     EmployeeName = u.EmployeeName

                 }).ToList();

            //String jsonResult = JsonConvert.SerializeObject(EmpList);
            return Json(EmpList);


        }

But the record is not binding with datatable
 function GetEmployeeRecord() {
        var datefrom = '@ViewBag.DateFrom';
        var dateto = '@ViewBag.DateTo';
        alert(datefrom + "," + dateto);
        var url = "/Report/GetEmployeeRecord?dtfrom=" + datefrom + "&dtto=" + dateto
        $.ajax({
            type: "GET",
            url: url,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                BindDataTable(response);
            } 
        });

        


    }
    function BindDataTable(response) {         
        table = $('#EmpTable').DataTable({
            data: response,
            "columns": [
                { "data": "DepotNo" },
                { "data": "DepartmentID" },
                { "data": "EmployeeName" },
                { "data": "EmpLeaveDate" },

            ]
        });


    }

With Thanks

Pol

Answer 3

User665608656 posted

Hi polachan,

As @bruce said, you don't need to convert the list collection into json format again in GetEmployeeRecord method, because the return type of your method at this time is JsonResult type, so you should change you method as follows:

public JsonResult GetEmployeeRecord(string dtfrom, string dtto)
        {
            DateTime _dtfrom = new DateTime();
            DateTime _dtto = new DateTime();
            _dtfrom = DateTime.Parse(dtfrom);
            _dtto = DateTime.Parse(dtto);
           

            List<EmployeeModel> EmpList = _iRepo.GetAll().Where(u => u.EmpLeaveDate >= _dtfrom && u.EmpLeaveDate <= _dtto).
                 Select(u => new EmployeeModel
                 {
                     DepotNo = u.DepotNo,
                     DepartmentID=u.DepartmentID,
                     EmployeeName = u.EmployeeName

                 }).ToList();

           // String jsonResult = JsonConvert.SerializeObject(EmpList);
             return Json(EmpList, JsonRequestBehavior.AllowGet);


        }

Best Regards,

YongQing.

Answer 4

User-1355965324 posted

When I apply JsonRequestBehavior.AllowGet() the error is coming as ' the name  JsonRequestBehavior doesnot exist in the current  context. Please help me how to fix

Thanks

Pol

Answer 5

User665608656 posted

Hi polachan,

When I apply JsonRequestBehavior.AllowGet() the error is coming as ' the name  JsonRequestBehavior doesnot exist in the current  context. Please help me how to fix

Based on your description, you can change the code to the following:

public string GetEmployeeRecord(string dtfrom, string dtto)
        {
            DateTime _dtfrom = new DateTime();
            DateTime _dtto = new DateTime();
            _dtfrom = DateTime.Parse(dtfrom);
            _dtto = DateTime.Parse(dtto);
           

            List<EmployeeModel> EmpList = _iRepo.GetAll().Where(u => u.EmpLeaveDate >= _dtfrom && u.EmpLeaveDate <= _dtto).
                 Select(u => new EmployeeModel
                 {
                     DepotNo = u.DepotNo,
                     DepartmentID=u.DepartmentID,
                     EmployeeName = u.EmployeeName

                 }).ToList();
            String jsonResult = JsonConvert.SerializeObject(EmpList);
             return jsonResult ;


        }

Best Regards,

YongQing.

Answer 6

User-474980206 posted

to allow get try:

[HttpGet]
public JsonResult GetEmployeeRecord(string dtfrom, string dtto)

you should use the browser debug tools to see the response data.

Answer 7

User2053451246 posted

You are declaring 4 columns in your table but only sending 3 in your Json response.  Also, I don't think you should have anything in the <tbody>.  The ajax request builds that with the response.