Paging of records

Question

Paging of records

Navigation

#1 by (0 votes)

2

I'm trying to create a table inside a modal window that is triggered / opened as the user clicks a button, but due to having too many records it's slow to open so I thought about paging. Could someone show me some example?

    <!-- INICIO DA JANELA MODAL -->
    <div class="modal fade" id="Modal_afil" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <label class="modal-title">Afiliada</label>
                </div>
                    <div class="modal-body">
                        <div class="container theme-showcase" role="main">
                            <div class="page-header">
                                <div class="row"><!-- Inicio Cria DIV para efetuar pesquisa dos registros -->
                                    <div class="col-sm-6 col-md-6">
                                        <form id='ajax_form' class="form-inline ajax_form" method="GET" action="pesquisar_1.php">
                                            <div class="form-group">
                                                    <label for="exampleInputName2">Pesquisar</label>
                                                    <input type="text" name="pesquisar" class="form-control" id="exampleInputName2" placeholder="Digitar...">
                                            </div>
                                                <button type="submit" class="btn btn-primary">Pesquisar</button>
                                        </form>
                                    </div>
                                </div><!-- Fim Cria DIV para efetuar pesquisa dos registros -->

                                <!-- Inicio da Paginacao de Resultados -->
                                <nav class="text-center">
                                    <?php
                                        //Verificar a pagina anterior e posterior
                                        $pagina_anterior = $pagina - 1;
                                        $pagina_posterior = $pagina + 1;
                                    ?>

                                    <ul class="pagination">
                                        <li>
                                                <?php
                                                if($pagina_anterior != 0){ ?>
                                                        <a href="index.php?pagina=<?php echo $pagina_anterior; ?>" aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                        </a>
                                                <?php }else{ ?>
                                                        <span aria-hidden="true">&laquo;</span>
                                        <?php }  ?>
                                        </li>
                                        <?php 
                                        //Apresentar a paginacao
                                        for($i = 1; $i < $num_pagina + 1; $i++){ ?>
                                                <li><a href="index.php?pagina=<?php echo $i; ?>"><?php echo $i; ?></a></li>
                                        <?php } ?>
                                        <li>
                                                <?php
                                                if($pagina_posterior <= $num_pagina){ ?>
                                                        <a href="index.php?pagina=<?php echo $pagina_posterior; ?>" aria-label="Previous">
                                                                <span aria-hidden="true">&raquo;</span>
                                                        </a>
                                                <?php }else{ ?>
                                                        <span aria-hidden="true">&raquo;</span>
                                        <?php }  ?>
                                        </li>
                                    </ul>                                 
                                </nav>
                                <!-- Fim da Paginacao de Resultados -->

                                <!-- Inicio Tabela com registros que aparece dentro do Modal -->
                                <div class="row">
                                    <table class='table table-bordered' class='pagination'>                    
                                        <thead>
                                            <tr>
                                                <td><b>Código</b></td>
                                                <td><b>Nome Fantasia</b></td>
                                                <td><b>Codigo Interno</b></td>
                                                <td><b>Nome / Razão Social</b></td>
                                                <td><b>Endereço</b></td>
                                            </tr>
                                        </thead>
                                        <?php while($rows_cursos = mysqli_fetch_assoc($resultado_cursos)){ ?>
                                        <tbody>    
                                            <tr class='btn-default'>    
                                                <td class='get-cadcli'><?php echo $rows_cursos['codigo']; ?></td>
                                                <td class='get-value-cadcli'><?php echo $rows_cursos['nome_fantasia']; ?></td>
                                                <td class='get-value-cadcli'><?php echo $rows_cursos['codigo_interno']; ?></td>
                                                <td class='get-value-cadcli'><?php echo $rows_cursos['cliente']; ?></td>
                                                <td class='get-value-cadcli'><?php echo $rows_cursos['nome_logr']; ?></td>
                                            </tr>
                                        </tbody>
                                        <?php } ?>
                                    </table>
                                </div>
                                <!-- Inicio Tabela com registros que aparece dentro do Modal -->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    </div>
            </div>
        </div>
    </div>
    <!-- FIM DA JANELA MODAL -->

php mysql jquery ajax json

asked by anonymous 07.11.2017 / 17:35

1 answer

Regular expression pattern, minimum 1 blank space Div alignment

score 0 · Answer 1

Using JavaScript is the best way to do it. JQuery can help you a lot in this. You can follow this tutorial here.

Examples below use JQuery Bootgrid.

Grid HTML and then JavaScript that alerts you about the selected ID.

$("#grid-selection").bootgrid({
    ajax: true,
    post: function ()
    {
        /* To accumulate custom parameter with the request object */
        return {
            id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
        };
    },
    url: "/api/data/basic",
    selection: true,
    multiSelect: true,
    formatters: {
        "link": function(column, row)
        {
            return "<a href=\"#\">" + column.id + ": " + row.id + "</a>";
        }
    }
}).on("selected.rs.jquery.bootgrid", function(e, rows)
{
    var rowIds = [];
    for (var i = 0; i < rows.length; i++)
    {
        rowIds.push(rows[i].id);
    }
    alert("Select: " + rowIds.join(","));
}).on("deselected.rs.jquery.bootgrid", function(e, rows)
{
    var rowIds = [];
    for (var i = 0; i < rows.length; i++)
    {
        rowIds.push(rows[i].id);
    }
    alert("Deselect: " + rowIds.join(","));
});

<table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
            <th data-column-id="link" data-formatter="link" data-sortable="false">Link</th>
        </tr>
    </thead>
</table>

Through this address: current=1&rowCount=10&sort[sender]=asc

Current = means the page you are on; rowCount = total of rows to be displayed; sort [sender] = increasing list order;

Using the logic you create the page, it can be in both the javascript and the backend.

Follow the example in JS

function listItems(items, pageActual, limitItems){
    let result = [];
    let totalPage = Math.ceil( items.length / limitItems );
    let count = ( pageActual * limitItems ) - limitItems;
    let delimiter = count + limitItems;
    
    if(pageActual <= totalPage){
        for(let i=count; i<delimiter; i++){
            if(items[i] != null){
                result.push(items[i]);
            }
            count++;
        }
    }

    return result;
};

Remembering that if you use logic in JS, you should send the result to the back end.

The query in the database may look something like this, but it all depends on the development framework.

SELECT p.id, p.Nome, p.Idade FROM Pessoa p WHERE p.id BETWEEN 1 AND 20

What I can help with, you'll get a lot of information on Google. If anything is confusing, I'll edit it as soon as I can. Sources: JQueryBootgrid Paging with JS