将JSON字符串转换为JSON对象，因此无需在基本jquery.dataTables.js中进行更改

Question

I'm using ASP.net MVC on the server side. Basically I have a model class, I normally JsonConvert.SerializeObject(DataTableModel) and send it back to datatables.js . After the conversion the json data looks like the following;

"{
"draw":1,
"recordsTotal":2,
"recordsFiltered":2,
"data":[
             {"PONumber":"PO 1234","SupplierNumber":"SUP 123","SupplierName":"Supplier 1","ProductDescription":"SUND Salt & Pep Grinder 6/210g","POQuantity":"6","POUOM":"12","BatchQuantity":"18","BatchUOM":"24","ShelfDate":"2016/02/24","ExpireDate":"2016/03/15","CreatedDate":"2016/02/23","CreatedBy":"HORIZON.COM\\mohammadi","POReceiveDate":"2016/02/20","Notes":"Note 1"},
             {"PONumber":"PO 1236","SupplierNumber":"SUP 124","SupplierName":"Supplier 2","ProductDescription":"365 Cinnamon Strick Whol 6/36g*","POQuantity":"6","POUOM":"12","BatchQuantity":"18","BatchUOM":"24","ShelfDate":"2016/02/25","ExpireDate":"2016/03/31","CreatedDate":"2016/02/23","CreatedBy":"HORIZON.COM\\mohammadi","POReceiveDate":"2016/02/25","Notes":"Note 2"}
        ]
}"

It gets the data alright. But if I don't convert it to in jquery.dataTables.js >> _fnBuildAjax.baseAjax >> success into the following (between line 9 - 15) it doesn't show data; gets an error can't find lenght of undefined , which I get.

    var baseAjax = {
        "data": data,
        "success": function (json) {
            var error = json.error || json.sError;
            if ( error ) {
                _fnLog( oSettings, 0, error );
            }

            var x = JSON.parse(json);
            oSettings.json = x;
            callback(x);

            //oSettings.json = json;
            //callback( json );
        },
        "dataType": "json",
        "cache": false,
        "type": oSettings.sServerMethod,
        "error": function (xhr, error, thrown) {
            var ret = _fnCallbackFire( oSettings, null, 'xhr', [oSettings, null, oSettings.jqXHR] );

            if ( $.inArray( true, ret ) === -1 ) {
                if ( error == "parsererror" ) {
                    _fnLog( oSettings, 0, 'Invalid JSON response', 1 );
                }
                else if ( xhr.readyState === 4 ) {
                    _fnLog( oSettings, 0, 'Ajax error', 7 );
                }
            }

            _fnProcessingDisplay( oSettings, false );
        }
    };

Following are my js code binding with datatables.

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

    "processing": true,
    "serverSide": false,
    "ajax": {
        "url": "/Home/GetDateLogData",
        "type": "POST"            
    },

    "columns": [
        { "data": "PONumber" },
        { "data": "SupplierNumber" },
        { "data": "SupplierName" },
        { "data": "ProductDescription" },
        { "data": "POQuantity" },
        { "data": "POUOM" },
        { "data": "BatchQuantity" },
        { "data": "BatchUOM" },
        { "data": "ShelfDate" },
        { "data": "ExpireDate" },
        { "data": "CreatedDate" },
        { "data": "CreatedBy" },
        { "data": "POReceiveDate" },
        { "data": "Notes" }           
    ]
});

In the ajax part I've tried with dataSrc as well, didn't work.

"dataSrc": function ( json ) {
  var x = JSON.parse(json);
  return x;
},

My question, is there any builtin extender to do that, or perhaps how can I make a prototype like thing for this? I thank you in advance.

Answer 1

This is exactly the purpose of dataSrc . It is not working because you are expected to return an array of items, ie data :

dataSrc: function ( json ) {
  json = JSON.parse(json);
  return json.data; 
},

PS: Why "type": "POST" ?