Tabulator PHP AJAX 服务器端分页示例

其他 2021-11-27 06:04:12 阅读次数: 0

 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.下载并包含

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

4. HTML

Tabulator 4.9

<!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", {
                height: "311px",
                layout: "fitColumns",
                placeholder: "No Data Set",
                pagination: "remote", //enable remote pagination
                paginationSize: 5,
                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"},
                ],
            });


        </script>
    </body>

</html>

Tabulator 5.0 参数有些变化： pagination: "remote", //enable remote pagination变为pagination: true, //enable pagination和paginationMode: "remote", //enable remote pagination

<!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", {
                height: "311px",
                layout: "fitColumns",
                placeholder: "No Data Set",
                pagination: true, //enable pagination
                paginationMode: "remote", //enable remote pagination
                paginationSize: 5,
                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"},
                ],
            });


        </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,
    "data" => $data
);

echo json_encode($response);


<!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="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
        <script type="text/javascript" src="https://moment.github.io/luxon/global/luxon.min.js"></script>
        <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>
        <style>
            /*Horizontally center header and footer*/
            .tabulator-print-header, tabulator-print-footer{
                text-align:center;
            }
        </style>
    </head>

    <body>

        <div>
            <button id="print-table">Print Table</button>
        </div>
        <div>
            <button id="history-undo">Undo Edit</button>
            <button id="history-redo">Redo Edit</button>
        </div>
        <div>
            <button id="download-csv">Download CSV</button>
            <button id="download-json">Download JSON</button>
            <button id="download-xlsx">Download XLSX</button>
            <button id="download-pdf">Download PDF</button>
            <button id="download-html">Download HTML</button>
        </div>
        <div>
            <button id="add-row">Add Blank Row to bottom</button>
            <button id="del-row">删除选中的行</button>
            <button id="clear">Empty the table</button>
            <button id="reset">Reset</button>
        </div>
        <div id="example-table"></div>
        <div id="example-footer"></div>
        <button id="save">Save</button>
        <script type="text/javascript">
            //define row context menu contents
            var rowMenu = [
                {
                    label: "<i class='fas fa-user'></i> Change Name",
                    action: function (e, row) {
                        row.update({name: "Steve Bobberson"});
                    }
                },
                {
                    label: "<i class='fas fa-check-square'></i> Select Row",
                    action: function (e, row) {
                        row.select();
                    }
                },
                {
                    separator: true,
                },
                {
                    label: "Admin Functions",
                    menu: [
                        {
                            label: "<i class='fas fa-trash'></i> Delete Row",
                            action: function (e, row) {
                                console.log(row.getData());
                                row.delete();
                            }
                        },
                        {
                            label: "<i class='fas fa-trash'></i> Save Row",
                            action: function (e, row) {
                                console.log(row.getData());

                            }
                        },
                        {
                            label: "<i class='fas fa-ban'></i> Disabled Option",
                            disabled: true,
                        },
                    ]
                }
            ]

//define column header menu as column visibility toggle
            var headerMenu = function () {
                var menu = [];
                var columns = this.getColumns();

                for (let column of columns) {

                    //create checkbox element using font awesome icons
                    let icon = document.createElement("i");
                    icon.classList.add("fas");
                    icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");

                    //build label
                    let label = document.createElement("span");
                    let title = document.createElement("span");

                    title.textContent = " " + column.getDefinition().title;

                    label.appendChild(icon);
                    label.appendChild(title);

                    //create menu item
                    menu.push({
                        label: label,
                        action: function (e) {
                            //prevent menu closing
                            e.stopPropagation();

                            //toggle current column visibility
                            column.toggle();

                            //change menu item icon
                            if (column.isVisible()) {
                                icon.classList.remove("fa-square");
                                icon.classList.add("fa-check-square");
                            } else {
                                icon.classList.remove("fa-check-square");
                                icon.classList.add("fa-square");
                            }
                        }
                    });
                }

                return menu;
            };
            //Create Date Editor
            var dateEditor = function (cell, onRendered, success, cancel) {
                //cell - the cell component for the editable cell
                //onRendered - function to call when the editor has been rendered
                //success - function to call to pass the successfuly updated value to Tabulator
                //cancel - function to call to abort the edit and return to a normal cell

                //create and style input
                var cellValue = luxon.DateTime.fromFormat(cell.getValue(), "dd/MM/yyyy").toFormat("yyyy-MM-dd"),
                        input = document.createElement("input");

                input.setAttribute("type", "date");

                input.style.padding = "4px";
                input.style.width = "100%";
                input.style.boxSizing = "border-box";

                input.value = cellValue;

                onRendered(function () {
                    input.focus();
                    input.style.height = "100%";
                });

                function onChange() {
                    if (input.value != cellValue) {
                        success(luxon.DateTime.fromFormat(input.value, "yyyy-MM-dd").toFormat("dd/MM/yyyy"));
                    } else {
                        cancel();
                    }
                }

                //submit new value on blur or change
                input.addEventListener("blur", onChange);

                //submit new value on enter
                input.addEventListener("keydown", function (e) {
                    if (e.keyCode == 13) {
                        onChange();
                    }

                    if (e.keyCode == 27) {
                        cancel();
                    }
                });

                return input;
            };

            var footer = document.getElementById('example-footer');
            var table = new Tabulator("#example-table", {
                locale: "zh-cn",
                height: 230,
                layout: "fitColumns",
                rowContextMenu: rowMenu, //add context menu to rows
                pagination: true, //enable pagination
                paginationMode: "remote", //enable remote pagination
                paginationSize: 5,
                paginationInitialPage: 1,
                ajaxURL: "ajaxfile.php", //set url for ajax request
                ajaxRequesting: function (url, params) {
                    console.log(table.getData());
                    console.log(table.getEditedCells());
                    let rowSet = new Set();
                    table.getEditedCells().forEach(function (cell) {
                        rowSet.add(cell.getRow());
                    });
                    for (let row of rowSet) {
                        console.log(row.getData());
                    }
                    table.clearHistory();
                },
                paginationSizeSelector: true,
                //paginationSizeSelector: [5, 10, 15],
                //paginationButtonCount: 2,
                tooltips: true,
                history: true,
                printAsHtml: true,
                printHeader: "<h1>Example Table Header<h1>",
                printFooter: "<h2>Example Table Footer<h2>",
                langs: {
                    "zh-cn": {
                        "pagination": {
                            "first": "|<最前页",
                            "first_title": "|<最前页",
                            "last": "最后页>|",
                            "last_title": "最后页>|",
                            "prev": "<前一页",
                            "prev_title": "<前一页",
                            "next": "后一页>",
                            "next_title": "后一页>",
                            "all": "所有",
                            "page_size": "每页行数",
                        },
                    },
                },

                columns: [
                    {formatter: "rowSelection", titleFormatter: "rowSelection", headerSort: false, cellClick: function (e, cell) {
                            cell.getRow().toggleSelect();
                        }},
                    {
                        title: "emp_name",
                        field: "emp_name",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input",
                    },
                    {
                        title: "email",
                        field: "email",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input", },
                    {
                        title: "gender",
                        field: "gender",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "select",
                        editorParams: {
                            values: {
                                "male": "male",
                                "female": "female",
                            }},
                    },
                    {
                        title: "salary",
                        field: "salary",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input", },
                    {
                        title: "city",
                        field: "city",
                        sorter: "string",
                        headerFilter: "input",
                        editor: "input",
                    },
                ],

            });
            //trigger download of data.csv file
            document.getElementById("download-csv").addEventListener("click", function () {
                table.download("csv", "data.csv");
            });

//trigger download of data.json file
            document.getElementById("download-json").addEventListener("click", function () {
                table.download("json", "data.json");
            });

//trigger download of data.xlsx file
            document.getElementById("download-xlsx").addEventListener("click", function () {
                table.download("xlsx", "data.xlsx", {sheetName: "My Data"});
            });

//trigger download of data.pdf file
            document.getElementById("download-pdf").addEventListener("click", function () {
                table.download("pdf", "data.pdf", {
                    orientation: "portrait", //set page orientation to portrait
                    title: "Example Report", //add title to report
                });
            });

//trigger download of data.html file
            document.getElementById("download-html").addEventListener("click", function () {
                table.download("html", "data.html", {style: true});
            });
            document.getElementById("save").addEventListener("click", function () {
                console.log(table.getData());
                console.log(table.getEditedCells());
                let rowSet = new Set();
                table.getEditedCells().forEach(function (cell) {
                    rowSet.add(cell.getRow());
                });
                for (let row of rowSet) {
                    console.log(row.getData());
                }
                table.clearHistory();
            });
//Add row on "Add Row" button click
            document.getElementById("add-row").addEventListener("click", function () {
                table.addRow({});
            });

//Delete row on "Delete Row" button click
            document.getElementById("del-row").addEventListener("click", function () {
                table.getSelectedRows().forEach(function (row) {
                    row.delete();
                });
            });

//Clear table on "Empty the table" button click
            document.getElementById("clear").addEventListener("click", function () {
                table.clearData()
            });

//Reset table contents on "Reset the table" button click
            document.getElementById("reset").addEventListener("click", function () {
                table.setData(tabledata);
            });
            //undo button
            document.getElementById("history-undo").addEventListener("click", function () {
                table.undo();
            });

//redo button
            document.getElementById("history-redo").addEventListener("click", function () {
                table.redo();
            });
            //print button
            document.getElementById("print-table").addEventListener("click", function () {
                table.print(false, true);
            });
            document.getElementById("example-table").addEventListener("page-changed	", function () {
                console.log(table.getPage());
                console.log(table.getPageMax());
            });
        </script>
    </body>

</html>

猜你喜欢

转载自blog.csdn.net/allway2/article/details/121521646
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022