[SOLVED] Preloader in Data Table

1

Hello, I have a page that is divided into 2 sections, the top part in a form and the bottom part in a data table … my question is … is there any way to put a preloader only in the data table? ? … that is to say that the preloader only appears in that DIV? … I send code of example.

<template>
<div class="view view-main view-init safe-areas">
<div class="page">
    <div class="navbar">
        <div style="text-align: center; margin-top: 4px;"><img src="img/key.png" width="60px" /></div>
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
        </div>
    </div>
    <div class="page-content">
        <div style="text-align: center; justify-content:center; margin-right:auto; margin-left:auto; width: 99%;">
            <h2 style="color:#00008B;">Imagen</h2>
            <span class="span" style="font-weight: bold;">Tipo:</span>
            <select id="tipoimagen" name="tipoimagen">
                <option value="0">Seleccionar...</option>
                <option value="1">Wallchart</option>
                <option value="2">Etiqueta</option>
                <option value="3">Imagen del Cliente</option>
            </select>
            <span class="span" style="font-weight: bold;">Cantidad dañada:</span>
            <input type='number' id="cantidad" name="cantidad" placeholder='Cantidad :'  />
            
            <span class="span" style="font-weight: bold;">Ubicación del detalle:</span>
            <input type='text' id="ubicacion" name="ubicacion" placeholder='Ubicación:'  />
            
            <span class="span" style="font-weight: bold;">Comentario:</span>
            <input type='text' id="comentario"  name="comentario" placeholder="Comentario:" />
            
            <a style="background-color: white; border: none; outline:none;" onclick="capturePhoto();"><img src="img/cam.png" width="50px" /></a>
            <br />
            <img style="display:none; margin: 0 auto;margin: 0 auto; width:90px; height:120px;" id="smallImage" src="" />
            <input type="hidden" id="imagenC" name="imagenC"/>
            
            <!-- TABLA DE PRODUCTOS AGREGADOS --><br />
            <div class="block-title">Registros Guardados</div>
            <div class="card data-table">
                <table id="tablaimagen">
                    <thead>
                        <tr>
                            <th class="numeric-cell">Acciones</th>
                            <th class="numeric-cell">Tipo de imagen</th>
                            <th class="numeric-cell">Cantidad dañada</th>
                            <th class="numeric-cell">Ubicacion del detalle</th>
                            <th class="numeric-cell">Comentario</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <!-- FIN DE TABLA DE PRODUCTOS AGREGADOS -->
            <br /> 
            <div style="text-align: right;">
                <br />
                <table style="width:100%; margin: 0 auto; text-align: center;  border-collapse: collapse;">
                <tr>
                <td style="text-align: left;"><a href="#" class="link back" style="border: none; outline:none;"><img src="img/save2.png" width="40px" /></a></td>
                <td style="text-align: right;"><a href="#" onclick="gimagen()" style="border: none; outline:none;"><img src="img/plus.png" width="40px" /></a></td>
                </tr>
                </table>            
            </div> 
        </div>
    </div>
</div>
</div>
</template>
<script>
  return {
    on: {
      pageInit: function (e, page) {
        //Cargar el contenido si lo tiene
         var icedula = localStorage.getItem("IdCedula");
         app.request.get('http://www.grupobennetts.com.mx/VIC/conImagen.php', {Iced: icedula }, function (data) {
            for(var x = 0; x < data.length; x++) {
            var content = JSON.parse(data);
                $("#tablaimagen tbody").append("<tr id='fila"+ content[x].IdImagen +"'><td><a href='#' onclick='eliminarFila("+ content[x].IdImagen +", 2);' style='border: none; outline:none;'><img src='img/borrar.png' width='30px' /></a></td><td text-align: center;>" + content[x].TipoI + "</td><td text-align: center;>" + content[x].Cantidad + "</td><td text-align: center;>" + content[x].Ubicacion + "</td><td>"+  content[x].Comentario  +"</td></tr>");
            }  
        });
      }
    }
  }
</script>

I have this example image:

example
example.png1716×787 74.3 KB

2

As a starting idea, is this about positioning a preloader div over the top of your table? Probably more you can do to position in middle rather than top-right.

<div class="wrapper">
   <table id="tablaimagen">....</table>
   <div id="tabla-preloader" class="preloader"></div>
</div>

.wrapper {
  position: relative;
}

#tablapreloader {
  position: absolute;
  top: 0;
  right: 0;
3

thanks for the answer, the topic I’m looking for is when the whole table ends to show the data … there finish the preloader.

4

What you are looking for called Infinite Scroll https://framework7.io/docs/infinite-scroll.html

5

thank you very much again for your help… was the perfect option to my problem… RESOLVED!