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 aoColumns from my code, the datatable is generated normally, but when I add aoColumns, I get:

DataTables warning (table id = 'data-table'): requested unknown "Agents" parameter from 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 to customize header names? I need them for my sorting. Should they be the same as in the "th" tags? Json's answer from my controller is ok because it displays fine when I remove aoColumns

I have a string [] [] (var data) with 3 lines in each row and returns it as

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

Answer 1

, , JSON aoColumns . , aoColumns , , , JSON, , JSON HTML. . docs. JSON :

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

... JSON . aoColumns, , - .

() sTitle:

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

. → http://jsfiddle.net/kLR7G/