<div id="div-grid">
    <div id="toolbar">
        <span>{TITULO_GRID}</span>
        <button class="btn btn-sm btn-success btn-circle  float-right btn-agregar" title="Agregar"  >
            <i class="fa  fa-plus-circle "></i>  
        </button>
    </div>

    <table id="tabla" 
           data-toggle="table"
           data-toolbar="#toolbar"
           data-pagination="true"
           data-side-pagination="server"
           data-page-size="50"
           data-page-list="[]"
           data-unique-id="{CLAVE_PRIMARIA}"
           data-url ="<?php echo PAGE_PATH . "listar" ?>"
           data-search="false"
           data-height="300"
           data-row-style="setRowStyle"
           data-mobile-responsive="true">
        <thead>
            <tr>
                <th data-field="_NUM_" data-width="60px">No</th>     
{CAMPOS_GRID}
                <th data-field="acciones" data-formatter="operateFormatter"  
                    data-events="operateEvents" 
                    data-align="center"
                    data-width="80px"
                    >Acciones</th>
            </tr>
        </thead>
    </table>
</div>

<div id="div-formulario" class="mb-3">
    <div class="card card-custom {CLASE_ANCHO_FORMULARIO}">
        <div class="card-header px-3 py-1">
            <span id="titulo-accion" style="font-size: inherit">Agregar</span>
            {TITULO_FORMULARIO}
        </div>
        <div class="card-body">
            <form {CLASE_FORMULARIO} id="formulario" data-toggle="validator" role="form">
                <input id="{CLAVE_PRIMARIA}" name="{CLAVE_PRIMARIA}" type="hidden"/>

{OBJETOS_FORMULARIO}

{BOTONES_DE_ACCION}
                <div class="working no-show"></div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    var f = new Formulario();
</script>