Getting error "DataTables warning: table id=example - Requested unknown parameter '1' for row 1, column 1. For more information about this error, please see " while loading the data from ajax api call the json received from the back end is as below

[{"CustomerName":"Dinesh","product":"23234","perticulars":"wrwer","AddressOfCustomer":"wrew`","ContactNumbers":"jhkjhb"}, {"CustomerName":"dd","product":"dfsdfs","perticulars":"fsdfs","AddressOfCustomer":"sdfsdf","ContactNumbers":"fsfsf"}, {"CustomerName":"Pratik","product":"toothbrush","perticulars":"6 inch","AddressOfCustomer":"shreedhama white rose","ContactNumbers":"9949634396"}]

Snippet of HTML div tag for which table data is being populated is as below.

         <table id="example" class="display" align="center" vertical-align="middle"; cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Customer Name</th>
                <th>Product</th>
                <th>Perticulars</th>
                <th>Address of customer.</th>
                <th>Contact number</th>
            </tr>
        </thead>
        <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>
        <tfoot>
            <tr>
                <th>Customer Name</th>
                <th>Product</th>
                <th>Perticulars</th>
                <th>Address of customer.</th>
                <th>Contact number</th>
            </tr>
        </tfoot>
    </table>

Below is the ajax call I am doing and in success function trying to populate data from the json

        $.ajax({
            url:'AddQuotation',
            type:'get',      
            success:function(data){ 
                     alert(data);

                     var resultTable = $('#example').DataTable({

                         "columns": [
                         { data: "CustomerName" },
                         { data: "product" },
                         { data: "perticulars" },
                        { data: "AddressOfCustomer" },
                        { data: "ContactNumbers" }
                        ],
                        "destroy": true,
                        "dom": 'lrtip'
                        } );
            resultTable.rows.add(data1).draw();
            dataSet = data;         
             },
             error:function(){
              alert('error');
             }
             });

Getting error "DataTables warning: table id=example - Requested unknown parameter '1' for row 1, column 1. For more information about this error, please see http://datatables/tn/4" while loading the data from ajax api call the json received from the back end is as below

[{"CustomerName":"Dinesh","product":"23234","perticulars":"wrwer","AddressOfCustomer":"wrew`","ContactNumbers":"jhkjhb"}, {"CustomerName":"dd","product":"dfsdfs","perticulars":"fsdfs","AddressOfCustomer":"sdfsdf","ContactNumbers":"fsfsf"}, {"CustomerName":"Pratik","product":"toothbrush","perticulars":"6 inch","AddressOfCustomer":"shreedhama white rose","ContactNumbers":"9949634396"}]

Snippet of HTML div tag for which table data is being populated is as below.

         <table id="example" class="display" align="center" vertical-align="middle"; cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Customer Name</th>
                <th>Product</th>
                <th>Perticulars</th>
                <th>Address of customer.</th>
                <th>Contact number</th>
            </tr>
        </thead>
        <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>
        <tfoot>
            <tr>
                <th>Customer Name</th>
                <th>Product</th>
                <th>Perticulars</th>
                <th>Address of customer.</th>
                <th>Contact number</th>
            </tr>
        </tfoot>
    </table>

Below is the ajax call I am doing and in success function trying to populate data from the json

        $.ajax({
            url:'AddQuotation',
            type:'get',      
            success:function(data){ 
                     alert(data);

                     var resultTable = $('#example').DataTable({

                         "columns": [
                         { data: "CustomerName" },
                         { data: "product" },
                         { data: "perticulars" },
                        { data: "AddressOfCustomer" },
                        { data: "ContactNumbers" }
                        ],
                        "destroy": true,
                        "dom": 'lrtip'
                        } );
            resultTable.rows.add(data1).draw();
            dataSet = data;         
             },
             error:function(){
              alert('error');
             }
             });

• javascript
• ajax
• datatables

• Any progress with that? – Offir Commented Feb 26, 2017 at 9:38

2 Answers 2

You need to have data object that includes your array of objects.

{"data": [{"CustomerName":"Dinesh","product":"23234","perticulars":"wrwer","AddressOfCustomer":"wrew`","ContactNumbers":"jhkjhb"}, {"CustomerName":"dd","product":"dfsdfs","perticulars":"fsdfs","AddressOfCustomer":"sdfsdf","ContactNumbers":"fsfsf"}, {"CustomerName":"Pratik","product":"toothbrush","perticulars":"6 inch","AddressOfCustomer":"shreedhama white rose","ContactNumbers":"9949634396"}]}

A working DEMO.

In my case I just changed the following in my code and the error

DataTables warning: table id=bootstrap-data-table2 - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables/tn/4

was gone:

From:

<tbody>
  @foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
    {
      <tr>
        @if (item.Approved == "1")
        {
        <td>@item.Date</td>
        <td>@item.Date</td>
        <td>@item.Type</td>
        <td>@item.Amount</td>
        }
      </tr>
    }
</tbody>

To:

<tbody>
  @foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
    {
    if (item.Approved == "1")
      {
      <tr>
        <td>@item.Date</td>
        <td>@item.Date</td>
        <td>@item.Type</td>
        <td>@item.Amount</td>
      </tr>
      }
    }
</tbody>