Welcome to JsDataTable
JsDataTable is a lightweight plugin for wordpress, that presents interactive and sortable DataTables on websites. For this purpose your existing wordpress posts act as the data source, from where data is retrieved from. Different data fields from a wordpress post will appear each other as column within the DataTable . You apply your usual wordpress categories or wordpress tags as your criteria to limit the number of shown records in the table. All columns can be customized by a lot of options. The data source is not restricted to default post fields, it can also be retrieved from wordpress custom post fields into the columns. Use the [jsdatatable]-shortcode to pull your information from your wordpress database to present them within a DataTable on your webpage. Further information, live examples and the full set of options for this shortcode you get here on this website.
The plugin JsDataTable is also prepared to show the naked content of a wordpress post within a beautiful modal. Just by clicking on a link in the table, the modal appears. This means a wordpress post content appears in the modal without any menus, headers, sidebars and without a footer, only the content goes onto the screen. Determine further information about this approach in the article Add-On’s and see the instruction how you could prepare your setup to support modals.
Check out the following nice example, a DataTable could look like this…
Each row in the following DataTable is a single wordpress post in the database and represents a vehicle. In this example each wordpress post contains a mix of some wordpress default fields (like title, content, picture,…) and in addition some custom post fields (like Manufacturer, Logo, Model, Vehicle, Country, Year,…). There are 62 posts in the database, therefrom 40 cars within the wordpress category “Car” and 22 motorbikes within the wordpress category “Motorbike“. Each post is also allocated to the wordpress category “Vehicle“. So we can play around a bit now.
You will get this DataTable output by using following shortcode:
[jsdatatable CATEGORY=Vehicle COLS=Logo,title,Vehicle,Country,Year ORDERBY=Year ORDER=dsc]