Datatable refre sh при нажатии кнопки

Question

Я видел несколько сообщений по этому типу вопроса, но после нескольких попыток в течение нескольких дней я не могу заставить его работать, вероятно, из-за моей неопытности с javascript / UI.

В любом случае, у меня есть фоновая функция, которая периодически обновляет содержимое базы данных, но у пользователя также есть возможность добавлять и удалять строки. Поэтому я хотел добавить кнопку refre sh к таблице, а не к странице, но refre sh не работает. Я попытался добавить функцию refreshData в document.ready, но либо браузер пожаловался на то, где я его разместил, либо переменная uitable не была определена. Я не буду публиковать все, что я пробовал, но я опубликую то, что у меня сейчас, которое правильно отображает таблицу, но refre sh завершается неудачно с:

Uncaught TypeError: Cannot read property 'reload' of undefined
    at refreshData (fetch:1043)
    at HTMLButtonElement.onclick (fetch:1)
Code:

$(document).ready(function () {
        $.ajax({
            type : "POST",
            url : href + "/refreshInstanceList",
            data : {"action":"get"},
            async: false,
            cache: false,
            success : function(data) {
                instdata = data.success;
                var uitable = $('#userInventory').DataTable({
                    data : instdata,
                    columns : [ 
                        {
                            "data" : "hostname",
                            title : 'Hostname',
                            "render" : function(data, type, row, meta) {    
                                return data;
                            }
                        }
                    ],
                    "initComplete": function() {
                        $("#userInventory_filter").append('&nbsp;&nbsp;<button type="button" onclick="refreshData()"><i class="fa fa-refresh"></i></button>');
                    },
                });
            },

            error : function(xhr, status, error) {
                console.log(error);
                infoMessage = "\tAn error occurred whilst processing your request \n\tPlease contact Administrator to resolve this issue.";
                showInformationMessage(infoMessage);                    
            },
            complete : function() {}


        });
    });

    function refreshData() {
        var table = $('#userInventory').dataTable(); 
        table.ajax.reload();
    }

Спасибо за любую помощь Вы можете предоставить.

Answer 1

Пожалуйста, посмотрите на эту демонстрацию codepen

var table = $('#userInventory').dataTable();
table.ajax.reload();

Имеет смысл только тогда, когда вы предоставляете свойство 'ajax' для данных при его создании, чтобы оно могло перезагрузиться.

посмотрите на это документация ajax документация

$(document).ready(function () {

  var uitable = $('#userInventory').DataTable({
    //data : instdata,
    ajax: {
      type : "POST",
      url : href + "/refreshInstanceList",
      data : {"action":"get"},
      async: false,
      cache: false,
    },
    columns : [
      {
        "data" : "hostname",
        title : 'Hostname',
        "render" : function(data, type, row, meta) {
          return data;
        }
      }
    ],
    "initComplete": function() {
      $("#userInventory_filter").append('&nbsp;&nbsp;<button type="button" onclick="refreshData()"><i class="fa fa-refresh"></i></button>');
    },
  });

  $('#some_button').click(function refreshData() {
    var table = $('#userInventory').dataTable();
    table.ajax.reload();

    //Or
    //uitable.ajax.reload();
  });
});

Надеюсь, это поможет