Datatables solumn giving strange behaviour

jdancey

I'm very sorry that I cannot share much about the code due to company policy.

Description of the problem

I have inherited a program with Datatables on the frontend, connected through ajax to a backend Laravel server that uses Editor to fetch the data from the mySql server.

So my datatable works perfectly fine with all the columns ordering well, except for one particularly column - Due Date.

The column like this columns:[{ "data": "enquiries.somethingNew", "label": "Due Date", "width": 100, "type": "string" }]

When I use the little arrows to sort the data it seems to move the data around however it does so in a consistent yet seemingly arbitrary fashion.

When I sort it one way has them in the middle but closer to the top.
When I sort it another way Datatables places them in the middle but closer to the bottom.

What I have tried so far

So I first noticed that the data was made up of a JSON object. I rectified this through a render function

function displayDueDate(data, type) {
  const age = getDaysDiff(data.due_date);
  if (type === "display") {
    if (age === 0) {
      return 'today';
    } else if (age > 0) {
      return `<span>${data.due_date}</span>`;
    }

    return '';
  } else if (type === "sort") {
    return data.due_date;
  } else {
    return data.due_date;
  }
}

This has not made any effect on the behaviour.

I have tried to alter the backend to provide the .due_date value directly so that the render function is no longer necessary.

I have looked at nullable values and have also ensured that there are no nullable values being sent from the backend and were instead being replaced by '2001-10-10" instead of the '' that originally was there. This has had no effect either

I have intercepted the data using ajax dataSrc to console.log() the received information however I don't see anything other than the data that I expect.

I have been stuck on this problem for a few days now and appreciate that this is a fairly poor documentation in terms of the code but would be very greatful for any help or pointers in the right direction.

allan

Can you create an example on https://live.datatables.net , JSFiddle or something else showing the issue please.

Allan

jdancey

Honestly, I don't think I could replicate it, its quite a large codebase that uses Ajax on the frontend to interact with Datatables Editor in a Laravel environment on the backend. I could create a table of sorts purely from the frontend however that would be an entirely different context if you get me. Apologies for the impracticality of the situation.

  table = $("#enquiries")
    .DataTable({
      initComplete: initFunction,
      drawCallback: highlightRowFunction,
      dom: isEditingAllowed ? 'rtipB' : 'rtip',
      ajax: { url: dataURL, headers: { "X-CSRF-TOKEN": token }, method: "POST" },
      responsive: true,
      serverSide: true,
      processing: true,
      deferRender: true,
      lengthChange: false,
      orderCellsTop: true,
      pageLength: 40,
      select: isEditingAllowed,
      buttons,
      columns: [
        { "data": "table1.value1", "label": "someLabel", "width": 30, "render": uuidClickRender },
        { "data": "table1.value2", "label": "Type", "width": 60, "render": typeRender },
        { "data": "table1.value3", "label": "Updated", "width": 60, "render": displayDaysAgo },
        { "data": "table1.value4", "label": "someLabel", "width": 60 },
        { "data": "table2.value5", "label": "someLabel", "width": 100 },
        { "data": "table2.valu6", "label": "someLabel", "width": 100 },
        { "data": "table2.valu7", "label": "someLabel", "width": 80, "render": someRender },
        { "data": "table1.value8", "label": "someLabel", "width": 60 },
        { "data": "table3.valu9", "label": "someLabel", "type": "readonly", "width": 200 },
        { "data": "table1.data", "type": "text", "label": "Due Date", "width": 100, "render": displayDueDate },
      ],
    });

This is the core of the JS datatable that is being created if that is any help.

kthorngren

Since you have server side processing enabled the sorting is expected to be handled by the server script. There isn't anything you can do client side to affect the sorting.

I'm not sure if anyone on this forum has knowledge of Laravel. You might need to use the support mechanism for the Laravel library you are using.

Kevin

jdancey

Hey Kevin,

Thanks you pointed me in the right direction and got me to where the problem was originating from at the backend in Editor.

Thanks for the response.