jquery datatable gives error when rendering

Question

I'm trying to fill JQuery Datatable with data via ajax:

HTML

<table id="table-productMaterials">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Quantity</th>
            <th>Status</th>
        </tr>
    </thead>
</table>

Javascript

$(document).ready(function () {
    var options = {
        "processing": true,
        "ajax": {
            "url": "ProductMaterials.ashx?action=get",
            "type": "POST",
            "data": {
                "productId": $('#product_id').val()
            },
            "columns": [
                        { "data": "Id" },
                        { "data": "MaterialName" },
                        { "data": "Quantity" },
                        { "data": "Status" }
            ]
        },
    };
    table = $('#table-productMaterials').DataTable(options);
});

Generic handler output:

{"data": [{"Id":1,"Quantity":15.00,"Status":"1","MaterialName":"Iron","ProductName":"French onion soup"},{"Id":3,"Quantity":14.00,"Status":"1","MaterialName":"Nails","ProductName":"French onion soup"}]}

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

I refered to this page and read an example but can't seem to get this resolved. What I'm making wrong?

Answer 1

You have to place the columns property outside of the ajax property like this:

$(document).ready(function () {
    var options = {
        "processing": true,
        "ajax": {
            "url": "ProductMaterials.ashx?action=get",
            "type": "POST",
            "data": {
                "productId": $('#product_id').val()
            },
        },
        "columns": [
                                { "data": "Id" },
                                { "data": "MaterialName" },
                                { "data": "Quantity" },
                                { "data": "Status" }
        ]
    };
    table = $('#table-productMaterials').DataTable(options);
});

Then it will work.