Tabulator v5.1.0 新特性分页计数器及PHP AJAX 服务器端分页示例

allway2

已于 2022-02-08 13:35:27 修改

阅读量493

点赞数

文章标签： php ajax 开发语言

于 2022-02-08 13:33:26 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/122822100

版权

本文介绍了如何利用PHP和Tabulator JavaScript库创建一个带有AJAX分页功能的数据表格。首先创建了一个名为employee的数据库表，然后在PHP中建立数据库连接。接着，引入Tabulator的CSS和JS文件，并配置HTML结构。Tabulator的配置包括设置分页、远程数据获取、列定义等。最后，PHP脚本接收分页参数，从数据库中获取数据并以JSON格式返回。

摘要由CSDN通过智能技术生成

Tabulator是一个数据表格插件，可以更轻松地在网页上添加分页。

只需要添加记录列表，它就会自动调整数据并创建具有搜索和排序功能的分页。

有一些选项可用于实现AJAX 分页。

在本教程中，我将展示如何使用 PHP 在 Tabulator中实现 AJAX 分页。

1.表结构

创建employee表。

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL, 
  `salary` varchar(20) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2.配置

config.php为数据库创建一个连接。

代码

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3.下载并包含

从GitHub - olifolkerd/tabulator: Interactive Tables and Data Grids for JavaScript下载Tabulator。
在<head>部分引用tabulator.min.css和tabulator.min.js。
您也可以使用 CDN。

<link href="https://unpkg.com/tabulator-tables@5.1.0/dist/css/tabulator.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1.0/dist/js/tabulator.min.js"></script>

4. HTML

Tabulator 5.1.0

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tabulator Example</title>
        <link href="css/tabulator.css" rel="stylesheet">
        <script type="text/javascript" src="js/tabulator.js"></script>
        <style>
            /*Horizontally center header and footer*/
            .tabulator-print-header, tabulator-print-footer{
                text-align:center;
            }
        </style>
    </head>

    <body>



        <div id="example-table"></div>

        <script type="text/javascript">
//Build Tabulator
            var table = new Tabulator("#example-table", {
                locale: "zh-cn",
                height: "311px",
                layout: "fitColumns",
                placeholder: "No Data Set",
                pagination: true, //enable pagination
                paginationMode: "remote", //enable remote pagination
                paginationSize: 5,
                paginationCounter: "rows", //display count of paginated rows in footer

                paginationInitialPage: 1,
                ajaxURL: "ajaxfile.php", //set url for ajax request

                columns: [

                    {title: "emp_name", field: "emp_name"},
                    {title: "email", field: "email"},
                    {title: "gender", field: "gender"},
                    {title: "salary", field: "salary"},
                    {title: "city", field: "city"},
                ],
                langs: {
                    "zh-cn": {
                        "pagination": {
                            "first": "|<最前页",
                            "first_title": "|<最前页",
                            "last": "最后页>|",
                            "last_title": "最后页>|",
                            "prev": "<前一页",
                            "prev_title": "<前一页",
                            "next": "后一页>",
                            "next_title": "后一页>",
                            "all": "所有",
                            "page_size": "每页行数",
                            "counter": {
                                "showing": "显示",
                                "of": "，总共",
                                "rows": "行",
                                "pages": "页",
                            }
                        },
                    },
                },
            });


        </script>
    </body>

</html>

5. PHP

<?php

include 'config.php';

## Read value
$page = $_GET['page'];
$size = $_GET['size']; // Rows display per page
## Total number of records without filtering
$sel = mysqli_query($con, "select count(*) as allcount from employee");
$records = mysqli_fetch_assoc($sel);
$totalRecords = $records['allcount'];
$last_page = ceil($totalRecords / $size);

## Fetch records
$empQuery = "select * from employee limit " . ($page - 1) * $size . "," . $size;
$empRecords = mysqli_query($con, $empQuery);
$data = array();

while ($row = mysqli_fetch_assoc($empRecords)) {
    $data[] = array(
        "emp_name" => $row['emp_name'],
        "email" => $row['email'],
        "gender" => $row['gender'],
        "salary" => $row['salary'],
        "city" => $row['city']
    );
}

## Response
$response = array(
    "last_page" => $last_page,
    "last_row" => $totalRecords,
    "data" => $data
);

echo json_encode($response);

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tabulator v5.1.0 新特性分页计数器及PHP AJAX 服务器端分页示例

Tabulator是一个数据表格插件，可以更轻松地在网页上添加分页。只需要添加记录列表，它就会自动调整数据并创建具有搜索和排序功能的分页。有一些选项可用于实现AJAX 分页。在本教程中，我将展示如何使用 PHP 在 Tabulator中实现 AJAX 分页。1.表结构创建employee表。CREATE TABLE `employee` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `emp_name` va...
复制链接

扫一扫