Confluence macro for data table paging (bonus: with filtering)
Asked by Austin:

Is there a macro that allows paging on a long table of data? I have about 400 rows of data that I want to page 10-20 at a time, and ideally with filtering

My ideal scenario is to have an interface to the jquery DataTables plugin, but I haven't found anything that implements that specific plugin in Confluence. Are there any macros that provide paging? Ideally with some of the other features DataTables provides

For reference <https://datatables.net/>


Answers:
author: Austin
body: For anyone looking to do this in the future, this should work with any Confluence table. Your table will need a unique ID. It will also need a Header row, otherwise \<th\> elements are not drawn and you will have to rewrite the javascript to select the first \<tr\> and change it.

1) Load alternate jQuery, load DataTables using alt jQuery, store alt jQuery using noconflict. Place the following code in the Custom HTML \<head\>

```
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css"> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript">jQueryAlt = jQuery.noConflict(true);</script>

```

2) Create user macro, Rendered body

```
<script type="text/javascript">
jQueryAlt(document).ready( function () {
 jQueryAlt('#$body').removeClass('appfire-table-plus-parms');
 t = jQueryAlt('table#$body');
 firstTr = t.find('tbody tr:first').remove();
 firstTr.find('th').contents().unwrap().wrap('<th>');
 t.prepend(jQueryAlt('<thead></thead>').append(firstTr))
 jQueryAlt('#$body').dataTable();
});
</script>
```

3) Call your user macro from step 2 and place your table ID in the macro body.

comments: author: Ibrahiem Mohammad
body: what macro metadata do you use?


author: Austin
body: I'm not super familiar with what constitutes metadata, but I use no parameters - just the $body variable that contains the id of the table. I suppose you could make that a parameter instead, but $body works for me.


author: Andrey Khaneev _StiltSoft_
body: Hello Austin,

There are no macros for table paging, but there is [Table Filter](https://marketplace.atlassian.com/plugins/com.stiltsoft.confluence.plugin.tablefilter.tablefilter/cloud/overview) macro that allows you to filter tables. Also it has [Freeze first N rows feature](https://docs.stiltsoft.com/display/TableFilter/Managing+Look+of+the+Table+and+Filtration+Pane#ManagingLookoftheTableandFiltrationPane-FreezingFirstNRows/Columns) that you may find useful. See it in action [here](https://demo.stiltsoft.com/display/tblfilter/Managing+Look+of+Tables?os_username=guest1&os_password=guest1).

comments: author: richardofrugeley
body: Table Filter looks impressive.


author: nyoungb2
body: It seem that the "Freeze first N rows" feature literally just shows the first N rows, which is not pagination. Pagination allows the user to view all table rows, just it a way that prevents the browser from slowing way down with big tables. I'm really surprised that table pagination isn't integrated into Confluence tables. Table pagination is basically required for big tables, and tools like <https://datatables.net/> recognize that.

Without pagination, I don't see how anyone can effectively work with large tables on Confluence


author: Andrey Khaneev _StiltSoft_
body: This option makes large tables to occupy small space on the page, that makes it easier to navigate through and edit the page. It doesn't improve page load time.


author: Natalie Paramonova [Stiltsoft]
body: The [pagination feature](https://docs.stiltsoft.com/display/TFAC/Sorting%2C+freezing+and+other+table+viewing+options#Sorting,freezingandothertableviewingoptions-Addpaginationtotables) is available in the latest [version 5.4.0](https://docs.stiltsoft.com/display/public/TFAC/Table+Filter+and+Charts+5.4.0) of [Table Filter and Charts](https://marketplace.atlassian.com/apps/27447/table-filter-and-charts-for-confluence?hosting=server&tab=overview).

![pagination3.png](https://community.atlassian.com/t5/image/serverpage/image-id/104352iD55D0171D7E632C5/image-dimensions/629x412?v=v2 "pagination3.png")


author: weweave UG
body: Although this post is quite old, we would like to let you know that we developed the app "DataTables for Confluence" (see <https://marketplace.atlassian.com/apps/1220302/datatables-for-confluence>) for Confluence Cloud which adds DataTables features (such as filtering / full-text search) to native Confluence tables.


author: Austin
body: I decided to try and do it myself.

I'm using Bob Swift SQL Query to pull data from database

I've added the DataTables CDN CSS and JS to my Custom HTML head. That is working.

I created a user macro to inject the javascript before my table:

```
<script type="text/javascript">
AJS.toInit(function(){
 AJS.$('#table-id').dataTable();
});
</script>
```

and set my table ID in Bob Swift SQL Query.

It looks like DataTables is initializing the table correctly as it is adding classes, aria- data, etc to my table HTML. The DataTables CSS is applying to the table as well. However, none of the DataTables functions appear to be working, and I think it has something to do with Confluence adding its own appfire-table-plus JavaScript right after my own. How do I suppress the default table formatting, or how can I render my own table HTMLin a user macro? I have a feeling that you can't do it in a User macro but I hope I can get this done without creating my own Java plugin

comments: author: Austin
body: I've made progress, had to load a second version of jQuery, I think I have everything working properly now EXCEPT:

DataTables requires a well-formed html table, including \<thead\> with \<th\> and \<tbody\> with \<tr\>. Confluence doesnt use \<thead\>, instead placing the header \<th\> elements in \<tbody\>. This is probably something to ask in a new question, but how do I get confluence to return a "proper" html table?


Tags: macro

table