Load json data shows the information of the page instead of the data returned by the server

Lander

Link to test case:
Debugger code (debug.datatables.net):
data returned by the server:

{numeroFactura: 16, cuf: '1ABD8AE8DE2ADE0B15F05EFBCA314FDBA0E68A02', numeroDocumento: '1526607016', nombreRazonSocial: 'Luis ', montoTotal: 10, …}

cuf: "1ABD8AE8DE2ADE0B21050DF9B30B0594D26810A4"
fechaEmision:"/Date(1666183543243)/"
montoTotal:10
nombreRazonSocial:"Luis Cornejo Boado Quiroga"
numeroDocumento:"1526607016"
numeroFactura:17

{numeroFactura: 18, cuf: '1ABD8AE8DE2ADE0B32B3D783A6B2B4027E299744', numeroDocumento: '1526607016', nombreRazonSocial: 'Luis ', montoTotal: 10, …}

        .done( function(result,status) {
            tabla = $('#tblDetalle').DataTable({
                ajax: result,
                language: idioma,
                columns: [
                    { data: "numeroFactura"},
                    { data: "cuf"},
                    { data: "numeroDocumento"},
                    { data: "nombreRazonSocial"},
                    { data: "montoTotal"},
                    { data: "fechaEmision"},
                    { data: null,
                        className: "dt-center text-danger",
                        defaultContent: '<i class="fas fa-trash-alt"/>',
                        orderable: false }
                ] //,
            });    

Error messages shown: DataTables warning: table id=tblDetalle - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
Description of problem: The server returns the correct data for the table, when loading this it returns an invalid json error.
When I check the data it is correct, however when I check the error I see that it is loaded with the commands of my source page.

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

You have ajax: result,. The ajax option expects a URL but you are passing in a JSON result. I see two options:

1. Use data to supply Datatables with the data instead of ajax, for example: data: result,
2. Remove the jQuery ajax() code you have above .done(...) and let Datatables fetch the data via the ajax URL using the ajax option

Kevin

Lander

I've already tried

    function CargarTabla() {
        var dato = $('#numeroFactura').val();
        dato += '|' + $('#cuf').val();
        dato += '|' + fechaInicio;
        dato += '|' + fechaFin;
        var miUrl = '@Url.RouteUrl(new{ action= "CargarTabla", controller= "EmiteAnulacion", dato = "_dato" })';
        miUrl = miUrl.replace('_dato', dato);
        tabla.ajax.url(miUrl).load();
        tabla.draw();

with this option it does not load the data, but it does not give an error either

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

Lander

                <table id="tblDetalle" class="table" cellspacing="0" style="width:100%">
                    <thead>
                        <tr>
                            <th>@Html.LabelFor(x => x.nroFactura, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.cuf, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.numeroDocumento, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.nombreRazonSocial, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.montoTotal, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.fechaEmision, new { @class = "col-form-label" })</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>@Html.LabelFor(x => x.nroFactura, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.cuf, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.numeroDocumento, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.nombreRazonSocial, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.montoTotal, new { @class = "col-form-label" })</th>
                            <th>@Html.LabelFor(x => x.fechaEmision, new { @class = "col-form-label" })</th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>

there's something i'm not seeing

kthorngren

with this option it does not load the data, but it does not give an error either

Its hard to say without seeing the rest of the code.

Seems like the easiest option is number one in my first response. Did you try that?

If you still need help the best thing to do is to post a link to your page or a test case replicating the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Lander

Thanks Kevin, using data works, however I still don't know why the instruction doesn't work: table.ajax.url(myUrl).load();
Use the done option to test the data returned by the server.
the solution i need is using table.ajax.url(myUrl).load();

kthorngren

I still don't know why the instruction doesn't work: table.ajax.url(myUrl).load();

The small code snippet is not enough to help debug. We will need to understand the code flow better to debug. You can start by using the browser's network inspector. Do you see the XHR request and response when the ajax.url().load() is executed?

I built this sumple example to show it works:
http://live.datatables.net/gomegike/1/edit

You will see the Start Date column change to [object Object] as the new url has object data for that column. You can find the base example here:
https://datatables.net/manual/tech-notes/9#Ajax

If you can't post a link to your page then maybe you can update my example to show the problem.

Kevin

Lander

thanks again for your support.
I need the page to start with an empty table, to later load on demand according to a data filter.
managed to make an example.
http://live.datatables.net/yaxubipe/1/edit

kthorngren

Take a look at the browser's console. You are getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'url')

You have tabla = $('#example').dataTable( { which is the problem. To get an instance of the Datatable API you need to use tabla = $('#example').DataTable( {. Notice teh upper case D. See this FAQ for more info.

Updated example:
http://live.datatables.net/yaxubipe/2/edit

Kevin

Lander

Yes, I found out after I sent.
I already found the solution, I thought to use ajax.url().load(), it still doesn't work for me, but I think it's something with c#.
Anyway fix the problem by resetting the table before calling again.
Your help was very helpful, thank you very much