如何将表数据设置为多个页面

Question

我似乎找不到任何有关如何为具有大量数据的表生成多个页面的信息。 根据用户的过滤器，表中生成的数据可以是1000多个行。 我试图找到一种方法，使每页具有50行，并具有箭头按钮以移至下一页等。有人可以指出一些我可以遵循的资源吗？ 谢谢。

Answer 1

就像@bronkula正确说的那样，您可以通过分页来实现。 我想分享一些简单的例子供参考：

示例：参考： https : //datatables.net/examples/basic_init/alt_pagination.html

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

JS Fiddle链接的另一个示例： http : //jsfiddle.net/LiquidSky/djav37tg/

Answer 2

您要寻找的概念是分页 。

设计分页是一回事，编码是另一回事。 您可能想研究一下pagination.js

Answer 3

如果不需要数千行，则可以做一个简单的客户端，这几乎不需要时间。 这是一个codepen示例： https ://codepen.io/ScottFSchmidt/pen/eMzdpO

但是，对于使用大量数据（成千上万？），您需要执行服务器端。 该链接具有基本的HTML和server.php文件（非常重要）。 https://datatables.net/examples/server_side/simple.html确保也同时添加ssp.class.php文件，该文件是此链接： 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 )
);

这应该使您入门。