html 从服务器到Datatable插件1.10的半异步数据

Posted 2021-05-11

<!-- 
this script is a example, not work. But it's good to boot into datatable
-->
<script>
  var oTable;
  $(function(){
    $.ajax({
          url: 'url_to_server_get_json',
          type: 'get',
          dataType: 'json',
          beforeSend: function () {
              pleasewait(); //property function
          },
          success: function (data) {
              var ulrprofile = "url_to_update_profile_user";
              $.each(data, function (i, v) {
                  var disabled = "", perfil = "";
                  if (v.id === "session_id_user") {
                      disabled = "disabled";
                      perfil = "?isprofile=true";
                  }
                  var btn = '<div class="text-right"><button type="button" class="btn btn-danger btn-sm userdown" data-id="' + v.id + '" data-name="' + v.nombre + ' ' + v.apellido + '" ' + disabled + '>\
                              <i class="fa fa-times-circle"></i> <span class="hidden-xs">Eliminar</span>\
                          </button></div>';
                  var row = $("<tr />");
                  var edituser = "<a class='link-text' href = '" + ulrprofile + "/" + v.id + perfil + "'>" + v.correo + "</a>";
                  $("<td />").text(i + 1).appendTo(row);
                  $("<td />").text(v.nombre + ' ' + v.apellido).appendTo(row);
                  $("<td />").html(edituser).appendTo(row);
                  $("<td />").text(v.rol).appendTo(row);
                  $("<td />").html(btn).appendTo(row);
                  row.appendTo("#tabla");
              });
              oTable = $("#tabla").DataTable({
                  'dom': "<'row'<'col-sm-3'l><'col-sm-4'f><'col-sm-5 text-right'B>>" +
                          "<'row'<'col-sm-12'tr>>" +
                          "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                  'buttons': [
                      {
                          text: '<i class="fa fa-file-excel-o"></i> Crear administrador',
                          className: 'btn btn-success btn-sm',
                          action: function (e, dt, node, config) {
                              modalCreate.modal();
                          }
                      },
                  ],
              });
          },
          error: function (error) {
              toast("A ocurrido un error al tratar de cargar la tabla", ERROR); //property function
          },
          complete: function () {
              unpleasewait(); //property function
          }
      });
  });
</script>