Example #
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.
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