WP Data Access allows users to create relationships between data tables. One table acts as the master table and another as the detail table. When the user clicks on a row of the master table, the detail table is automatically updated to reflect the relationship.
Example #
Suppose our database contains a department and an employees table. When the user clicks on a row in the department table, the employees for the selected department are shown.
For this example we need to create two data tables. One for table departments and one for table employees. Both data tables are shown on the same page. The departments table is shown above the employees table.
To connect the tables to each other we need to add two functions to the departments (master) table in the following format:
Advanced options
Function wpda_init_master_detail initializes the master-detail relationship and has the following parameters:
{
"initComplete": "function( settings, json ) { wpda_init_master_detail( settings, json, pubId, detailTableName, masterColumnName, detailColumnName ) }",
"drawCallback": "function( settings ) { wpda_nav_master_detail( settings, pubId, detailTableName ) }",
"select": {
"style": "single"
}
}
settings | taken from initComplete |
json | taken from initComplete |
pubId | id of the detail data table |
detailTableName | table name of the detail table |
masterColumnName | column name of the master table used for relationship (arrays are supported for multi column) |
detailColumnName | column name of the detail table used for relationship (arrays are supported for multi column) |
Function wpda_nav_master_detail adds the navigation and has the following parameters:
settings | taken from drawCallback |
pubId | id of the detail data table |
detailTableName | table name of the detail table |
Inline demo #
Click a department to sync the employees table.
Deptno (key) | Dname | Loc |
---|---|---|
Deptno (key) | Dname | Loc |
Empno (key) | Ename | Job | Mgr | Hiredate | Sal | Comm | Deptno |
---|---|---|---|---|---|---|---|
Empno (key) | Ename | Job | Mgr | Hiredate | Sal | Comm | Deptno |
Here are my advanced options used for the inline demo
{
"initComplete": "function( settings, json ) { wpda_init_master_detail( settings, json, 28, 'emp', ['deptno'], ['deptno'] ) }",
"drawCallback": "function( settings ) { wpda_nav_master_detail( settings, 28, 'emp' ) }",
"select": {
"style": "single",
"selector": "tr"
},
"pageLength": 2
}
Notes #
- Responsive master-detail pages do not require page updates
- Supported with client-side and server-side processing
- Supporting multiple column relationships (array size masterColumnName = array size detailColumnName)
- This features requires a premium license