View Categories

Responsive master-detail

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)DnameLoc
Deptno (key)DnameLoc

Empno (key)EnameJobMgrHiredateSalCommDeptno
Empno (key)EnameJobMgrHiredateSalCommDeptno

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