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

Austin_1rsnpy

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/

Austin_1rsnpy

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.