Paging datatable with jQuery

Asked

Viewed 1,107 times

1

I’m using Datatable to render my records. The problem is: I have 15,000 records in a table, it needs to load ALL records first, then mount the pager.

How can I manipulate this? First load the limit (20), and later, by clicking on the pages, searching for new records?

php

  • These records you have stored in a database?

  • Exactly, I have saved in the database, I have seen examples you have in a jquery, but it would not be the idea..

  • What have you tried ?

  • I haven’t tried anything, I just have the basic commands of the list... from the normal datatable,

  • If I understand the question correctly, you want to make new requests when changing pages, reloading only the records of that current page. For what I have already researched, you have to bring all the records first, because the pagination buttons of the datatable do not have an eventhandle or callback to set and nor in the handling of the Loaded does not have a request per action setting. I advise making your own table of records with paging and searching!

1 answer

3

I’ll try to help you as I understand:

Well, you’ll need to push the limit, which in case you made it clear that they will be 20 records. I suggest you leave a div "father" taking over the table in HTML:

<div id="pai">
...
</div>

Now let’s go to the steps of the project:

USING GET:

1. Create a secondary file saved as PHP that has database connection:

Example: pagination.php

<?php
    $id = (int) isset($_GET['id']) ? strip_tags($_GET['id']) : ''; // número da página atual
    $num = (int) isset($_GET['num']) ? strip_tags($_GET['num']) : ''; // número de registros por cada paginação (no seu caso foi escolhido 20)
    $total = (int) isset($_GET['total']) ? strip_tags($_GET['total']) : ''; // número total de registros
    $pages = ceil($total/$num); // número de páginas com base no número de registros e a quantidade de registro por cada paginação
    $start = ($num * $id) - $num; // calcular em que registro é começado a paginação (se você já tiver paginado uma vez (saiu da página 1 para a 2), o calculo ficaria por exemplo: [(20 * 2) - 20] = 20; onde você usará na query o start para saber de onde começam os novos registros.
?>

How the query would look: (using PDO)

$valores = $pdo->query("SELECT * FROM valores ORDER BY id DESC LIMIT $start, $num");

After that, you should list the values.

USING POST:

1. Create a secondary file as PHP that has database connection: Example: pagination.php

<?php
    $id = (int) isset($_POST['id']) ? strip_tags($_POST['id']) : ''; // número da página atual
    $num = (int) isset($_POST['num']) ? strip_tags($_POST['num']) : ''; // número de registros por cada paginação (no seu caso foi escolhido 20)
    $total = (int) isset($_POST['total']) ? strip_tags($_POST['total']) : ''; // número total de registros
    $pages = ceil($total/$num); // número de páginas com base no número de registros e a quantidade de registro por cada paginação
    $start = ($num * $id) - $num; // calcular em que registro é começado a paginação (se você já tiver paginado uma vez (saiu da página 1 para a 2), o calculo ficaria por exemplo: [(20 * 2) - 20] = 20; onde você usará na query o start para saber de onde começam os novos registros.
?>

2. Using jQuery and ajax:

As you created a parent div (explained above), it is now necessary to exchange its content according to the page exchange.

var pagination = {};
pagination.currentPage = 1;
pagination.start = function(total, num, type){
    var box = $('#pai'),
        prev = $('#botao-anterior'),
        next = $('#botao-proximo'),
        calc = Number(total/num);
        /* Onde **total** será o número total de registros e **num** será o número de registros por página */
    if(type == 'next' && pagination.currentPage < calc){
        $.ajax({
            url: 'pagination.php',
            type: 'POST',
            data: {'id': pagination.currentPage, 'num': num, 'total': total},
            success: function(data){
                box.html(data);
            }
        });
    } else if($type == 'prev' && pagination.currentPage > 0){
        $.ajax({
            url: 'pagination.php',
            type: 'POST',
            data: {'id': pagination.currentPage, 'num': num, 'total': total},
            success: function(data){
                box.html(data);
            }
        });
    }
}

Browser other questions tagged php

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