Refreshing jQuery Datatable without reloading from Database

chandhu

I am working on a ASP.Net Core MVC C# application which uses a jQuery datatable and this datatable call ajax method to load data from database. Now I have a Static List<Student> object. And if I remove or add any data to this List<Student> object, the data table is not refreshing. I dont want to reload again from database but just refresh the current list in the datatable if data is removed or added to the datasource (here it is List<Student> object). Here is my code.

                        $('#btnLeft').click(function () {

                        var includeTable = $('#includeTable').DataTable();
                        var selectedRows = includeTable.rows({ selected: true }).data().toArray();
                        var ids = selectedRows.map(row => row.siteCode);

                         if (ids.length === 0) {
                                  alert("Please select rows to move.");
                                  return;
                          }

                        $.ajax({
                           url: '/DOOR_MANAGEMENT/MoveToExclude', // this method removes some rows from the include table.
                           type: 'POST',
                          contentType: 'application/json',
                          data: JSON.stringify(ids),
                          success: function () {                             
                          includeTable.ajax.reload(); // There is no change in the number of items in the list
                     }
                  });
              });

chandhu

I tried below ways.

                    //includeTable.ajax.reload();                       
                    //includeTable.ajax.reload(null, false);                       
                    //$('#includeTable').DataTable().ajax.reload();

Nothing works. How to do that ??

kthorngren

Sorry but your problem description is not clear. Take a step back and provide more details:

1. data: JSON.stringify(ids), this is sending IDs to the server to be removed from the database. Have you verified this is happening?
2. includeTable.ajax.reload(); is reloading the table via the ajax definition. Use the browser's network inspector tool to verify the XHR response. What do you see in the response?

There is no change in the number of items in the list

What list are you looking at?

If you reload the page is the table data as expected?

Can you post a link to your page or test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

If you can't provide a test case then at least post your Datatables config.

Kevin

malban

This works for me. The filter is optional, you can leave it blank

var table = new DataTable('#yourtable');
var filter = table.search();
$.ajax({
url: '/DOOR_MANAGEMENT/MoveToExclude', // this method removes some rows from the include table.
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(ids)
success: function() {
table.search(filter).draw();
}.....

chandhu

Hi @malban I am getting below error "Uncaught ReferenceError: DataTable is not defined" on the line var includeTable= new DataTable('#includeTable');

chandhu

Hi @Kevin Here is my scenario.
1. I loaded datatable with 100 student items (List<student> objStudentList) from db.
2. I removed 2 student items from the objStudentList in the client side
3. Now the there is only 98 student items in the objStudentList
4. These removed 2 student items are not removing from the datatable. Still it shows the 100 student items in the datatable.
5. My question is, How I can refresh the datatable to reflect these changes ?
6. Remember the 2 student items are ONLY removed from the client side student list. It didnt remove anything from DB.

I tried all the below methods :

                    //$('#includeTable').DataTable().clear().draw();
                    //$('#includeTable').DataTable().ajax.reload(null, false);
                    //includeTable.ajax.reload();

                    //includeTable.ajax.reload(null, false);

                    //includeTable.fnDraw();

                    //$('#includeTable').DataTable().ajax.reload();

But all the above methods reloads from DB again and shows the 100 student items in the datatable.

kthorngren

Use row().remove() to remove a single row or rows().remove() to remove multiple rows from the client side Datatable. However if you have server side processing enabled those APIs won't work as they are only supported with client side processing. In one of your previous threads I believe you had server side processing enables. Do you tens of thousands of rows requiring server side processing? If not disable it to use Datatables client side tools

But all the above methods reloads from DB again and shows the 100 student items in the datatable.

That would be expected if you aren't removing the rows from the DB.

Kevin

malban

I use it when it is server side. I haven't tried it on the client side

"serverSide": true

Example:
var table = $('#yourtable').DataTable(
{
"pageLength": 25,
"searching": true,
"info": true,
"responsive": true,
"deferRender": true,
"autoWidth": false,
"fixedHeader": { "header": false, "footer": false },
"processing": true,
"serverSide": true,
"ajax": {
"url":"./data/myfile.php ?>",
},
{text: 'Delete',
action: function ( e, dt, node, config ) {
delete_row();
}},
]
});

function delete_row(){
    var form = this;
    let count = table.rows({ selected: true }).count();    
    if (count==1) {
        var id = table.rows( { selected: true } ).data()[0][0];
        eliminar(id);
    } else {
        alert("You must select a row");
    }   
}

//----------- In my JS -----------------------
function eliminar(id) {
if (confirm("¿Do you really want to delete the row??")) {
var table = new DataTable('#yourtable');
var filtro = table.search();
$.ajax({
type: "POST",
url: "ajax/deletion_process.php",
data: "id=" + id,
success: function(datos) {
$("#result").html(datos);
setTimeout(function() {
table.search(filtro).draw();
}, 3000);
},
error: function(request, status, error) {
$("#result").html(request.responseText);
}
});
}
}

kthorngren

I use it when it is server side. I haven't tried it on the client side

When server side processing is enabled the server script controls the data that the client Datatable shows. There is nothing at the client that will control the data shown. You server side processing script will need to return the desired rows which exclude the deleted rows.

I'm not sure why your are sending the row ID to the server to delete but not actually deleting them. Maybe you can add a field to the DB that indicates a soft delete and have your server query only return rows that don't have the soft delete field set to true. Or you will need to devise another solution to only return the rows that aren't deleted.

Otherwise if you want to delete them at the client the turn off server side processing and use row().remove() or rows().remove().

Kevin