Single Category with Datatables

Single Category Example

Any data within the page_o.category object can be referenced in an hmtl page as follows:

 Returns the description of the category

 
Category Data

JSON example of category object. Include any data from the object in a template use  page_o.category.....

"UID": "818175AB2C8BAA4A90595F923B9428FD",
"lft": 42,
"rgt": 43,
"level": 2,
"path": "home/news-215",
"title": "MCS Sap Calculator",
"alias": "news-215",
"description": "",
"published": 1,
"params": {
    "category_layout": "",
    "image": "",
    "image_alt": ""
},
"metadesc": "",
"metakey": {
    "keywords": []
},
"metadata": {
    "author": "",
    "robots": ""
},
"created_time": "0000-00-00",
"modified_time": "2020-11-17",
"filepath": "",
"schema_article_type": {
    "option": "Collection",
    "label": "Collection",
    "default": ""
},
"schema_page_type": {
    "option": "CollectionPage",
    "label": "Collection Page",
    "default": ""
},
"link_count": 0,
"incoming_link_count": 0,
"breadcrumbs": {
    "breadcrumbs": [
        {
            "title": "Home",
            "class": "",
            "path": "index.html",
            "active": false,
            "home": 1
        },
        {
            "title": "News",
            "class": "",
            "path": "home/news-215",
            "active": false,
            "home": 0
        }
    ]
},
"keyphrase": null

Blog or List of Articles with Datatables

See  Datatables for a detailed explanation. In the example snippet below the page_o object contains a a category object as described above plus a collection of articles  page_o.articles. Each article can be displayed in a table or list via a For Each ... End For Each loop where the variable $item is the article in the collection. 

Firstly we are testing the page to ensure that we have a category defined . Then first div is the category object with the title of the category and the description. The tbody selector is the articles collection with a for each loop to create an HTML table. The line <!--4DEACH $item in page_o.articles--> : 4DENDEACH expected where $item is the current article object in the articles collection.

See plain vanilla example (opens in new window) TO DO.

            <div class="category-list">
                <div>
                    <div class="content-category">
                        <div class="page-header">
                            <h2>
                                <!--#4DHTML page_o.category.title-->
                            </h2>
                        </div>
                        <div class="category-desc">
                            <div class="clr">
                                <!--#4DHTML page_o.category.description-->
                            </div>
                        </div>
                        <table id="example" class="table">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Author</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!--#4DEACH $item in page_o.articles-->
                                <tr class="cat-list-row0">
                                    <td headers="categorylist_header_title" class="list-title"><a href="/<!--#4DTEXT $item.path-->">
                                            <!--#4DHTML $item.title--></a></td>
                                    <td headers="categorylist_header_author" class="list-author">
                                        <!--#4DHTML $item.author-->
                                    </td>
                                </tr>
                                <!--#4DENDEACH-->
                            </tbody>
                        </table>
                    </div>
                    <script>
                        $(document).ready(function() {
                            $('#example').DataTable({
                                "responsive": true,
                                "paging": true,
                                "ordering": true,
                                "info": false,
                                "searching": false,
                                "lengthMenu": [
                                    [5, 10, 20, -1],
                                    [5, 10, 20, "All"]
                                ]
                            });
                        });
                    </script>
                </div>
            </div>