Server Side processing issue

sbrodolox

Hi, I am working on an old custom .NET web application which uses an old version of jquery and datatables:

Datatables Version: 1.9.2
jquery Version: 1.9.1

Before replying to upgrade them, I can't. It's a task they want to work on, but in the future, so this are the actual js I am working on and must keep them.

I have a huge dataset to render on a datatable (from 30k to over 200k) so I have choosed to go for the server side processing.

This is the script code I have on the page:

    $('#dtBasicGrid').DataTable({
        'bProcessing': true,
        "bServerSide": true,
        "sAjaxSource": '<%= ResolveUrl("~/api/LoadBigData") %>',
        "aoColumns": [{
                "mData":"Name"
            },
            {
                "mData":"Surname"
            },
            {
                "mData":"Email"
            }
        ]
    });

And this is the HTML table:

        <table id="dtBasicGrid" class="datatableFilteredPaged" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col">
                        <asp:Literal runat="server" Text="Name" /></th>
                    <th scope="col">
                        <asp:Literal runat="server" Text="Surname" /></th>
                    <th scope="col">
                        <asp:Literal runat="server" Text="Email" /></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            </tfoot>
        </table>

The JSON I have in response is this one:

https://jsonblob.com/c95c0e28-fd34-11e8-bf24-d1d4ca98b0e9

If I open the page, this is the error I find in console:

jquery.dataTables.min.js:48 Uncaught TypeError: Cannot read property 'length' of undefined
at Fa (jquery.dataTables.min.js:48)
at jquery.dataTables.min.js:45
at Object.success (jquery.dataTables.min.js:132)
at fire (jquery-1.9.1.js:1037)
at Object.fireWith [as resolveWith] (jquery-1.9.1.js:1148)
at done (jquery-1.9.1.js:8074)
at XMLHttpRequest.callback (jquery-1.9.1.js:8598)

Can anyone help me please?

Many thanks
Jonathan

kthorngren

The JSON string looks like this:

{\"sEcho\":\"1\",\"iTotalRecords\":\"22\",\"iTotalDisplayRecords\":\"22\",\"aaData\":[{\"Name\":\"Wendell7\",\"Surname\":\"Esteban\",\"Email\":\"edbfb@tzoeeku.vvuzwv.net\"},{\"Name\":\"Fernando22\",\"Surname\":\"Alexis\",\"Email\":\"ypgsct.icyklq@iyhiosqw.szafuh.org\"},{\"Name\":\"Kathy\",\"Surname\":\"Dominic640\",\"Email\":\"rcormfa@ljqfjm.com\"},{\"Name\":\"Brenda41\",\"Surname\":\"Ricardo286\",\"Email\":\"oozg.oktllotp@nxqws.vrwnju.org\"},{\"Name\":\"Glenn\",\"Surname\":\"Darla\",\"Email\":\"rtdku.wpixvh@hiwfwsm.ufgshj.com\"},{\"Name\":\"Jose\",\"Surname\":\"Latonya84\",\"Email\":\"uizt.jvncriiy@ufoeno.org\"},{\"Name\":\"Donald\",\"Surname\":\"Carol6\",\"Email\":\"fxiemyjm15@txzbruae.wjhyav.org\"},{\"Name\":\"Randall4\",\"Surname\":\"Darla\",\"Email\":\"fdxouc57@yuiqnmre.xja-il.net\"},{\"Name\":\"Patrick622\",\"Surname\":\"Emma999\",\"Email\":\"airxyykl.uvtd@apbb.kocazh.net\"},{\"Name\":\"Celeste1\",\"Surname\":\"Jonathon16\",\"Email\":\"olqj4@-wyeun.net\"}]}

It looks like your server code is json encoding the data twice. It shouldn't have the escaped quotes (\"). You can use https://jsonlint.com/ to test the string.

Kevin

sbrodolox

Hi Kevin, I did check, and it gives me a valid result but I'll check on the double encoding.

kthorngren

I did check, and it gives me a valid result

Interesting. When I copy the above string into jsonlint it gives this error:

Error: Parse error on line 1:
{\  "sEcho\":\"1\",\"
-^

Kevin

sbrodolox

I know that I need to remove does escaped quotes, trying to find how.

sbrodolox

I got the JSON fixed, now grid is correctly binded but I can't get the selected page number on server side. Which is the param name?

kthorngren

This doc shows the server side processing parameters that are sent and expected back from the server:
https://datatables.net/manual/server-side

Kevin

sbrodolox

Many thanks, I have made it