Here is another example of saving / loading state data to / from a SQL MariaDb database based on https://datatables.net/extensions/staterestore/examples/initialisation/ajax.html
This example does integrate with Editor as it uses the PHP controller file that the Editor Generator produces to retrieve data. It also works with a Select field getting its data from another table. I have also tried it with "Column Control", colReorder and colvis and all seem to work fine. You can change the user_id variable in user_data.php so that different users can just see their own states.
To get this to work, I have added another method to the php/lib/Editor.php file. (in my case I added it after the json() method).
To start, log into the DataTables website and generate a basic site from the Editor page (https://editor.datatables.net/ ) as the files below rely on the libraries / structure of what the generator produces. You will then need to save the files detailed below in the relevant directories. Make sure you use stateRestore version 1.4.3 or later.
Initially download the package from the generator and get it working and then use / copy the files below.
SQL Scripts
data_table_script.sql. This script creates the main "data" table
state_table_script.sql. Creates the table to store the state information.
10data.sql: Optional file to load 10 example rows of data into the "data" table.
Editor.add.php
Method to be included in the php/lib/Editor.php file.
Save the following in the root directory
* user_data.php
* state_info.php
Save the following in the js directory
* table.user_data.js
* table.state_info.js
Save the following in the PHP directory
* table.state_info.php
* table.user_data.php
* table.user_and_state_data
* stateSave.php
* stateLoad.php
Edit php/lib/Editor.php and add Editor.add.php
Edit table.user_and_state_data and check that the path for the $stateLoad variable is correct.
Note that I opted for separate controller files for datatables and editor in table.user_data.js so that the statesave info is not sent back to the server after editing.
-- Data Table (filename: data_table_script.sql )
DROP TABLE IF EXISTS data;
CREATE TABLE `data` (
`id` int(10) NOT NULL,
`first_name` varchar(25) DEFAULT NULL,
`last_name` varchar(25) DEFAULT NULL,
`zip_post_code` varchar(25) DEFAULT NULL,
`country` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
ALTER TABLE `data`
ADD PRIMARY KEY (`id`);
ALTER TABLE `data`
MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;
-- State Table (filename: state_table_script.sql )
DROP TABLE IF EXISTS states;
CREATE TABLE `states` (
`id` int(10) NOT NULL,
`state_name` varchar(10) NOT NULL,
`state_info` text DEFAULT NULL,
`user_id` varchar(5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
ALTER TABLE `states` ADD PRIMARY KEY (`id`);
ALTER TABLE `states` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;
ALTER TABLE `states` ADD UNIQUE `unique_index`(`state_name`, `user_id`);
-- Data for load (filename: 10data.sql)
INSERT INTO data (first_name, last_name,zip_post_code,Country)
VALUES
("Armand","Warren","56045","Taiwan"),
("Xenos","Salas","71090","Liberia"),
("Virginia","Whitaker","62723","Nicaragua"),
("Kato","Patrick","97662","Palau"),
("Penelope","Hensley","76634","Greenland"),
("Georgia","Erickson","81358","Bolivia"),
("Tanisha","Humphrey","93371","Kenya"),
("Claire","Espinoza","I8S 2S8","Panama"),
("Raya","Tucker","O8D 8W7","Botswana"),
("Otto","Briggs","57590","Anguilla")
/** File: Editor.add to be added to php/lib/Editor.php
* jsonAddState, echo out json and state information.
*/
public function jsonAddState($statescript = null)
{
include($statescript);
$json = $this->_out;
if ($statedata_array === []) {
$json = json_encode($json);
echo $json;
} else {
$json["stateRestore"] = $statedata_array;
$json = json_encode($json);
echo $json;
}
return $this;
}
<?php
// filename user_data.php
session_start();
$_SESSION['user_id'] = 2;
?>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>User Data</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/table.user_data.js"></script>
<style>
div.desktopContainer {
width: auto;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body class="dataTables">
<div class="desktopContainer">
<h2>User Data</h2>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="user_data" width="100%">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>ZIP / Post code</th>
<th>Country</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
<?php
// Filename state_info.php
?>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>State Information</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/table.state_info.js"></script>
<style>
div.desktopContainer {
width: auto;
margin-left: 90px;
margin-right: 90px;
}
</style>
</head>
<body class="dataTables">
<div class="desktopContainer">
<h2>State Information</h2>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="state_info" width="100%">
<thead>
<tr>
<th>Id</th>
<th>User Id</th>
<th>State Name</th>
<th>State Information</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
