Как исправить отображение данных по обновлению dataTable при перезагрузке ajax с помощью внешней кнопки?

Question

Привет! У меня возникла проблема с обновлением dataTable. HTML код:

<div class="page-wrap">
    <button type="button" id="refreshList" class="btn btn-primary"  style="
        float: right;
        top: 28;
        position:  relative;
        right: 240px;
        /* overflow: overlay; */
        z-index: 10;
    ">
        <span class="glyphicon glyphicon-refresh"></span> Refresh
    </button>
    <table  id="show-jobs" class="table table-hover" >
        <thead>

          <tr>
            <th>Job ID</th>
            <th>Client</th>
            <th>Started At</th>
            <th>Ended At</th>
            <th>User</th>
            <th>Status</th>
            <th>Report</th>
          </tr>
        </thead>
        <tbody> 

        </tbody>
    </table>
</div>

В приведенном выше HTML-коде у меня есть таблица, которую я использую в отдельном js-файле для рендеринга, вызывая плагин .DataTable(). Мое требование состоит в том, чтобы у меня была другая упомянутая выше кнопка, при нажатии которой данные будут перезагружены. Таблица работает нормально, но при нажатии кнопки «Обновить», нумерация страниц, кажется, не работает, так как все записи отображаются за один раз. Есть ли способ остановить это? Ниже приведен скрипт JS, который я использую:

var myTable;

$(document).ready(function(){
console.log("prior to calling the load function");
//loadJobs();
loadJobs3();


$("#refreshList").click(function(){
    console.log("hello from refresh");
    myTable.ajax.url("rest/webservice/jobs").load;
    console.log("hello after refresh");
});

  console.log("after calling the load jobs function");
 });

 function loadJobs3() {
  console.log("started")
        var jobList;

        $.ajax({

            url : 'rest/webservice/jobs',
            contentType : "application/json; charset=utf-8",
            dataType : "json",

            success : function (msg) {
                console.log("inside success json");
                $("#show-jobs tbody").empty();
                jobList = msg;

                for (var i = 0; i < msg.length; i++) {
                    var job = msg[i];
                    if(undefined == job.endDate)
                        job.endDate="";
                    if(undefined == job.jobId)
                        job.jobId="";
                    if(undefined == job.clientName)
                        job.clientName="";
                    if(undefined == job.templateName)
                        job.templateName="";
                    if(undefined == job.startDate)
                        job.startDate="";
                    if(undefined == job.userName)
                        job.userName="";
                    if(undefined == job.status)
                        job.status="";
                    if(undefined == job.outputPathLog)
                        job.outputPathLog="";
                    if(undefined == job.logName)
                        job.logName="";
                    if(undefined == job.outputPathReport)
                        job.outputPathReport="";
                    if(undefined == job.reportName)
                        job.reportName="";
                    createFormElement(job.jobId, job.clientName,
                           job.templateName, job.startDate, job.endDate,
                           job.userName, job.status, job.outputPathLog,
                           job.logName,job.outputPathReport,job.reportName);
                    console.log("complete success json");

                }
             myTable=$('#show-jobs').DataTable();

            console.log(myTable);
            }

        });

    }

  function createFormElement(jobId, clientName, templateName, startDate, endDate,
    userName, status, outputPathLog, logName,outputPathReport,reportName) {

    $("#show-jobs").find('tbody').append(
        "<tr><td><a href = 'rest/webservice/jobLogFile/" +jobId +"'>" 
           + jobId 
           + "<i class='fa fa-file-text-o' aria-hidden='true'></i></a></td>" 
           + "<td>" 
           + clientName + "</td>"
           + "<td>" + startDate
           + "</td>" 
           + "<td>" 
           + endDate 
           + "</td>" + "<td>" + userName
           + "</td>" + "<td>" + status + "</td>"  
           + "<td><a href = 'rest/webservice/jobReportFile/" 
           + jobId +"'>"+reportName+"</a>" 
           + "</td></tr>");
  }