Let's see in action a DataTable.
1.
theme/main.html needs some new CSS for clonable templates
- Code: Select all
<cms:if k_template_is_clonable >
<link href="<cms:show k_theme_link />assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="<cms:show k_theme_link />assets/css/dt.css" rel="stylesheet" type="text/css">
</cms:if>
2.
main.html also needs JS scripts, placed after regular js-'includes' block in <head>.
- Code: Select all
<cms:if k_template_is_clonable >
<script type="text/javascript" src="<cms:show k_theme_link />assets/js/plugins/tables/datatables/datatables.min.js"></script>
<script type="text/javascript" src="<cms:show k_theme_link />assets/js/plugins/forms/selects/select2.min.js"></script>
<script type="text/javascript" src="<cms:show k_theme_link />assets/js/plugins/tables/datatables/extensions/jszip/jszip.min.js"></script>
<script type="text/javascript" src="<cms:show k_theme_link />assets/js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="<cms:show k_theme_link />assets/js/plugins/tables/datatables/extensions/pdfmake/vfs_fonts.min.js"></script>
<script type="text/javascript" src="<cms:show k_theme_link />assets/js/plugins/tables/datatables/extensions/buttons.min.js"></script>
<script type="text/javascript" src="<cms:show k_theme_link />assets/js/pages/datatables_basic.js"></script>
</cms:if>
Now, each clonable template will use
main.html from our custom theme and therefore datatables will be rendered.
DataTable will load data from DOM - complete dataset will be present in generated HTML.
3. Some very minor changes in
content_list_inner.html:
a. wrap existing table into a hidden div, so page rendering will occur in background and we'll show it once datatable has changed the look of the source table.
b. add 'datatable-basic' class to the table
<div id="table-wrap" style="display: none">
<table class="table table-primary table-list datatable-basic" >
...
</table>
</div>
c. put a new limit to the 'cms:pages' that covers amount of your pages in a single template:
limit = '1000'
d. we don't need default pagination, since DT has its own pagination. Remove following block:
- Code: Select all
<cms:if k_paginated_bottom >
<cms:set my_paginator="<cms:render 'paginator' />" 'parent' />
</cms:if>
At this point, the datatable should work just fine. But I also mod the look and sorting options:
4. DT supports column sorting, and to make sure sort by date is perfect we'll add to each cell with publish_date a "data-sort" html parameter. Modify
list_row.html snippet to
- Code: Select all
<cms:admin_list_fields>
<cms:if k_field_name eq 'k_page_date' >
<td class="col-<cms:show k_field_class />" data-sort="<cms:date k_page_date format='U' />">
<cms:show k_field_content />
</td>
<cms:else />
<td class="col-<cms:show k_field_class />">
<cms:show k_field_content />
</td>
</cms:if>
</cms:admin_list_fields>
5. Modify
list_header.html to reflect columns that are not meant to be sortable. Also removing links from headers, complete listing is as follows:
- Code: Select all
<cms:admin_list_fields headers='1'>
<th class="col-<cms:show k_field_class />"
<cms:if k_field_name eq 'k_selector_checkbox' || k_field_name eq 'k_comments_count' || k_field_name eq 'k_actions'> data-orderable="false"</cms:if>
>
<cms:show k_field_header />
</th>
</cms:admin_list_fields>
It is clear to anyone remotely familiar with themeing available in Couch 2.0, that it takes 15 mins max to set up a datatable and it was maybe an hour or two to get together various pieces.