Reloading a Data Table

Here is some of my code:

Data Table:

function pageReady() {

var table = $('<table class="table table-hover table-striped row-border order-column">');

    table.prependTo('#MyTable');

    var myTable =  table.DataTable({
        data: myData,

        columns: [
            {
                targets: [0],
                title: "Ticket #", data: "TicketID", render: function (data) {
                    if (isAdmin) {
                        return '<u class="myLink" data-toggle="modal" data-target="#UpdateTicket">' + data + '</u>';
                    }
                    else {
                        return '<u class="myLink" data-toggle="modal" data-target="#TicketDetail">' + data + '</u>';
                    }
                }
            },
            { title: "Title", data: "Title", "width": "20%" },
            { title: "Description", data: "Description", "width": "25%" },
            { title: "Submitted By", data: "SubmittedUserName", class: "centered-text" },
            { title: "Submitted On", data: "SubmitDate", defaultContent: '', render: RenderShortDate, class: "centered-text" },
            { title: "Category", data: "CategoryName", class: "centered-text" },
            { title: "Status", data: "StatusName", class: "centered-text" }

        ],
        deferRender: true

    });

I populate the modal like this:

$('table').on('click', '.myLink', function () {

        var dt = $(this).closest('table').DataTable();
        var row = dt.row($(this).closest('tr')[0]);
        var ticket = row.data();

        if (false) {

            var data = $(this).text();

        }


        //populate the ticket detail modal
        $("#UpdateTicket h3").text("Ticket ID: " + ticket.TicketID);
        $('#Name').val(ticket.SubmittedUserName);
        .....and so forth
  });

This is the click event for the Update button on the modal:
$('#update').click(function () {

        updateform();
    });

This is the Update Form Function:
function updateform() {

    Validation code here....


        var newResolution = {
            Fields here....
            TicketStatusID: $("#Status1").val()
        };

        $.ajax({
            type: "POST",
            url: "ViewTickets.aspx/myMethod",  //this works
            data: JSON.stringify(myMethod),
           
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        })
        .done(function (msg) {
            $('#UpdateTicket').modal('hide');
           
           $('#UpdateTicketConfirmation').modal('show');
            reloadtickettable();  //this does not work
         
        })
        .error(function (jqXHR, status, error) {
            alert('OOPS! Something went wrong: ' + status + ' : ' + error);
        })
    }
};

This is the function that does not work:
function reloadtickettable() {
   
 //   $('#MyTable').load(document.URL + ' #MyTable');
    myTable.fnDraw();
 
};






}

I am not really on top of your refresh mechanism - can you elaborate on what you are doing there to refresh the data table. Are you asking the server to send you a fresh copy?

Thanks for the response!  I need to refresh the data.  How do I ask the server to send me a fresh copy of the data?  I use a method in the .cs file to obtain a serialized list from the database.

When the page loads, my data table works.  What doesn't work is when I try to refresh the page. The datatable is empty.

When I call function reloadtickettable(), the datatable is empty.

Thank you for your help!

Yes!  Thank you for the help! I'm going to try this today.

Thanks for all the help!