Using DataTable ServerSide Update Data Table not refreshing upon update

navsnavya

https://live.datatables.net/fokamiti/1/edit**:
**Debugger code (debug.datatables.net):
Error messages shown:
**Description of problem
1. I am trying to load the employee list-pass
2. I should be able to click on a row and update the data to the database--Pass
3. The new data now should populate in the Data Table --Fail
4. Button Save updates the data to theDatabase sends the json back to ajax call
**:

navsnavya

i have tried using $('#example').DataTable().ajax.reload();
does not relaod..

Please refer to this link for my test case https://live.datatables.net/fokamiti/1/edit

navsnavya

the problem is the new data gets posted to the DB but table not refreshing with new data

kthorngren

In the ajax option you are using has a success function. The ajax docs state this:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

The success function used when updating the server is this:

                    success: function () {
                        ClearTxt();
                        $('#tblEmployee').DataTable().clear().destroy();                                   
                        refreshTable();
                        alert('dest')

                    }

You are destroying the Datatable then reinitializing it. The init code has ajax which presumably should be reloading the data from the server. But in ajax option you are calling LoadData(onSuccess);. Again this success function is not supported.

In the LoadData() function it looks like you are overwriting the data loaded via ajax by building an HTML table with the data. Datatables doesn't know about these changes. See this FAQ.

First remove the success function in ajax. I'm not sure what data structure you are returning but the Ajax docs explain what is supported by Datatables. If you need help with your data please post a snippet of what is returned using the browser's network inspector to get the JSON response.

Looks like you might need to build the columns based on the ajax response. See this FAQ. Also see this example:
https://live.datatables.net/huyexejo/1937/edit

The simplest way to edit, save to the server then update the Datatable is to simply call ajax.reload(), something like this:

            $('#btnSave').click(function (e) {
               e.preventDefault(); // prevent default submit

                var id = $("#lblId").val();
                var fname = $("#txtFirst_Name").val();
                var lname = $("#txtLast_Name").val();
                var jsonData = {
                    Auth_ID: id,
                    First_Name: fname,
                    Last_Name: lname
                };
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("SaveEmployee", "Home")',
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(jsonData),
                    dataType: "json",
                    processData: true,
                    success: function () {
                        ClearTxt();
                        $('#tblEmployee').DataTable().ajax.reload();                                   
                    }
                });
            });

There are other more efficient ways to update the client side Datatable.

Kevin

navsnavya

success: function () {
ClearTxt();
$('#tblEmployee').DataTable().ajax.reload();
}

So now the data reloads along with the old data

meaning now i see 6 rows in total.
3 Old rows and 3 new records

kthorngren

Use the browser's network inspector to see the JSON response. Do you see 3 rows or 6?

What does the info element, ie Showing 1 to 10 of 57 entries, show?

Did you remove the success function in the Datatables ajax option?

Kevin

navsnavya

yes removed success, still see 6 records
where as database has 3 records and the latest updated records

ALso its just duplicate of old data, not fetching the new data

kthorngren

still see 6 records

Are you looking at the browser's network inspector to see the JSON response? How many rows are in the response?

Are 3 of the records duplicate of the other 3?

where as database has 3 records and the latest updated records

What do you mean by "and the latest updated records"?

Please more more specific details of what you are looking at or provide a running test case that shows the issues you are having.

Kevin

navsnavya

First on page load

Now first record is updated from boom to booming

After Data uploaded on serverside , datatable reloaded with duplicate records, yet not with new data that was just posted

Data when i refresh the URL

kthorngren

See where it says Showing 0 to 0 of 0 entries? That means Datatables sees zero rows for the table. Are you still using the LoadData() function to populate the htML table? See the FAQ I linked to.

Are you expecting to use the Datatables ajax option to load the table data? Use the browser's network inspector to view the JSON response from this request. Please post the response so we can see the data structure. This technote shows how the view the JSON response.

Kevin

kthorngren

$('#tblEmployee').DataTable().clear().destroy();

Since Datatables doesn't see any rows the clear() doesn't clear the HTML table you have. So this code

                $.each(response, function ()
                {
                    body = body + "<tr style=height:30px;>";
                    $.each(this, function (k, v) {
                        body = body + "<td >" + v + "</td>";
                    })
                    body = body + "</tr>";
                })
                body = body + "</tbody>";
                $("#tblEmployee").append(body);

Is probably just appending to the current HTML table. You will need to use something like $('#tblEmployee').empty(); to clear the HTML table.

Also note that since Datatables doesn't see any of the HTMl table rows you added things like search aren't going to work because those rows aren't in the Datatables data cache.

Kevin

navsnavya

JsonResponse Returning the 1 updated record

updated code under this link
https://live.datatables.net/fokamiti/3/edit

kthorngren

Is the jsno text you added to the alert message?

That response looks like just one row. Datatables expects an array of rows in the ajax response. See this section of the ajax docs I link to earlier.

Take a look at this Ajax loaded objects example. Click the Ajax tab to see an example of the expected data structure. If you don't want to place the rows in the data object then use ajax.dataSrc to point to the row data as described above.

Kevin

kthorngren

updated code under this link

Looks like you still have the success function in the ajax option:

                       success: function (OnSuccess) {
                           var onSuccess = JSON.stringify(OnSuccess);
                           LoadData(onSuccess);
                          
                       },

This is not supported by Datatables.

Kevin

kthorngren

My suggestion is to first get the Datatable to load your data. I suspect you want to use ajax to load the data since you have that option configured. If you want to populate an HTML table then have Datatables use that data then populate the HTML table first from a jQuery ajax() call then in that success function initialize Datatables.

Kevin

navsnavya

Hi
I dont think you got what the issue is.

My dataTable load is fine for the initialization.

on CLick of the update button the Server side call send back response to Ajax.
Post which the Datatable is not populating the updated records.

It still displays old records and then duplicate records

refer this image below, I only have 11 records in database but 22 records are displayed post update

I only expect last 11 records to be displayed , excluding the first 11 records.

updated code here
https://live.datatables.net/fokamiti/4/edit

allan

I think Kevin has actually understood the problem spot on (you've described it well - thank you!).

The issue is that you are changing the DOM, not DataTables. It is basically the same as this FAQ. You can't change the DOM directly (which you are doing in LoadData) since DataTables won't see that change (it doesn't watch the DOM for external changes). You must use the API if you want different rows / data to be displayed.

As Kevin noted above, you are replacing the success function in ajax, which the docs explicitly state you can't do.

Perhaps you can show me an example of the JSON data that is being loaded from the server-side please? Then I should be able to tell you how to configure DataTables to display it without you needing to create rows and cells.

Allan

kthorngren

I dont think you got what the issue is.

Yes I believe I do understand the issues. Your Datatables initialization is not working as you expect. The Datatable is displaying Showing 0 to 0 of 0 entries which means Datatables doesn't have any row data to operate on. This is because you are directly manipulating the HTML table. Please read the FAQ I linked to multiple times.

Since you are directly manipulating the HTML table and Datatables doesn't know about the added rows. Using clear() to clear the table doesn't remove these rows. You will need to use jQuery or Javascript methods to clear the HTML table. Since the rows aren't cleared as you are expecting I believe your code is simply adding more rows when you perform an update. See this comment above for more details.

You should let Datatables perform the table updates instead of directly manipulating the HTML table.

I am trying to help you but you need to read the information I've provided and provide the information I've asked for. The place to start is to get your data loaded into Datatables properly to let Datatables manage the table display. To do this please provide the JSON response from the ajax request from Datatables so we can see the structure of the rows being returned. Don't use alert messages or console output but use the steps at the technote I linked to in this above comment.

Kevin