Data table data not updating properly

jsmith3

Hi all,

I have a data table setup with an ajax json source setup as ajax: "listcustomers.aspx"
If you visit the listcustomers.aspx page it will contain the data in json
I also have a column of checkboxes so I can exclude a user per row.

if I click a rows checkbox it could mean that user is excluded from the being listed if the checkbox is true, I can then sort based on excluded users and non excluded users.

The issue I'm facing is if I click the checkbox, it updates server side SQL database but the datatable boolean value seems to lose its data

I'm using the following code:
var table = $('#customers').DataTable();
var row = $(this).closest('tr');
var data = table.row( row ).data();
data.excluded = $(this).prop('checked') ? 1 : 0;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "update.aspx", true);
xmlhttp.setRequestHeader('Content-Type','application/json; charset=UTF-8');
xmlhttp.send(JSON.stringify(data));
table.rows(row).invalidate().draw();

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

jsmith3

So I've put most of the code in here, but it wont link to the editor for some reason, I've got the paid version js referenced locally in js/dataTables.editor.min.js

http://live.datatables.net/lijunohi/2/edit

jsmith3

Basically what I'm trying to get to work is a simple display of data, one column is a checkbox I can select to exclude the user,
I have ratio buttons above the form, which when clicked run this code:
table.column(6).search( "true" ).draw();
Which will show excluded users, or if the other ratio button is checked, show to the non excluded users

When I update the checkbox to exclude the user, it sends XMLHttpRequest to a page which updates the database

The issue appears to be when it updates the checkbox data, the search does not include the row changed

To avoid a bunch of code, I've excluded the ratio button javascript but if you run that above search code from the console you'll see what I mean..
The only other difference is that the form data is source via json

jsmith3

I've tried both methods of posting (XMLHttpRequest & .submit())
but I can't seem to get the search to include the row with the modified data

allan

Try putting a setTimeout() around the action inside the click event - e.g.: http://live.datatables.net/lijunohi/3/edit .

Allan

jsmith3

Didn't appear to do anything unfortunately
I selected true in the checkbox and ran the search set to true, but it did not show up..

allan

http://live.datatables.net/lijunohi/4/edit

I've made a number of changes - the key one is to set the value of exclude based on the checkbox. The rows().invalidate() call has been removed as well as that was causing exclude to be overwritten with an html checkbox.

Hopefully this will help a bit.

Allan

jsmith3

OK I've tried it but still an issue, I've added the search code in as well so you can see what I mean

if you update the state of the checkbox to true/false then search that column for 0 or 1 it will not include the recently changed row

kthorngren

data.exclude = $(this).is(":checked");

This will result in a boolean. Do you want the values to be 1 or 0 or boolean?

    data.exclude = $(this).is(":checked") ? 1 : 0;
    table.row(row).data(data);

Here is the updated example:
http://live.datatables.net/gupeyiho/1/edit

The example uses row().data() to place the updated data back into the Datatables cache.

I made a coupe other changes. Move the header cloning statement above the Datatables init code so it doesn't clone the sorting arrows. Also added orderCellsTop to move the sorting listeners to the top header row.

Also when you update another's example the link will change. Your updated example is at http://live.datatables.net/lijunohi/5/edit . Notice yours has 5 and Allan's last example has 4. Not an obvious change

Kevin

jsmith3

well first of all, thank you all so very much for your help, I do appreciate it alot.

It is now working perfectly, I also found an issue where the ajax was pushing the exclude value as true/false as a string not a 1 or 0 value and that was causing issues with search

I don't really understand the sorting arrows issue or the sorting listeners thing you mentioned but i've implemented the code and its perfect

so really thank you again for the wonderful help

kthorngren

I don't really understand the sorting arrows issue or the sorting listeners

Take a look at your example. You will see the sorting in both header rows. Also notice that when you click into the input the table sorts. The use of orderCellsTop moves the sorting functions to the top row away from the inputs.

I also found an issue where the ajax was pushing the exclude value as true/false as a string not a 1 or 0 value

Allan discusses this issue in this thread.

Glad its working for you.

Kevin