My table is not rendering when using the editor and I can't figure out why

nitewulf50

My HTML is simple:

    <div class="col-12 border p-3">
        <table id="myBookTable" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Author</th>
                    <th>ISBN</th>
                </tr>
            </thead>
        </table>
    </div>

I mostly used the example for the .js from the Editor example here:
https://datatables.net/blog/2020-05-12

var dataTable;

$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {
    dataTable = $('#myBookTable').DataTable({
        ajax: {
            url: "/api/book",
            type: "POST"
        },
        columns: [
            { data: "book.name" },
            { data: "book.author" },
            { data: "book.isbn" }
        ],
        columnDefs: [{
            searchPanes: {
                show: true,
            },
            targets: '_all',
        }],
        dom: 'Plfrtip',
        serverSide: true
    });
}

and my ASP.NET Core Controller looks like this:

 [HttpGet]
        [HttpPost]
        public IActionResult GetBooks() {
            using (var db = new Database("sqlserver", _db.Database.GetConnectionString())) {
                var response = new Editor(db, "book")
                    .Model<Book>()
                    .Field(new Field("book.name")
                        .SearchPaneOptions(new SearchPaneOptions())
                        )
                    .Field(new Field("book.author")
                    .SearchPaneOptions(new SearchPaneOptions())
                        )
                    .Field(new Field("book.isbn")
                             .SearchPaneOptions(new SearchPaneOptions())
                        )
                    .Process(HttpContext.Request)
                    .Data();

                return Json(response);
            }
        }

Debugger code (debug.datatables.net): acotur
Error messages shown: None
Description of problem: I put a break point in my controller on "return Json(response)". The response is getting populated, my search panes have data, and my data object is full of gibberish book information from my generated test data. The problem is that nothing is displayed in my search panes or table on my web page. If I don't use the Editor API, I'm able to get the table to render. What am I doing wrong?

nitewulf50

It looks like the issue is in the controller. I used Postman to query the API and even though my response object is full of populated properties, it's not being converted properly to JSON. Postman shows that I'm getting back {} - nothing.

nitewulf50

Okey dokey. In case anyone else has a similar issue with getting Json back from ASP.NET Core. I ended up creating an anonymous type from the Editors response and returning that as Json. Now I have server side processing working with SearchPanes! I had to dig into the SearchPannes property and get the options. Not sure if it'll be necessary to go deeper into any of the other objects to serialize them properly. Also not sure why this step was necessary at all as far as I can tell I'm not doing anything crazy. It's a pretty vanilla EF code first ASP.NET Core project.

                var returnObj = new {
                    response.cancelled,
                    response.data,
                    response.debug,
                    response.draw,
                    response.error,
                    response.fieldErrors,
                    response.files,
                    response.id,
                    response.meta,
                    response.options,
                    response.recordsFiltered,
                    response.recordsTotal,
                    searchPanes = new {
                        response.searchPanes.options
                    },
                    response.upload };
                return Json(returnObj);

titechno

Hi I had a similar issue if you only need it to display the data try:

return  Json( new { data = response.data.ToList() });

instead of your code it should be easier