WP Data Access
  • Download
  • Support
  • Features
  • Pricing
  • Documentation
Select Page
Popular Search importsqlformqueryexport

WP Data Access

  • Getting started
  • Installation
  • What’s new?
  • Patches
  • Known limitations
  • FAQ

Data Tables

  • Getting Started
  • Creating and publishing
  • Responsive data tables
  • SEO friendly data tables
  • Adding hyperlinks
  • Extension Manager
  • Style Manager
  • Language settings
Styling
  • Style Manager
  • Premium styling
  • Global styling
  • Code Manager Styling
  • Manual styling
  • Styling issues
Filters
  • Static filters
  • Interactive filters
    • URL parameters
    • Search Panes
    • Search Builder
    • Search form
    • Advanced search
    • Geolocation search
Export & other buttons
  • Export to PDF, CSV, Excel, SQL
  • Print & copy buttons
  • Column selection buttons
  • Custom buttons
Advanced features
  • Advanced settings
  • Large tables & performance
  • Progressively SHOW MORE
  • Custom queries
  • Custom Post Types
  • Row grouping
  • Responsive master-detail
  • Master-detail tables
  • Non admin user access
Demos & tutorials
  • Demos
  • Tutorials

Data Apps

  • Data Projects
  • Projects and templates
  • Supported Data Types
  • One-To-Many relationships
  • Many-To-Many relationships
  • Registration page
  • Manage table options
  • Shortcode usage
Project Templates
  • Project Templates
  • Creating templates
  • Table Settings
  • Relationships
  • List Table
  • Data Entry
  • Reconcile
Data Forms
  • Data Forms
  • Overview
  • Project Demo
  • Page Demo
Advanced features
  • Adding filters
  • Custom validation
  • Add less/more button
  • User roles
  • Managing roles and users
  • Advanced table options
  • Advanced lookups
  • Front-end toolbar
  • Transfer to other WP site
Demos & tutorials
  • Demos
  • Tutorials

Data Explorer

  • Getting started
  • Navigation
  • Explore tables & views
  • Manage tables & views
  • Naming conventions
Manage Actions
  • Actions
Manage Settings
  • Settings
  • Search Settings
  • Geolocation Settings
  • Table Settings
  • Column Settings
  • Dynamic Hyperlinks
  • Dashboard Menus
Data Management
  • Import CSV & SQL files
  • Run SQL script files
  • Data Backup
Problems & solutions
  • InnoDB #rows estimation
  • Import file too large
  • Transfer to other WP DB

Remote Databases

  • MySQL | MariaDB
Other DBMS
  • Heterogeneous Connections
  • Using ODBC | JDBC
  • Connect to SQL Server
Premium Data Services
  • Remote wizard
  • START HERE
  • Errors and messages
  • Limitations
  • Tutorials
  • Remote Databases
    • Remote databases
    • SQL Server
    • PostgreSQL
    • Oracle
    • MariaDB | MySQL
    Remote Data Files
    • Remote data files
    • CSV files
    • JSON files
    • MS Access
    • XML files
    • Public URL
    • Synchronization
    Advanced features
    • Performance
    • Indexes

SQL

  • Getting Started
  • Tutorials
  • Visual Query Builder
  • Writing queries
  • Data exchange
  • Stored procedures
  • Database triggers
  • Scheduled queries

Business Intelligence

  • Getting started
  • Dashboards
  • Sharing dashboards
Dashboards Widgets
  • Dashboard Widgets
  • Publication Widget
  • Project Widget
  • Chart Widget
  • Custom Code Widget
  • Database Widget
  • Sharing Widgets

Table Design

  • Getting started
  • Introduction
  • Basic mode

Plugin Settings

  • Getting started
  • Plugin
  • Back-end
  • Front-end
  • Dashboard
  • Data Forms
  • Data Tables
  • Data Backup
  • Uninstall
  • Manage Repository
  • Manage Roles
  • System Info

Code

Shortcodes
  • Overview
  • wpdataaccess
  • wpdadataproject
  • wpdadataforms
  • wpdadiehard
  • wpdageomap
  • wpdawidget
Hooks & filters
  • Overview
  • Hooks
    • Overview
    • wpda_add_search_actions
    • wpda_add_search_filter
    • wpda_before_list_table
    • wpda_after_list_table
    • wpda_wpdataaccess_prepare
    Filters
    • Overview
    • wpda_column_default
    • wpda_before_simple_form
    • wpda_after_simple_form
    • wpda_construct_where_clause
API
  • WP Data Access API
  • Remote database access
  • CRUD Example
  • Extensions
    • Alternative search algorithm
    • Alternative buttons extension
Code Manager
  • Overview
  • Write code
  • Share(d) code

Responsive master-detail

Table of Contents
  • Example
  • Inline demo
  • Notes
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
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on 2023-01-14
Row groupingMaster-detail tables

Submit a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Table of Contents
  • Example
  • Inline demo
  • Notes

Links

Blogs
Tutorials
Demos

Socials

LinkedIn
Twitter

Get in touch

Premium support
Free support forum
Contact us

Resources

WordPress plugin directory
YouTube tutorials

Passionate Programmers B.V. © 2017 - 2023 All rights reserved