Intro

Art Table - Data Table Plugin allows you to wrap an HTML table on your site with the shortcode {arttable_datatable}your HTML table here{/arttable_datatable} and have it transformed into a elegant, dynamic sortable, paginated table.

Using the shortcode

The usecase is that you already have a plain, old, regular HTML table on your site but you want to spice it up. Make it dynamic. How do you do it?

With this plugin it's simple. Just wrap your HTML table in {arttable_datatable}your HTML table here{/arttable_datatable}

Examples

                
                  {arttable_datatable}<table>
                      <thead>
                          <tr>
                              <th>header1</th>
                              <th>header2</th>
                              <th>header3</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                      </tbody>
                  </table>{/arttable_datatable}                    
                
              

                
                  {arttable_datatable loadCSS="bootstrap"}<table class="table table-bordered table-striped">
                      <thead>
                          <tr>
                              <th>header1</th>
                              <th>header2</th>
                              <th>header3</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                      </tbody>
                  </table>{/arttable_datatable}                    
                
              

                
                  {arttable_datatable loadCSS="uikit"}<table class="uk-table uk-table-striped">
                      <thead>
                          <tr>
                              <th>header1</th>
                              <th>header2</th>
                              <th>header3</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                          <tr>
                              <td>value</td>
                              <td>value</td>
                              <td>value</td>
                          </tr>
                      </tbody>
                  </table>{/arttable_datatable}                    
                
              

Shortcode Params

Parameter	Purpose	Use
loadCSS	Load UIKit or Bootstrap.	{arttable_datatable loadCSS="bootstrap"}

Editors

When using an editor such as TinyMCE, the editor sometimes injects <p> tags around the {arttable_datatable} tag so that in the article content, the html ends up looking like this:

<p>{arttable_datatable}</p>

Even if you try to manually remove the HTML code in the editor, it still will inject the <p> tags. This is problematic because it breaks your table's HTML syntax.

The following work-arounds can remedy this issue until we update the extension:

1. In the administrator area of your Joomla installation locate the Plugin Manager and search for TinyMCE then click to open the plugin. Change the property “New Lines” from the value of “P Elements” to “BR elements”. DOMDocument does not seem to choke on unpaired </br> elements like it does on </p> elements within the payload. The properties page in the TinyMCE Plug-in has three sets of properties called Set 2, Set 1, and Set 0. You may, depending on who is permitted to edit documents on a site, have to change the “New Lines” value in each of the sets.
2. Use a different editor that doesn’t automatically inject unwanted paragraph tags into your content.
3. In the future we may consider adding some code to the Plugin to strip all unwanted paragraph tags that may be added between {arttable_datatable} shortcodes.

URL Query String Search

You can search the table dynamically on page load by placing the "search" parameter into the URL as a query string appended to your current url.

Example

http://somewebsite.com/index.php?option=com_content&view=article&id=1&search=mysearchstring