jquery DataTables Reload without page refresh

Question

I am using jQuery DataTables and here is what my table currently looks like:

Now, as of right now when I click Deactivate I am using ajax to call my WebApi method to set that record to active = false.. so the checkbox in the table should be unchecked.

public IHttpActionResult Deletecode_AutoMake(int id)
{
    code_AutoMake code_AutoMake = db.code_AutoMake.Find(id);
    if (code_AutoMake == null)
    {
        return NotFound();
    }

    code_AutoMake.Active = false;
    db.Entry(code_AutoMake).State = EntityState.Modified;
    db.SaveChanges();

    return Ok(code_AutoMake);
}

This all works as expected.. but the table doesn't reload, unless if I refresh the page to see the check box actually unchecked.

Here is how my DataTable is set up.

$("#Auto-Make-Table").on("click",
    ".js-automake-delete",
    function () {

        var link = $(this);
        var autoMakeName = $(this).data("automake-name");
        var autoMakeId = $(this).data("automake-id");

        bootbox.confirm("Are you sure you want to delete this auto make?",
            function (result) {
                if (result) {
                    $.ajax({
                        url: infoGetUrl + autoMakeId,
                        method: "DELETE",
                        success: function () {
                            autoMakeTable.reload();
                            toastr.success(autoMakeName + " successfully deleted");
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var status = capitalizeFirstLetter(textStatus);
                            var error = $.parseJSON(jqXHR.responseText);
                            console.log(error);
                            toastr.error(status + " - " + error.exceptionMessage);
                        }
                    });
                }
            });
    });

My question/goal is.. how do I get the table to refresh/reload itself without an actual page refresh?

Any help is appreciated.

UPDATE

Tried using autoMakeTable.ajax.reload();

Received this error:

Followed by this one:

Basanta Matia · Accepted Answer · 2017-07-20 05:22:56Z

2

Suppose your datatable is assigned like this,

var myDataTable = $('#myTableId').DataTable({
  //Rest code
 })

Then inside your success method for deactivate, you just need to reload your datatable like this,

 success: function()
 {
  myDataTable.ajax.reload();
  //rest code
 }

You forgot to add ajax. Please check this official link to learn more.

UPDATED:

If your partial view is strongly typed, then call your action method in success method and render it, like, In your above success method,

success: function()
 { 
   $.ajax({ 
       url: "@Url.Action("Index", "code_AutoMake")", //As you have mentioned in the chat
       method: "GET",
       success: function (data) 
        { 
         //Here just render that partial view like 
         $("#myDiv").html('').html(data); //This will empty first then render the new data
        }
      })

Note: Here myDiv is the id of div, where your table located.

Hope it helps :)

edited Jul 20, 2017 at 5:22

answered Jul 19, 2017 at 13:56

Basanta Matia

1,5904 gold badges15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Basanta Matia Over a year ago

I believe, you are binding your datatable by using Ajax. And you need to write your datatable name instead myDataTable. I think your datatable variable name is autoMakeTable. So u need to write autoMakeTable.ajax.reload(); inside success method.

Grizzly Over a year ago

Sorry, I did do that.. I just copy and pasted your code.. but I did use my personal table name autoMakeTable.. and received those errors

Basanta Matia Over a year ago

Is your datatable get action method returning data in json format or you simply returning a view ?

Grizzly Over a year ago

I'm confused.. why does my Get method matter, if the page doesn't refresh?

Basanta Matia Over a year ago

Yes! If you dont want to refresh a page and want to load data then you need to return data in json or xml format. The error itself saying that your json data is invalid.

|

Feras Al Sous · Accepted Answer · 2017-07-19 13:50:00Z

0

Create in your php file, or which file it may be, a table with the same html structure as your current one, but than with new data that you have received by doing the ajax call.

$.post( "newTable.php", function( data ) {
     $( ".currentTable" ).html( data );
});

answered Jul 19, 2017 at 13:50

Feras Al Sous

1,0811 gold badge12 silver badges26 bronze badges

1 Comment

Feras Al Sous Over a year ago

You can view the Example here: datatables.net/forums/discussion/38969/…

Collectives™ on Stack Overflow

jquery DataTables Reload without page refresh

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related