Ajax with serverSide processing doesn't load anything except the first page, with no errors

Fredtholomew

Description of problem: So, this is a weird one. I have been on this for over 2 hours now and no google search can help.

My table loads without problems when I reload the page. But if I click any buttons, be it next page, page 2, change number of results per page, order by column, or anything that involves reloading the table, it gets stuck on the loading animation. I also tried table.ajax.reload() with the same results.

I get no errors at all. I have triple checked the response and it's the same as the first load. Example:

First load:

{
    "draw": 1,
    "recordsTotal": 12,
    "recordsFiltered": 12,
    "data": [
        [
            "Toast",
            1.2,
            "Kaufland",
            2,
            2.4,
            "2024-01-03",
            "Breakfast, Bread, Toast",
            1
        ],
        [
            "Milk",
            0.6,
            "Kaufland",
            18,
            10.8,
            "2024-01-03",
            "Dairy, Breakfast, Staples",
            2
        ],
        [
            "a",
            22,
            "Multi",
            2,
            44,
            "1970-01-01",
            "aa",
            3
        ],
        [
            "b",
            33,
            "Multi",
            3,
            99,
            "1970-01-01",
            "bb",
            4
        ],
        [
            "a",
            22,
            "Multi",
            2,
            44,
            "2022-10-21",
            "aa",
            5
        ],
        [
            "b",
            33,
            "Multi",
            3,
            99,
            "2022-10-21",
            "bb",
            6
        ],
        [
            "a",
            6,
            "Multi",
            66,
            396,
            "2022-10-20",
            "aa",
            7
        ],
        [
            "b",
            55,
            "Multi",
            5,
            275,
            "2022-10-20",
            "bb",
            8
        ],
        [
            "d",
            22,
            "Multi",
            2,
            44,
            "2022-10-20",
            "dd",
            9
        ],
        [
            "b",
            44,
            "Multi",
            4,
            176,
            "2022-10-20",
            "bb",
            10
        ]
    ]
}

Next page:

{
    "draw": 1,
    "recordsTotal": 12,
    "recordsFiltered": 12,
    "data": [
        [
            "a",
            22,
            "Multi",
            2,
            44,
            "2022-10-22",
            "bb",
            11
        ],
        [
            "c",
            333,
            "Multi",
            3,
            999,
            "2022-10-22",
            "cc",
            12
        ]
    ]
}

I have run the checked and the Json is valid. There are barely 17 lines in my code:

  var table = $('#table').DataTable({
    responsive: true,
    ajax: {
      url: '/budgeting/process/get-items.php',
      type: 'POST',
      complete: function (response) {
        console.log(response);
      }
    },
    processing: true,
    serverSide: true,
    "columnDefs": [{
      targets: 'no-sort',
      orderable: false
    }],
    "order": [[ 5, 'desc' ]]
  });

I'd appreciate any and all help with this issue. I've worked with DataTables for a while now and I've never had this problem before, and at this point I'm starting to think that I'm missing something obvious.

Thanks in advance!!!

Fredtholomew

Typo: I have ~~run the~~ checked and the Json is valid.

kthorngren

The problem is the draw parameter always has the value 1 in your responses. It needs to match the draw parameter value sent in the request. The second response likely should have 2 for the draw parameter. See the Server Side Processing protocol docs for details.

Kevin

Fredtholomew

@kthorngren OMG thank you so much!!! Somehow I completely overlook that part. You're awesome!