A Freemaker Application Display Template for Asset Publisher in Liferay, that outputs various fields from a specific piece of structured content, and usings datatables.net to make the table sortable and searchable.

Course search page PGR search

<script>
/*Get the query string so we can pass it as the input value, to save the user from typing it twice*/
$(document).ready(function() {
    function gup( name )
    {
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
      if( results == null )
        return null;
      else
        return results[1];
    };
    
    var search_param = gup( 'courseSearchString' );
    
    $('input.pgrCourseSearchField').val(search_param); 
    
    });
</script>

<style scoped="" type="text/css">
.aui #pgrcs form {padding:0;} 
.aui #pgrcs label {font-size:13px;}
.aui #pgrcs input[type="submit"] {margin-bottom:0;}
</style>
<div id="pgrcs">
    <form action="//www.uea.ac.uk/study/postgraduate/research-degrees/phds-and-studentships" id="searchSiteSelect" method="get">
    <fieldset class="form">
        <label for="courseSearchString">Search for postgraduate research opportunities:</label> 
        <input class="pgrCourseSearchField" id="pgrCourseSearchField" name="courseSearchString"     placeholder="Enter your search..." type="text" /> 
        
        <input class="btn btn-small" type="submit" value="Search PhDs" /></fieldset>
</form>
</div>

Homepage course search

<style scoped="" type="text/css">
.aui #hpcs form{padding:0;}
.aui #hpcs label {font-size:13px;}
.aui #hpcs input[type="submit"] {margin-bottom:0;}
</style>
<div id="hpcs">
<form action="//www.uea.ac.uk/study/course-search" id="searchSiteSelect" method="get">
<fieldset class="form"><label for="courseSearchString">Search by course name, subject or supervisor</label> <input class="courseSearchField" id="courseSearchString" name="courseSearchString" placeholder="Enter your search..." type="text" /> <input class="btn btn-small" formaction="//www.uea.ac.uk/study/undergraduate/degrees" type="submit" value="Search Undergraduate" /> <input class="btn btn-small" formaction="//www.uea.ac.uk/study/postgraduate/taught-degrees" type="submit" value="Search Postgraduate Taught" /> <input class="btn btn-small" formaction="//www.uea.ac.uk/study/postgraduate/research-degrees/phds-and-studentships" type="submit" value="Search Postgraduate Research" /></fieldset>
</form>
</div>

pgr-proj-atd-ftl

<#if entries?has_content>

<#assign liferay_ui = taglibLiferayHash["/WEB-INF/tld/liferay-ui.tld"] />

<table class="pgrList table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>Title</th>
            <th>Primary Supervisor</th>
            <th>Application Deadline</th>
            <th>Funding Type</th>
            <th>Subject Area</th>
            
        </tr>
        </thead>
        <tbody>

<#list entries as entry>
    <#assign entry = entry />

    <#assign assetRenderer = entry.getAssetRenderer() />

    <#assign entryTitle = htmlUtil.escape(assetRenderer.getTitle(locale)) />

    <#assign viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry) />

    <#if assetLinkBehavior != "showFullContent">
        <#assign viewURL = assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL) />
    </#if>
    
    <#assign className = assetRenderer.getClassName />
    
    <#assign journalArticle = assetRenderer.getArticle() />
    <#assign document = saxReaderUtil.read(journalArticle.getContent()) />
    <#assign rootElement = document.getRootElement() />
    
    <#list rootElement.elements() as dynamicElement>
        <#if "supervisor_name" == dynamicElement.attributeValue("name")>
            <#assign primarySupervisor = dynamicElement.element("dynamic-content").getText() />
        </#if>
        <#if "funding_status" == dynamicElement.attributeValue("name")>
            <#assign funding_status = dynamicElement.element("dynamic-content").getText() />
        </#if>
        <#if "deadline" == dynamicElement.attributeValue("name")>
            <#assign deadline = dynamicElement.element("dynamic-content").getData() />
            <#assign date_DateObj = dateUtil.newDate(getterUtil.getLong(deadline)) />
        </#if>
    </#list>

<tr>
    <td><a href="${viewURL}">${entryTitle}</a>
        </td>
        <td>${primarySupervisor}</td>
        <td class="deadline"><span class="hidden">${dateUtil.getDate(date_DateObj, "yyyy-M-d", locale)}</span>${dateUtil.getDate(date_DateObj, "dd MMM yyyy", locale)}</td>
        <td>

        <#if funding_status == "SelfFundedStudentsOnly">
            PGR Opportunity
        <#else>
            Funded Studentship
        </#if>

        </td>
        <td><@getMetadataField fieldName="tags" /></td>

       

</#list>

</tbody>
</table>

<#else>
<div class="no-results">
    <div class="alert alert-info">No research-led project or applicant-led theme opportunities were returned in this list.</div>

    <p>View a list of all the <a href="">research-led project and applicant-led theme opportunities at UEA</a>.</p>

    <p>
        Find information about other opportunities (including professional doctorates) at the relevant Faculty Graduate School:
    <ul>
        <li>
            <a href="https://www.uea.ac.uk/hum/gradschool">Arts &amp; Humanities</a>
        </li>
        <li>
            <a href="https://www.uea.ac.uk/medicine-health-sciences/graduate-school">Medicine and Health Sciences</a>
        </li>
        <li>
            <a href="https://www.uea.ac.uk/sci/gradschool">Science</a>
        </li>
        <li>
            <a href="https://www.uea.ac.uk/social-sciences/graduate-school">Social Sciences</a>
        </li>
    </ul>
</div>
</#if>

<#macro getDiscussion>
    <#if validator.isNotNull(assetRenderer.getDiscussionPath()) && (enableComments == "true")>
        <br />

        <#assign discussionURL = renderResponse.createActionURL() />

        ${discussionURL.setParameter("struts_action", "/asset_publisher/" + assetRenderer.getDiscussionPath())}

        <@liferay_ui["discussion"]
            className=entry.getClassName()
            classPK=entry.getClassPK()
            formAction=discussionURL?string
            formName="fm" + entry.getClassPK()
            ratingsEnabled=enableCommentRatings == "true"
            redirect=portalUtil.getCurrentURL(request)
            userId=assetRenderer.getUserId()
        />
    </#if>
</#macro>

<#macro getEditIcon>
    <#if assetRenderer.hasEditPermission(themeDisplay.getPermissionChecker())>
        <#assign redirectURL = renderResponse.createRenderURL() />

        ${redirectURL.setParameter("struts_action", "/asset_publisher/add_asset_redirect")}
        ${redirectURL.setWindowState("pop_up")}

        <#assign editPortletURL = assetRenderer.getURLEdit(renderRequest, renderResponse, windowStateFactory.getWindowState("pop_up"), redirectURL)!"" />

        <#if validator.isNotNull(editPortletURL)>
            <#assign title = languageUtil.format(locale, "edit-x", entryTitle) />

            <@liferay_ui["icon"]
                image="edit"
                message=title
                url="javascript:Liferay.Util.openWindow({dialog: {width: 960}, id:'" + renderResponse.getNamespace() + "editAsset', title: '" + title + "', uri:'" + htmlUtil.escapeURL(editPortletURL.toString()) + "'});"
            />
        </#if>
    </#if>
</#macro>

<#macro getFlagsIcon>
    <#if enableFlags == "true">
        <@liferay_ui["flags"]
            className=entry.getClassName()
            classPK=entry.getClassPK()
            contentTitle=entry.getTitle(locale)
            label=false
            reportedUserId=entry.getUserId()
        />
    </#if>
</#macro>

<#macro getMetadataField
    fieldName
>
    <#if stringUtil.split(metadataFields)?seq_contains(fieldName)>
        <span class="metadata-entry metadata-${fieldName}">
            <#assign dateFormat = "dd MMM yyyy - HH:mm:ss" />

            <#if fieldName == "author">
                <@liferay.language key="by" /> ${portalUtil.getUserName(assetRenderer.getUserId(), assetRenderer.getUserName())}
            <#elseif fieldName == "categories">
                <@liferay_ui["asset-categories-summary"]
                    className=entry.getClassName()
                    classPK=entry.getClassPK()
                    portletURL=renderResponse.createRenderURL()
                />
            <#elseif fieldName == "create-date">
                ${dateUtil.getDate(entry.getCreateDate(), dateFormat, locale)}
            <#elseif fieldName == "expiration-date">
                ${dateUtil.getDate(entry.getExpirationDate(), dateFormat, locale)}
            <#elseif fieldName == "modified-date">
                ${dateUtil.getDate(entry.getModifiedDate(), dateFormat, locale)}
            <#elseif fieldName == "priority">
                ${entry.getPriority()}
            <#elseif fieldName == "publish-date">
                ${dateUtil.getDate(entry.getPublishDate(), dateFormat, locale)}
            <#elseif fieldName == "tags">
                <@liferay_ui["asset-tags-summary"]
                    className=entry.getClassName()
                    classPK=entry.getClassPK()
                    portletURL=renderResponse.createRenderURL()
                />
            <#elseif fieldName == "view-count">
                <@liferay_ui["icon"]
                    image="history"
                />

                ${entry.getViewCount()} <@liferay.language key="views" />
            </#if>
        </span>
    </#if>
</#macro>

<#macro getPrintIcon>
    <#if enablePrint == "true" >
        <#assign printURL = renderResponse.createRenderURL() />

        ${printURL.setParameter("struts_action", "/asset_publisher/view_content")}
        ${printURL.setParameter("assetEntryId", entry.getEntryId()?string)}
        ${printURL.setParameter("viewMode", "print")}
        ${printURL.setParameter("type", entry.getAssetRendererFactory().getType())}

        <#if (validator.isNotNull(assetRenderer.getUrlTitle()))>
            <#if (assetRenderer.getGroupId() != themeDisplay.getScopeGroupId())>
                ${printURL.setParameter("groupId", assetRenderer.getGroupId()?string)}
            </#if>

            ${printURL.setParameter("urlTitle", assetRenderer.getUrlTitle())}
        </#if>

        ${printURL.setWindowState("pop_up")}

        <@liferay_ui["icon"]
            image="print"
            message="print"
            url="javascript:Liferay.Util.openWindow({id:'" + renderResponse.getNamespace() + "printAsset', title: '" + languageUtil.format(locale, "print-x-x", ["hide-accessible", entryTitle]) + "', uri: '" + htmlUtil.escapeURL(printURL.toString()) + "'});"
        />
    </#if>
</#macro>

<#macro getRatings>
    <#if (enableRatings == "true")>
        <div class="asset-ratings">
            <@liferay_ui["ratings"]
                className=entry.getClassName()
                classPK=entry.getClassPK()
            />
        </div>
    </#if>
</#macro>

<#macro getRelatedAssets>
    <#if enableRelatedAssets == "true">
        <@liferay_ui["asset-links"]
            assetEntryId=entry.getEntryId()
        />
    </#if>
</#macro>

<#macro getSocialBookmarks>
    <#if enableSocialBookmarks == "true">
        <@liferay_ui["social-bookmarks"]
            displayStyle="${socialBookmarksDisplayStyle}"
            target="_blank"
            title=entry.getTitle(locale)
            url=viewURL
        />
    </#if>
</#macro>


<script type="text/javascript"  src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"  src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

<link rel="stylesheet" type="text/css" src="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css" />

<script type="text/javascript">
$(document).ready(function() {
    function gup( name )
    {
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
      if( results == null )
        return null;
      else
        return results[1];
    };
    
    var search_param = gup( 'courseSearchString' );

    if (search_param === null){
        $('.pgrList').dataTable({
        "paging": false,
            "columns": [    { "width": "45%" },    
                            { "width": "24%", "orderable": false },    
                            { "width": "15%", "searchable": false },
                            { "width": "15%", "searchable": false, "orderable": false },
                            { "visible": false} ],
    });
    }

    else{
        $('.pgrList').dataTable({
            "paging": false,
            "columns": [    { "width": "45%" },    
                            { "width": "24%", "orderable": false },    
                            { "width": "15%", "searchable": false },
                            { "width": "15%", "searchable": false, "orderable": false },
                            { "visible": false} ],
            "search": {"search": search_param }
        });
    }
    
    /*add bootstrap classes*/
    $('#DataTables_Table_0_filter input').addClass('input-medium search-query');

} );
</script>

<style type="text/css">
    
.dataTables_filter{padding-left: 8px;}
.aui .dataTables_filter input {margin: 10px;}
.aui .dataTables_filter label {margin-bottom: 0;}
.aui table.dataTable{margin-bottom:0;}
.aui div.dataTables_info {margin: 10px 0 10px 8px;}
.no-results{padding:10px;}

/*Styles copied from http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css and edited to override uea stlyes*/
.aui table.dataTable thead .sorting_asc,
.aui table.dataTable thead .sorting_desc,
.aui table.dataTable thead .sorting {
  cursor: pointer;
  *cursor: hand;
  padding-right:15px!important;
}
.aui table.dataTable thead .sorting {
  background: #00597f url("//cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center right!important;
}
.aui table.dataTable thead .sorting_asc {
  background: #00597f url("//cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center right!important;
}
.aui table.dataTable thead .sorting_desc {
  background: #00597f url("//cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center right!important;
}
.aui table.dataTable thead .sorting_asc_disabled {
  background: #00597f url("//cdn.datatables.net/1.10.0/images/sort_asc_disabled.png") no-repeat center right!important;
}
.aui table.dataTable thead .sorting_desc_disabled {
  background: #00597f url("//cdn.datatables.net/1.10.0/images/sort_desc_disabled.png") no-repeat center right!important;
}

.aui table.dataTable thead .sorting_disabled {
    background: #00597f!important;
}

/*portlet + basic table styles*/
.portlet-boundary_101_{margin: 0;}
.aui .table thead th{vertical-align: middle;}
.aui table.pgrList, .aui table.pgrList thead th,
.aui .dataTables_filter label{
    font-size:13px;
}

/*no results*/
.no-results a{
    text-decoration: underline;
    color: #1a658d!important;
}

.no-results a:hover {
    color: #535455!important;
}


</style>