Tabulator PHP AJAX 服务器端分页示例

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

从https://github.com/olifolkerd/tabulator下载Tabulator。
在<head>部分引用tabulator.min.css和tabulator.min.js。
您也可以使用 CDN。

<link href="https://unpkg.com/tabulator-tables@5.0.7/dist/css/tabulator.min.css" rel="stylesheet"><script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.0.7/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 Tabulatorvar table = new Tabulator("#example-table", {height: "311px",layout: "fitColumns",placeholder: "No Data Set",pagination: "remote", //enable remote paginationpaginationSize: 5,paginationInitialPage: 1,ajaxURL: "ajaxfile.php", //set url for ajax requestcolumns: [{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 Tabulatorvar table = new Tabulator("#example-table", {height: "311px",layout: "fitColumns",placeholder: "No Data Set",pagination: true, //enable paginationpaginationMode: "remote", //enable remote paginationpaginationSize: 5,paginationInitialPage: 1,ajaxURL: "ajaxfile.php", //set url for ajax requestcolumns: [{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

<?phpinclude '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/tabulator-tables@5.0.7/dist/css/tabulator.min.css" rel="stylesheet"><script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.0.7/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 contentsvar 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 togglevar headerMenu = function () {var menu = [];var columns = this.getColumns();for (let column of columns) {//create checkbox element using font awesome iconslet icon = document.createElement("i");icon.classList.add("fas");icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");//build labellet label = document.createElement("span");let title = document.createElement("span");title.textContent = " " + column.getDefinition().title;label.appendChild(icon);label.appendChild(title);//create menu itemmenu.push({label: label,action: function (e) {//prevent menu closinge.stopPropagation();//toggle current column visibilitycolumn.toggle();//change menu item iconif (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 Editorvar 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 inputvar 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 changeinput.addEventListener("blur", onChange);//submit new value on enterinput.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 rowspagination: true, //enable paginationpaginationMode: "remote", //enable remote paginationpaginationSize: 5,paginationInitialPage: 1,ajaxURL: "ajaxfile.php", //set url for ajax requestajaxRequesting: 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 filedocument.getElementById("download-csv").addEventListener("click", function () {table.download("csv", "data.csv");});//trigger download of data.json filedocument.getElementById("download-json").addEventListener("click", function () {table.download("json", "data.json");});//trigger download of data.xlsx filedocument.getElementById("download-xlsx").addEventListener("click", function () {table.download("xlsx", "data.xlsx", {sheetName: "My Data"});});//trigger download of data.pdf filedocument.getElementById("download-pdf").addEventListener("click", function () {table.download("pdf", "data.pdf", {orientation: "portrait", //set page orientation to portraittitle: "Example Report", //add title to report});});//trigger download of data.html filedocument.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 clickdocument.getElementById("add-row").addEventListener("click", function () {table.addRow({});});//Delete row on "Delete Row" button clickdocument.getElementById("del-row").addEventListener("click", function () {table.getSelectedRows().forEach(function (row) {row.delete();});});//Clear table on "Empty the table" button clickdocument.getElementById("clear").addEventListener("click", function () {table.clearData()});//Reset table contents on "Reset the table" button clickdocument.getElementById("reset").addEventListener("click", function () {table.setData(tabledata);});//undo buttondocument.getElementById("history-undo").addEventListener("click", function () {table.undo();});//redo buttondocument.getElementById("history-redo").addEventListener("click", function () {table.redo();});//print buttondocument.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>

Tabulator PHP AJAX 服务器端分页示例相关推荐

Tabulator v5.1.0 新特性分页计数器及PHP AJAX 服务器端分页示例
Tabulator是一个数据表格插件,可以更轻松地在网页上添加分页. 只需要添加记录列表,它就会自动调整数据并创建具有搜索和排序功能的分页. 有一些选项可用于实现AJAX 分页. 在本教程中,我将展示 ...
php ajax mysql 分页查询_PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
1.首先做主页面Ajax_pag.php 代码如下: Ajax做分页 .header{ margin-top: 20px; } 关键字: 地区代号地区名称父级代号 2.然后做分页查询JS页面Ajax_ ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
php ajax mysql 分页查询_基于PHP_MySql_Ajax的分页技术方案
一.引言 Ajax的全称是AsynchronousJavaScriptAndXML(异步JavaScript和XML),它不是一项新技术,而是很多成熟的技术的集合. 和Applet,Flash相比,A ...
php ajax实现分页效果
ajaxpage.php[这里是数据展示页面的代码]: <meta charset='utf-8′> <script src=" http://ajax.googleapi ...
datatables.js 简单使用--多选框和服务器端分页
说明:datatables是一款jQuery表格插件.感觉EasyUI的datagrid更易用内容:多选框和服务器端分页缘由:写这篇博客的原因是datatables的文档写的不怎么样,找东西很麻烦 ...
java服务器端分页_使用数据表的服务器端分页
服务器每页返回15条记录,总记录超过2000条 . 我想显示前15条记录,然后每次单击"下一步"按钮,显示剩余的所有记录(每页15条记录) . 为此,我们做服务器端分页或客户端?? ...
jquery datatables-1.8.2服务器端分页不支持IE6,IE7 UBG修改。
jquery datatable服务器端分页不支持IE6,IE7: 原因是在IE6,IE7,jquery datatable通过ajax 无法发送get类型请求: 但可以发送post请求,只要将插件中 ...
datatables服务器端分页
Datatables入坑指南01: 今天尝试将datatables从客户端分页转化为服务器端分页,根据官网要求我返回了相应的相应参数,具体如下: 但是客户端总是显示不了相应的json数据,最后终于发现 ...