Javascript API
This page documents the Javascript API for WooCommerce Product Table.
The ProductTable object
Each table is represented in Javascript by a ProductTable object. The main properties are:
id- The table ID assigned to the <table> element.config- The configuration object used to initialise the table.$table- A jQuery object representing the <table> element.$tableWrapper- A jQuery object representing the wrapper <div> around the table.$filters- A jQuery object of the search filters (if used). This set contains each of the <select> elements for the filters.ajaxData- If using lazy load, this will contain the data returned from the server in JSON format.
Events
- There are various events triggered by the plugin, during the lifetime of each product table.
Most events are passed the ProductTable object, which you can use to read certain data from the table.
init.wcpt
This event is triggered once for each table, after it has been fully initialised and all data has been loaded and drawn in the table.
Parameters: table - The ProductTable instance.
draw.wcpt
This event is triggered once for each table 'draw'. A draw is any event which changes the appearance of the table. There is one draw when the table is first loaded, and subsequent draws occur whenever the table is re-ordered, a new page of results is selected, when the filters are changed, when a search is carried out, etc.
Parameters: table - The ProductTable instance.
lazyload.wcpt
If using lazy load, this event is triggered each time the data in the table is updated. For example, when scrolling through each page of results, or re-ordering the table. This occurs before the draw.wcpt event.
Parameters: table - The ProductTable instance.
load.wcpt
This event is triggered once for each table, on the window.load event.
Parameters: table - The ProductTable instance.
responsiveDisplay.wcpt
This event is triggered whenever the 'responsive' child row or modal window is opened for a row in the table. This happens when the user clicks the + icon at the start of the row. The event is only triggered when the child row is shown (not hidden).
Parameters:
table - The ProductTable instance.
childRow - A jQuery object representing the child row <tr> element.
lazyload.wcpt
If using lazy load, this event is triggered each time the data in the table is updated. For example, when scrolling through each page of results, or re-ordering the table. This occurs before the draw.wcpt event.
Parameters: table - The ProductTable instance.
adding_to_cart
This event is triggered when a product is about to be added to the cart, after the 'Add to basket' button has been clicked. This event is also triggered (once) when adding multiple products to the cart using checkboxes.
Parameters:
$button - A jQuery object of the add to cart button.
data - The cart data (product ID, quantity, etc).
added_to_cart
This event is triggered when a product has been added to the cart, after the 'Add to basket' button has been clicked. This event is also triggered (once) when adding multiple products to the cart using checkboxes.
Parameters:
fragments - The cart fragments returned from WooCommerce (see WooCommerce docs or code for more info).
cart_hash - The cart hash returned from WooCommerce.
$button - A jQuery object of the add to cart button.