Documentation v3.0.16

Server-side processing Quick Start

The sample server-side processing uses the Express framework and a MariaDB database.
  1. Download the latest server-side processing here.
  2. Unzip the downloaded sample-server.zip. 
    unzip sample-server.zip
  3. Go to the unzipped sample-server directory and install the dependent packages. 
    cd sample-server/
npm install
  4. After building the MariaDB database, set the DB connection user and password in the sample-server/.env file. 
    PORT=3000
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=
  5. Create a database and tables in MariaDB. 
    CREATE DATABASE IF NOT EXISTS metronic_db DEFAULT CHARACTER SET utf8mb4;
USE metronic_db;

CREATE TABLE folder (
  id int unsigned NOT NULL AUTO_INCREMENT,
  parent int unsigned DEFAULT NULL COMMENT 'For the root folder, it is NULL because there is no parent folder.',
  `text` varchar(20) NOT NULL,
  PRIMARY KEY (id),
  UNIQUE KEY ukFolderText (parent, `text`),
  CONSTRAINT fkFolderParent FOREIGN KEY (parent) REFERENCES folder (id) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE file (
  id int unsigned NOT NULL AUTO_INCREMENT,
  folderId int unsigned NOT NULL,
  `text` varchar(20) NOT NULL,
  PRIMARY KEY (id),
  UNIQUE KEY ukFileText (folderId, `text`),
  CONSTRAINT fkFileFolder FOREIGN KEY (folderId) REFERENCES folder (id) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

CREATE TABLE person (
  id int unsigned NOT NULL AUTO_INCREMENT,
  name varchar(20) NOT NULL,
  position varchar(50) NOT NULL,
  office varchar(50) NOT NULL,
  age tinyint unsigned NOT NULL,
  startDate date NOT NULL,
  salary decimal(10,2) NOT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  6. Add sample data for the Tree component to the folder and file tables. 
    INSERT INTO folder(id, parent, `text`) VALUES
  (1, NULL, 'Root'),
  (2, 1, 'Child1'),
  (3, 1, 'Child2');

INSERT INTO file(folderId, `text`) VALUES
  (2, 'GrandChild1');
    The following Tree structure appears in the tree component. 
    Root/
├── Child1
│   └── GrandChild1
└── Child2
  7. Add sample data for the DataTable to the person table. 
    INSERT INTO person(name, position, office, age, startDate, salary) VALUES
('Tiger Nixon','System Architect','Edinburgh',61,'2011/04/25',320800),
('Garrett Winters','Accountant','Tokyo',63,'2011/07/25',170750),
('Ashton Cox','Junior Technical Author','San Francisco',66,'2009/01/12',86000),
('Cedric Kelly','Senior Javascript Developer','Edinburgh',22,'2012/03/29',433060),
('Airi Satou','Accountant','Tokyo',33,'2008/11/28',162700),
('Brielle Williamson','Integration Specialist','New York',61,'2012/12/02',372000),
('Herrod Chandler','Sales Assistant','San Francisco',59,'2012/08/06',137500),
('Rhona Davidson','Integration Specialist','Tokyo',55,'2010/10/14',327900),
('Colleen Hurst','Javascript Developer','San Francisco',39,'2009/09/15',205500),
('Sonya Frost','Software Engineer','Edinburgh',23,'2008/12/13',103600),
('Jena Gaines','Office Manager','London',30,'2008/12/19',90560),
('Quinn Flynn','Support Lead','Edinburgh',22,'2013/03/03',342000),
('Charde Marshall','Regional Director','San Francisco',36,'2008/10/16',470600),
('Haley Kennedy','Senior Marketing Designer','London',43,'2012/12/18',313500),
('Tatyana Fitzpatrick','Regional Director','London',19,'2010/03/17',385750),
('Michael Silva','Marketing Designer','London',66,'2012/11/27',198500),
('Paul Byrd','Chief Financial Officer (CFO)','New York',64,'2010/06/09',725000),
('Gloria Little','Systems Administrator','New York',59,'2009/04/10',237500),
('Bradley Greer','Software Engineer','London',41,'2012/10/13',132000),
('Dai Rios','Personnel Lead','Edinburgh',35,'2012/09/26',217500),
('Jenette Caldwell','Development Lead','New York',30,'2011/09/03',345000),
('Yuri Berry','Chief Marketing Officer (CMO)','New York',40,'2009/06/25',675000),
('Caesar Vance','Pre-Sales Support','New York',21,'2011/12/12',106450),
('Doris Wilder','Sales Assistant','Sydney',23,'2010/09/20',85600),
('Angelica Ramos','Chief Executive Officer (CEO)','London',47,'2009/10/09',1200000),
('Gavin Joyce','Developer','Edinburgh',42,'2010/12/22',92575),
('Jennifer Chang','Regional Director','Singapore',28,'2010/11/14',357650),
('Brenden Wagner','Software Engineer','San Francisco',28,'2011/06/07',206850),
('Fiona Green','Chief Operating Officer (COO)','San Francisco',48,'2010/03/11',850000),
('Shou Itou','Regional Marketing','Tokyo',20,'2011/08/14',163000),
('Michelle House','Integration Specialist','Sydney',37,'2011/06/02',95400),
('Suki Burks','Developer','London',53,'2009/10/22',114500),
('Prescott Bartlett','Technical Author','London',27,'2011/05/07',145000),
('Gavin Cortez','Team Leader','San Francisco',22,'2008/10/26',235500),
('Martena Mccray','Post-Sales support','Edinburgh',46,'2011/03/09',324050),
('Unity Butler','Marketing Designer','San Francisco',47,'2009/12/09',85675),
('Howard Hatfield','Office Manager','San Francisco',51,'2008/12/16',164500),
('Hope Fuentes','Secretary','San Francisco',41,'2010/02/12',109850),
('Vivian Harrell','Financial Controller','San Francisco',62,'2009/02/14',452500),
('Timothy Mooney','Office Manager','London',37,'2008/12/11',136200),
('Jackson Bradshaw','Director','New York',65,'2008/09/26',645750),
('Olivia Liang','Support Engineer','Singapore',64,'2011/02/03',234500),
('Bruno Nash','Software Engineer','London',38,'2011/05/03',163500),
('Sakura Yamamoto','Support Engineer','Tokyo',37,'2009/08/19',139575),
('Thor Walton','Developer','New York',61,'2013/08/11',98540),
('Finn Camacho','Support Engineer','San Francisco',47,'2009/07/07',87500),
('Serge Baldwin','Data Coordinator','Singapore',64,'2012/04/09',138575),
('Zenaida Frank','Software Engineer','New York',63,'2010/01/04',125250),
('Zorita Serrano','Software Engineer','San Francisco',56,'2012/06/01',115000),
('Jennifer Acosta','Junior Javascript Developer','Edinburgh',43,'2013/02/01',75650),
('Cara Stevens','Sales Assistant','New York',46,'2011/12/06',145600),
('Hermione Butler','Regional Director','London',47,'2011/03/21',356250),
('Lael Greer','Systems Administrator','London',21,'2009/02/27',103500),
('Jonas Alexander','Developer','San Francisco',30,'2010/07/14',86500),
('Shad Decker','Regional Director','Edinburgh',51,'2008/11/13',183000),
('Michael Bruce','Javascript Developer','Singapore',29,'2011/06/27',183000),
('Donna Snider','Customer Support','New York',27,'2011/01/25',112000);
  8. Start the local host server. The server will continue to run on port 3000. To stop, press Ctrl+C. 
    npm start

Server Side API Reference

API provided by the sample server-side processing.
HTTP Method Endpoint Description
GET /api/tree/:parent_folder_id Get a list of folders in the tree.
Path Parameters:
  • parent_folder_id: number|'#' Parent folder ID, "#" if the parent folder is the root node.
Response Body:
  • parent: number|'#'|null Parent folder ID, '#' if the parent folder is the root node. If it is the root node itself, it is null because there is no parent folder.
  • type: 'folder'|'file' The node type (folder or file).
  • text: string Node Name.
  • id: number Node ID.
  • children: boolean|1|0|'1'|'0' True if there is a child node, false if there is not. Also, a numeric or letter '1' is treated as true and a '0' as false in the Tree component.
POST /api/tree/folder/:parent_folder_id Create a folder in the tree.
Path Parameters:
  • parent_folder_id: number Parent folder ID.
Request Body:
  • text: string Folder Name.
Response Body:
  • id: number ID of the created folder.
DELETE /api/tree/folder/:folder_id Delete a folder in the tree.
Path Parameters:
  • folder_id: number Folder ID.
PUT /api/tree/folder/:folder_id Rename a folder in the tree.
Path Parameters:
  • folder_id: number Folder ID.
Request Body:
  • text: string Folder Name.
POST /api/tree/file/:parent_folder_id Create an element in a tree folder.
Path Parameters:
  • parent_folder_id: number Parent folder ID.
Request Body:
  • text: string File Name.
Response Body:
  • id: number ID of the file node created.
DELETE /api/tree/file/:file_id Delete an element in a tree folder.
Path Parameters:
  • file_id: number File node ID.
PUT /api/tree/file/:file_id Rename an element in a tree folder.
Path Parameters:
  • file_id: number File node ID.
Request Body:
  • text: string File Name.
GET /api/persons/pages Get person page data.
Query Parameters:
  • start: number Starting point of the current data set (0 index base, i.e., 0 is the first record).
  • length: number The number of records the table can display.
  • order: string Columns to be ordered.
  • dir: string Direction of sorting. It will be asc or desc, indicating ascending or descending order, respectively.
  • draw: number A drawing counter. Used to ensure that responses from the server are drawn in sequence.
Response Body:
  • data: object[] The data to be displayed in the table.
  • recordsTotal: number Total records, before filtering.
  • recordsFiltered: number Total records, after filtering.
  • draw: number Draw counter sent by the client.