Column ordering and sorting not working on reload

jpatterson

I have a table (below) which loads with column 6 being sorted.

After a user changes a value in the column and the page reloads, the table is sorted on column 0 and clicking column 6 to sort does nothing. I'm at a loss as to where the error is occurring. TIA.

From the debugger

index

Data source: DOM
Processing mode: Client-side
Draws: 1
Columns: 10
Rows - total: 1407
Rows - after search: 1407
Display start: 0
Display length: 25

My DT code is below.

    $('table.tasks-index').dataTable({
       "processing": true,
       "responsive": true,
       "lengthChange": true,
       "paging": true,
       "order": [6,'desc'],
       "sDom": 'Plfrtip',
       "pageLength": 25,
       "lengthMenu": [ [25, 50, 75, -1], [25, 50, 75, "All"] ],
       "initComplete":function () {
           $('div.dataTables_filter label input').focus();
        },
       "columnDefs": [
           {
               "type": "num",
               "targets": 6
           }
       ],
       "searchPanes": {
           cascadePanes: true,
           columns: [1,3,5],
           orderable: false,
           dtOpts:{
               dom:"tp",
               searching: false,
               }
       },
       "stateSave": true,
       "stateDuration": -1
    }),

kthorngren

After a user changes a value in the column and the page reloads,

How are you changing the data and reloading the page?

Since you are using Ajax I assume this is a DOM sourced table and you are making changes directly to the DOM. If so then Datatables won't know about the changes.
You will need to either use Datatables API's like row().data() or cell().data() to make the changes or row().invalidate() for Datatables to update its data cache.

If this doesn't help then please post more info/code about how you are updating the table.

Kevin

jpatterson

I'm using Laravel so all my data is coming through my controller. The user enters a new value in a modal, value gets saved to the database and the page reloads, displaying the new data in the table.

Does that answer your question?

kthorngren

Does that answer your question?

I think so.

Looking at the table it looks like the Priority column is the one in question. Looks like the column may contain more than just a number. If thats the case then you will need to use Orthogonal data to extract the number out of the data for the sorting and filtering (if you wish).

We will need to see exactly what data is in the column to help. You can post a link to your page or a test case replicating your data so we can offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jpatterson

Correct, the Priority column is pulling in an integer and then also displaying an icon that triggers a modal for the user to edit the integer.

Everything works as it should on the initial page load (and hard refresh). The problem is when the Priority value is saved and the page is reloaded the table is sorted on the id column and every column except Priority can be sorted.

I'll work on getting a test page built.

kthorngren

The problem is when the Priority value is saved and the page is reloaded the table is sorted

What is the difference between "initial page load (and hard refresh)" and "the page is reloaded"?

Priority value is saved and the page is reloaded

Is Datatables reinitialized through this process? Or is it just the table?

Kevin

jpatterson

What is the difference between "initial page load (and hard refresh)" and "the page is reloaded"?

Sorry, what I meant by initial page load is the page is loaded and Datatables is initialized for the first time.

Is Datatables reinitialized through this process? Or is it just the table?

Datatables is reinitialized when the page loads again after the value is stored.

kthorngren

Something different must be happening when the page is reloaded after the change. Sounds like it doesn't work then but you can immediately follow with reopening the page and it does work. What do you think is different between the two?

Please continue working on an example we can look at. Another option is to capture a debugger image after page load and another after a page update. Provide the IDs for both images to the developers so they can take a look.

Kevin

jpatterson

I've been trying to use the debugger to upload my configuration but keep getting blocked by CORS

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://debug.datatables.net/remote/submit.php. (Reason: CORS preflight response did not succeed).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://debug.datatables.net/remote/submit.php. (Reason: CORS request did not succeed).

I've got a package installed to take care of that so I'm not sure what else to do in that respect.

We have a pretty gnarly query that is putting working client data into this Datatable so I'm not sure how to replicate that in an example using the tools on the test case page you mentioned.

allan

   "columnDefs": [
       {
           "type": "num",
           "targets": 6
       }
   ],

Could you remove this please? Doing that suggests to me that the auto-detection isn't picking up the number type that you are expecting, so forcing it to be a number type isn't actually going to work (if it did, it would have auto-detected).

So I guess the question for me is, can you show me the raw data for that cell? It might need the non-numeric data to be stripped.

Allan

jpatterson

This is an example of the data coming out of our tasks query, which populates the table Datatables is being used on.

{
"priority_score": 10,
"id": 2991,
"certifier": "ONE",
"client_name": "Pet Food Company LLC, dba PetFood",
"client_contacts": "Alina Smith",
"assigned_to": "Staff Name",
"assigned_id": "232",
"client_scopes": "handling",
"due_at": null,
"process_name": "New Application",
"task_name": "04--OSP_approved?",
"created_at": "2019-03-28",
"task_id": 34013,
"priority_adjustment": 0
},

The "priority_score" is calculated in the query based on related columns and tables and "priority_adjustment" is the value in a related table that is saved from user input in the Priority column (and subsequently used in the calculation for the "priority_score".

jpatterson

The reason I had defined the column type was we had some 4 digit values that weren't being displayed at the top when sorting descending. For example, 3881 was appearing between 389 and 380.

I just removed it and tested it locally and now it all appears to be working as intended. I'll push it up to our production server to make sure it still works.

I really appreciate the help and all the work that goes into Datatables. It's been a really great resource for us!