Pagination of records

Asked

Viewed 735 times

3

I am trying to create a table within a modal window that is triggered / open as the user clicks on a button, but due to having too many logs it gets slow to open, so I thought of 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 jquery mysql ajax json
  • 2

    There is the possibility to do what you want and where you want, if you are in difficulty, post the code of what you have tried and then, we try to help.

  • so in case I try to make the pagination but I’ve worked so hard on the script that now it only gets stuck on the first page and does not go to the others when I select it, I will post the code

  • @Rafaelaugusto edited the question with the code could analyze

  • 1

    If you make pagination with php will never work, since always will update the page, you have to do with js

  • you could refer me a tutorial, link, something to take a north of how to do

1 answer

0

Using Javascript is the best way to do it. Jquery can help you a lot with this. You can follow this tutorial here.

Examples below use Jquery Bootgrid.

Grid HTML and then Javascript warning 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 that address: current=1&rowCount=10&sort[sender]=asc

Current = means the page you are on; rowCount = total lines to be displayed; Sort[Sender] = ascending order;

Using the logic you create the page, it can be both in javascript and in the back-end.

The following is an 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 be something like this, but it all depends on the structure of the development.

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

In what I can help, there will be a lot of information on Google. If anything’s been messed up, I’ll edit it as soon as I can. Sources: Jquerybootgrid Paging with JS

  • thanks, you would have some example to clear ? if it is not asking too much

  • @Victort. I edited the answer.

  • I actually tried to do without the select in the desired table and the result was only the table shown on the screen

  • Explain a little more than you did, to understand better. For paging to work you need to have a registration number, if you have 100 records you will have 5 pages with 20 lines. You can simulate by creating an array with multiple records and have it displayed on the screen.

Browser other questions tagged php jquery mysql ajax json

You are not signed in. Login or sign up in order to post.