Jquery DataTables serverside in .net core

Question

I am trying to use jQuery DataTables server-side with .net core.

I am using Ajax to call my controller and I have strongly typed View with a table without body.

I am getting data in my controller but it seems I can't display it.

I thought it was JSON (https://dotnetcoretutorials.com/2018/05/05/setting-json-serialization-configuration-at-runtime-on-a-net-core-api/) but I checked and it seems it wasn't.

I tried with this tutorial but still can't find what I am doing wrong.

I just can display the "sDefaultContent" defined in Ajax.

Controller:

[HttpPost]
        public async Task<IActionResult> LoadTransaction()
        {
 var requestFormData = Request.Form;

            List<Transactions> data = await ApiClientFactory.Instance.GetInvoice();
            dataList = data;
            try
            {
                var listData =  ProcessModuleCollection(data, requestFormData);
                dynamic response = new
                {
                    Data = listData,
                    Draw = requestFormData["draw"],
                    RecordsFiltered = data.Count,
                    RecordsTotal = data.Count
                };

                return  Ok(response);

                //return Json(response);
            }
}

View:

<div class="row">

        <div>
            <div >

            </div>
            <div class="panel-body">
                <table id="example" class="table table-striped  table-hover responsive">
                    <thead>


                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.ValueDate)

                        </th>


                        <th>
                            @Html.DisplayNameFor(model => model.StructuredMessage)
                        </th>




</tr>
                    </thead>

                </table>
            </div>
        </div>
    (function($) {
                var generateCustomerTable = $("#example")
                    .dataTable({
                        "processing": true,
                        "serverSide": true,
                        "ajax": {
                            "url": "/Home/LoadTransaction",
                            "method": "POST"
                        },

                        "columns": [
                            { "data": "ValueDate", "name": "ValueDate", "sDefaultContent": '0-0-0000', "autoWidth": true },
                            { "data": "StructuredMessage", "name": "StructuredMessage", "sDefaultContent": '0-0-0000', "autoWidth": true },

                        ],
                        "ordering": true,
                        "paging": true,
                        "pagingType": "full_numbers",
                        "pageLength": 10

                    });
            })(jQuery);

here is the printScreen of my console console PrintScreen

Answer 1

i must admit as often the community StackOverFlow had already the answer the thing missing is in the ajax call datasrc

this post helps me understanding what i was trying to do

and reading a bit more comments

'dataFilter': function(data){
            var json = jQuery.parseJSON( data );
            json.RecordsTotal = json.total;
            json.RecordsFiltered = json.total;
            json.Data = json.list;


            return JSON.stringify( json ); // return JSON string
        }

in this particular case regarding what i am sending from my controller