Welcome to JsDataTable
JsDataTable is a lightweight wordpress plugin, that presents interactive and sortable DataTables on wordpress websites. For this purpose your existing wordpress posts act as the data source, from where your table data is retrieved from. Different fields from a wordpress post will appear each other as columns within the DataTable . You apply your usual wordpress categories or wordpress tags as your criteria to limit the number of shown records inside your table. The DataTable columns can be customized by a lot of options. The source fields are not restricted to the default fields of a wordpress post, the data 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 the shortcode you get here on this website.
The plugin is also prepared to show just the naked content of a wordpress post within a beautiful modal. Just by clicking on a link in the table, the modal appears. That means a the post content appears inside the modal without any menus, headers, sidebars and footer, only your 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 naked modals.
Check out the following example with some cars & motorbikes. This is how a DataTable works and how it could look like…
Each row in a DataTable represents a single wp post.
And each wp post of course contains wp default fields (title, content, picture,…) and in addition some individual wp custom post fields (Manufacturer, Logo, Model, Vehicle, Country, Year,…). In total now we get 62 wp posts out of the database, therefrom 40 cars within the wp category “Car“. And 22 motorbikes belong to the wp category “Motorbike“. And each of this 62 wp posts is also allocated to the wp category “Vehicle“. With this mockup content we can now play around a bit .
We get the following table output by using the shortcode “jsdatatable” combined with the parameters “category”, “cols”, “orderby” and “order”:
[[jsdatatable CATEGORY=Vehicle COLS=Logo,title,Vehicle,Country,Year ORDERBY=Year ORDER=dsc]]
[jsdatatable cat=Vehicle cols=Logo,title,Vehicle,Country,Year orderby=Year order=dsc]