Arquivo JS para o datatable e os modais

users.js

(function ($) {
  "use strict";
  /* 
  =======================================================
  ************* DataTable Usuário ***********************
  =======================================================
  */
  var $dtUsers = $("#dt-users").DataTable({
    dom: '<"row"<"col-lg-6"l><"col-lg-6 text-right"f>><"table-responsive"t>pr',
    processing: true,
    pagingType: "numbers",
    columns: [
      { data: "id" },
      { data: "name", className: "dt-body-center", orderable: false },
      { data: "access_level", className: "dt-body-center", orderable: false },
      { data: "action", className: "dt-body-center", orderable: false },
    ],
    serverSide: true,
    searching: true,
    ajax: {
      url: $("#dt-users").data("url"),
      data: {
        user: $(".content-body").data("user"),
      },
    },
    fnPreDrawCallback: function () {
      $(".table-responsive").addClass("processing");
    },
    fnDrawCallback: function () {
      $(".table-responsive").removeClass("processing");
    },
    createdRow: function (row, data) {
      if (data.status == "inativo") {
        $(row).addClass("inactive");
      }
    },
  });

  /* 
  =======================================================
  ************* Modal Criar Usuário *********************
  =======================================================
  */
  $(document).on("click", ".add_user", function (e) {
    e.preventDefault();

    $.magnificPopup.open({
      items: { src: "/bk/modal_user" },
      type: "ajax",
      modal: true,
    });
  });

  /* 
  =======================================================
  ************* Modal Editar Usuário *********************
  =======================================================
  */
  $(document).on("click", ".action-edit", function (e) {
    e.preventDefault();

    $.magnificPopup.open({
      items: { src: "/bk/modal_edit_user" },
      type: "ajax",
      modal: true,
      ajax: {
        settings: {
          type: "POST",
          data: {
            id: $(this).data("id"),
          },
        },
      },
    });
  });

  /* 
  =======================================================
  ************* Modal Excluir Usuário *********************
  =======================================================
  */
  $(document).on("click", ".action-delete", function (e) {
    e.preventDefault();

    $.magnificPopup.open({
      items: { src: "/bk/modal_remove_user" },
      type: "ajax",
      modal: true,
      ajax: {
        settings: {
          type: "POST",
          data: {
            id: $(this).data("id"),
          },
        },
      },
    });
  });
}.apply(this, [jQuery]));

function close_modal() {
  $.magnificPopup.close();
}