Forum for discussing general topics related to Couch.
4 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 169 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.

Create a simplest clonable template, it doesn't need to have much:
Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='DataTable in admin' clonable='1' >
    <cms:smart_embed 'editables' />
</cms:template>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <cms:smart_embed 'datatable' debug=mydebug />
</body>
</html>

<?php COUCH::invoke(); ?>


Code in 'snippets/datatable/home.html' is also very simple - if no pages exist, create 300 random pages.
Code: Select all
<h2>List of pages</h2>
<ol>
    <cms:pages show_future_entries='1' skip_custom_fields='1' >
        <li>
            <a href="<cms:show k_page_link />">
                <cms:show k_page_title />
            </a>
        </li>
        <cms:no_results>
            <cms:repeat count='300' startcount='1'>
                <cms:db_persist _masterpage=k_template_name _mode='create' k_page_title = "<cms:excerpt trail='' count='5' truncate_chars='1' ><cms:random_name /></cms:excerpt>" />
            </cms:repeat>
            <cms:redirect k_template_link />
        </cms:no_results>
    </cms:pages>
</ol>



Next, we change default admin list view by modifying some snippets in an active custom theme (couch/theme/your-theme-folder).
1. main.html needs some new CSS (files are attached) for clonable templates, placed in appropriate location
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 in this sample will load data from DOM - complete dataset will be present in generated HTML, so we must change another snippet to let Couch deliver all cloned pages to the markup.
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>


Attached are necessary files in their respective folders.
datatable.zip
(1018.85 KiB) Downloaded 11 times


It is clear to anyone remotely familiar with themeing available in Couch 2.0, that this mod will take 5 mins max to reproduce and it was maybe an hour or two to get together various pieces.

Thanks and regards
4 posts Page 1 of 1

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 1 guest