DataTables Error : “Requested unknown parameter”

Question

var headers = [{ "mDataProp": "Agents" },{ "mDataProp": "Buyer" },{ "mDataProp": "Date" }];
$(document).ready(function () {   
    $('#data-table').dataTable({
        "bFilter": false,
        "bLengthChange": false,
        "iDisplayLength": 25,
        "bJQueryUI": true,
        "bServerSide": true,
        "bProcessing": true,
        "sPaginationType": "full_numbers",
        "aoColumns": headers,
        "sAjaxSource": '/report/TestPaging',         
    });
});

If I remove the aoColumns from my code the datatable is generated normally, but when I add aoColumns I get :

DataTables warning (table id = 'data-table'): Requested unknown parameter 'Agents' from the data source for row 0

HTML:

<table id="data-table">
                <thead>
                    <tr>                          
                        <th>tmp</th>
                        <th>tmp</th>
                        <th>tmp</th>
                    </tr>
                </thead>

                <tbody>
                </tbody>
            </table>

How can I configure header names? I need them for my sorting. Do they have to be same as in "th" tags? Json response from my controller is ok because it renders fine when I remove aoColumns

I have string[][](var data) with 3 strings in each line and return it as

  Json(new{
            sEcho = param.sEcho,
            iTotalRecords = visitRepository.Query.Count(),
            iTotalDisplayRecords = visitRepository.Query.Count(),
            aaData = data
        }, JsonRequestBehavior.AllowGet);

Answer 1

The error you are experiencing is caused by a mismatch between the contents of the JSON and your aoColumns definition. The names you are targeting in aoColumns must be exactly the same as those in the JSON, and the length of each object in the JSON must be equal to the number of columns in the original HTML table. See the docs for clarification. In your case, the JSON should look like this :

[{
  "Agents": "tM4Ga0zX",
  "Buyer": "ZKwMEiIa",
  "Date": "K3lS2yn9"
},
...]

...And your JSON doesnt follow that scheme. If you are not using aoColumns, then the data is inserted by index, not by name - and that is why it is working for you without it.

You configure header names (titles) by the sTitle property :

aoColumns: [
  { mDataProp: "Agents", sTitle : "Agents" }, 
  { mDataProp: "Buyer", sTitle : "Buyer" },
  { mDataProp: "Date", sTitle : "Date" }
]

see this demonstration based on your question -> http://jsfiddle.net/kLR7G/