How to set table data into multiple pages javascript html

Question

I can't seem to find any information on how to generate multiple pages for tables with large amounts of data. Based on the user's filters the data generated into the table can be 1000+ rows. I am trying to find a way to have 50 rows per page and have arrow buttons to move to the next page ect.. Can someone point to some resources I can follow? Thank you.

Answer 1

As rightly said by @bronkula , you can achieve this by Pagination. I would like to share some simple examples for reference:

Example: Reference: https://datatables.net/examples/basic_init/alt_pagination.html

$(document).ready(function() {
$('#example').DataTable( {
"pagingType": "full_numbers"
} );
} );

JS Fiddle link for another example: http://jsfiddle.net/LiquidSky/djav37tg/

Answer 2

The concept you're looking for is pagination .

Designing pagination is one thing, coding it another. You might want to look into pagination.js

Answer 3

If you do not need thousands of rows, you can do a simple client side which takes almost no time at all. Here is a codepen example of that: https://codepen.io/ScottFSchmidt/pen/eMzdpO

However, for using a large amount of data (thousands?), you'll need to do a sever-side. This link has the basic HTML and server.php file(very important). https://datatables.net/examples/server_side/simple.html Make sure to also add the ssp.class.php file too which is this link: https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/ssp.class.php

<?php

/*
 * DataTables example server-side processing script.
 *
 * Please note that this script is intentionally extremely simply to show how
 * server-side processing can be implemented, and probably shouldn't be used as
 * the basis for a large complex system. It is suitable for simple use cases as
 * for learning.
 *
 * See http://datatables.net/usage/server-side for full details on the server-
 * side processing requirements of DataTables.
 *
 * @license MIT - http://datatables.net/license_mit
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Easy set variables
 */

// DB table to use
$table = 'datatables_demo';

// Table's primary key
$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
    array( 'db' => 'first_name', 'dt' => 0 ),
    array( 'db' => 'last_name',  'dt' => 1 ),
    array( 'db' => 'position',   'dt' => 2 ),
    array( 'db' => 'office',     'dt' => 3 ),
    array(
        'db'        => 'start_date',
        'dt'        => 4,
        'formatter' => function( $d, $row ) {
            return date( 'jS M y', strtotime($d));
        }
    ),
    array(
        'db'        => 'salary',
        'dt'        => 5,
        'formatter' => function( $d, $row ) {
            return '$'.number_format($d);
        }
    )
);

// SQL server connection information
$sql_details = array(
    'user' => '',
    'pass' => '',
    'db'   => '',
    'host' => ''
);


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * If you just want to use the basic configuration for DataTables with PHP
 * server-side, there is no need to edit below this line.
 */

require( 'ssp.class.php' );

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

This should get you started.