I'll try to help you by what I understand:
Well, you need to load the limit, which in case you made it clear that 20 records will be. I suggest you leave a "parent" div 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 a connection to the database:
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 like:
(using PDO)
$valores = $pdo->query("SELECT * FROM valores ORDER BY id DESC LIMIT $start, $num");
After this, you should list the values.
USING POST:
1. Create a secondary file like PHP that has a connection to the database:
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:
Since you created a parent div (explained above), you now need to change the content of the page accordingly.
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);
}
});
}
}