Forum for discussing general topics related to Couch.
5 posts Page 1 of 1
Doesn't take much effort to integrate DataTable into backend, thanks to latest and greatest themeing support by CouchCMS.

2017-10-07-103433.png
2017-10-07-103433.png (66.36 KiB) Viewed 2514 times


1-letter filtering across any column, order easily by any column, pdf/xls/csv export, zero-latency pagination etc. Nice and awesome :) If anyone interested, I'll provide a tutorial and necessary files.
Looks great :)
Please do share the complete tutorial.

One question - how does it hold up with a large number of pages (say 50K-100K - not unusual to see this nowadays)?
KK wrote: One question - how does it hold up with a large number of pages (say 50K-100K - not unusual to see this nowadays)?

Valid question. Anything over 1k elements in DOM will be slower than tolerable 2-3sec to load. Tests show 200-300 records feels okay - not many, but 30 pages per 10 records load fast enough.

Properly addressing the matter would be a combination of 'deferred' loading as in this sample https://datatables.net/reference/option/deferLoading and a 'pipeline' as in this sample https://datatables.net/examples/server_ ... eline.html
Thus, first batch of, say, 100 records (10 pages per 10 records) will be preloaded in html and the rest will be requested via Ajax when user happens to request a page that is not cached. Such request will be served by server, replacing cache with another 100 records.

So, Ajax and serverside (vs clientside) processing is requred for any medium-large number of pages. I suppose, ajax-related code can be placed in some snippet, like /theme/my/main.hml or some other, to avoid creating a separate template for ajax calls.
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.
Datatable code and live sample viewtopic.php?f=8&t=11739
5 posts Page 1 of 1