Запуск функции после генерации таблицы jquery

255

17 апреля 2017, 05:27

У меня есть таблица которая генерируется по нажатию кнопки с помощью следующего ajax-запроса:

function getDrivers() {
  $.ajax({
    type: "GET",
    url: "/admin/getDrivers",
    datatype: "json",
    success: function(response) {
      $("#head").children().remove();
      var trHTML = '';
      trHTML += '<h2>' + "Водители" + '</h2>' +
        '<div class="table-responsive">' +
        '<table id="dataTable" class="table table-hover">' +
        '<thead><tr><th>' +
        'Ник' + '</th><th>' +
        "Имя" + '</th><th>' +
        "Фамилия" + '</th><th>' +
        "Мобильный телефон" + '</th><th>' +
        "Электронная почта" + '</th><th>' +
        "Город" + '</th><th>' +
        '</th></tr></thead><tbody>'
      ;
      $.each(response, function(i, item) {
        trHTML += '<tr><td>' +
          item.nickname + '</td><td>' +
          item.firstName + '</td><td>' +
          item.lastName + '</td><td>' +
          item.mobileNumber + '</td><td>' +
          item.email + '</td><td>' +
          item.city.cityName + '</td><td>' +
          '<input type="checkbox" value=""/>' +
          '</td></tr>';
      });
      trHTML += '</tbody>' + '</table>' + '</div>';
      $("#head").append(trHTML);
    },
    error: function() {
      alert("error")
    }
  });
}

Все это добро крепится к следующему блоку div:

<div id="head" class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3">

Далее мне необходимо сделать контекстное меню для данной таблицы. Делаю данное меню с помощью следующего скрипта:

$("#dataTable").bootstrapTable({
  rowStyle: "rowStyle",
  contextMenu: '#context-menu',
  contextMenuTrigger: 'right',
  onClickRow: function(row, $el) {
    $("#dataTable").find(".success").removeClass('success');
    $el.addClass('success');
  },
  onContextMenuItem: function(row, $el) {
    if ($el.data("item") == "edit") {
      alert("Edit: " + row.itemid + ' ' + row.name + ' ' + row.price);
    } else if ($el.data("item") == "delete") {
      alert("Delete: " + row.itemid + ' ' + row.name + ' ' + row.price);
    } else if ($el.data("item") == "action1") {
      alert("Action1: " + row.itemid + ' ' + row.name + ' ' + row.price);
    } else if ($el.data("item") == "action2") {
      alert("Action2: " + row.itemid + ' ' + row.name + ' ' + row.price);
    }
  }
});

В итоге данное меню не работает для таблицы, которая генерируется при нажатии на кнопку, но если таблица статична, то работает. Подскажите как можно решить данную проблему. Я пробовал через $("#dataTable").ready(скрипт контекстного меню) не получилось.

Answer 1

Воспользуйтесь коллбеком .done() и поместите вызов .bootstrapTable() туда. Пока что у вас происходит асинхронный запрос и вызов .bootstrapTable() срабатывает до его окончания.

$.ajax({
  // свойства вашего запроса
  success: function() {
  ...
  // ваш код по генерации таблицы
  ...
  },
  error: function () {
    // ошибки лучше выводить в консоль
    console.log("ajax error");
  }
}).done(function() {
  $("#dataTable").bootstrapTable({
    ...
  });
});