To create a table with client side pagination, inline filtering and other dynamic goodies you first need to include some Javascript files. The Reporta dynamic tables use <%= link_to 'DataTables', 'http://datatables.net/index' %> under the hood so anything you can do with DataTables you can do here as well.
If you don't already have it you will need a copy of <%= link_to 'jQuery', 'http://jquery.com/' %> and <%= link_to 'DataTables', 'http://datatables.net/download/' %> in your app/assets/javascripts directory
In your application.js file make sure you have the following lines in this order:
#= require jquery
#= require jquery.dataTables
#= require reporta/dataTables
Now the dependencies are loaded we can display the report below like this:
<%%= filters_for(@report) %>
<%%= table_for(@report, class_name: 'table') %>
<script type="text/javascript" charset="utf-8">
$(function() {
new Reporta.DynamicTable('.table');
});
</script>
The only difference between this and the <%= link_to 'Basic Table', '/table' %> is we added the extra Javascript that is called after the page is loaded to make the table dynamic.
Note: As we are using Bootstrap here on the demo page the styling below is not quite right. It should look more like a deafult DataTable on your page. If you are using Bootstrap checkout the <%= link_to 'Dynamic Table With Bootstrap', '/dynamic_table_with_bootstrap' %> page.