Community
Products
Confluence
Questions
Confluence macro for data table paging (bonus: with filtering)

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

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/

4 answers

1 accepted

0 votes

Answer accepted

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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

what macro metadata do you use?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Like • Ibrahiem Mohammad likes this

2 votes

Hello Austin,

There are no macros for table paging, but there is Table Filter macro that allows you to filter tables. Also it has Freeze first N rows feature that you may find useful. See it in action here.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Table Filter looks impressive.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Like • 우성운 likes this

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

The pagination feature is available in the latest version 5.4.0 of Table Filter and Charts.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Like • like this

0 votes

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.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

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

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

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?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

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

4 answers

1 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events

Ask a question

Start a discussion

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

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

4 answers

1 accepted

Suggest an answer

Was this helpful?

Thanks!

TAGS

Atlassian Community Events