anchor.diff:  
       var $ = up.jQuery;
       var portletDeepLinkUrl = '<c:url value="/p/PORTLETFNAME"/>';
  -    var pager;
  -
  -    var fetchStats = function() {
  -        var counts;
  -
  -        $("#${n}loadingMessage").slideDown(500);
  -
  -        $.ajax({
  -            url: '${popularPortletCountsUrl}',
  -            async: false,
  -            data: $("#${n}form").serialize(),
  -            type: 'GET',
  -            dataType: "json",
  -            success: function(data) { 
  -                counts = data.counts; 
  -            },
  -            error: function(request, textStatus, error) {
  -                alert("ERROR:  " + textStatus);
  -            }
  +
  +    var portletList_configuration = {
  +        column: {
  +            title: 0,
  +            times: 1
  +        },
  +        main: {
  +            table : null,
  +            pageSize: 10
  +        }
  +    };
  +
  +    var getDeepLinkAnchorTag = function(portletFName, portletDescription, portletTitle) {
  +        var url = portletDeepLinkUrl.replace("PORTLETFNAME", portletFName);
  +        return '<a href="' + url + '" title="' + portletDescription + '">' + portletTitle + '</a>';
  +    };
  +
  +    var initializeTable = function() {
  +        // To allow the datatable to be repopulated to search multiple times
  +        // clear and destroy the original
  +        if (portletList_configuration.main.table != undefined && typeof portletList_configuration.main.table.fnClearTable !== 'undefined') {
  +            portletList_configuration.main.table.fnClearTable();
  +            portletList_configuration.main.table.fnDestroy();
  +        }
  +        portletList_configuration.main.table = $("#${n}portletsTable").dataTable({
  +            iDisplayLength: portletList_configuration.main.pageSize,
  +            aLengthMenu: [5, 10, 20, 50],
  +            bServerSide: false,
  +            sAjaxSource: '${popularPortletCountsUrl}',
  +            sAjaxDataProp: "counts",
  +            bDeferRender: false,
  +            bProcessing: true,
  +            bAutoWidth:false,
  +            sPaginationType: 'full_numbers',
  +            oLanguage: {
  +                sLengthMenu: '<spring:message code="datatables.length-menu.message" htmlEscape="false" javaScriptEscape="true"/>',
  +                oPaginate: {
  +                    sPrevious: '<spring:message code="datatables.paginate.previous" htmlEscape="false" javaScriptEscape="true"/>',
  +                    sNext: '<spring:message code="datatables.paginate.next" htmlEscape="false" javaScriptEscape="true"/>'
  +                }
  +            },
  +            aoColumns: [
  +                { mData: 'portletFName', sType: 'string', sWidth: '50%' },  // Name
  +                { mData: 'count', sType: 'string', sWidth: '50%' }  // Times 
  +            ],
  +            fnInitComplete: function (oSettings) {
  +                portletList_configuration.main.table.fnDraw();
  +            },
  +            fnServerData: function (sUrl, aoData, fnCallback, oSettings) {
  +                oSettings.jqXHR = $.ajax({
  +                    url: sUrl,
  +                    data: $("#${n}form").serialize(),
  +                    dataType: "json",
  +                    cache: false,
  +                    type: oSettings.sServerMethod,
  +                    success: function (json) {
  +                        if (json.sError) {
  +                            oSettings.oApi._fnLog(oSettings, 0, json.sError);
  +                        }
  +
  +                        $(oSettings.oInstance).trigger('xhr', [oSettings, json]);
  +                        fnCallback(json);
  +                    },
  +                    error: function (xhr, error, thrown) {
  +                        lib.handleError(xhr, error, thrown);
  +                    }
  +                });
  +            },
  +            fnInfoCallback: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
  +                var infoMessage = '<spring:message code="datatables.info.message" htmlEscape="false" javaScriptEscape="true"/>';
  +                var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
  +                infoMessage = infoMessage.replace(/_START_/g, iStart).
  +                                      replace(/_END_/g, iEnd).
  +                                      replace(/_TOTAL_/g, iTotal).
  +                                      replace(/_CURRENT_PAGE_/g, iCurrentPage);
  +                return infoMessage;
  +            },
  +            // Add links to the proper columns after we get the data
  +            fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
  +                // get deeplink anchor tag
  +                $('td:eq(0)', nRow).html( getDeepLinkAnchorTag(aData.portletFName, aData.portletDescription, aData.portletTitle) );
  +            },
  +            // Setting the top and bottom controls
  +            sDom: 'r<"row alert alert-info view-filter"<"dataTables-inline"W><"dataTables-inline dataTables-right"l><"dataTables-inline dataTables-right"i><"dataTables-inline dataTables-right"p>><"row"<"span12"t>>>',//'<"top row-fluid"W<"pull-right pagination"l><"pull-right pagination"p>>rt<"bottom"i><"clear">',
  +            // Filtering
  +            oColumnFilterWidgets: { }
           });
  -        
  -        $("#${n}loadingMessage").slideUp(1000);
  -        
  -        if (counts) {
  -            if (counts.length > 0) {
  -                $("#${n}noneAdded").hide();
  -            } else {
  -                $("#${n}noneAdded").show();
  -            }
  -        }
  -
  -        return counts;
  -    }
  -
  -    var updateTable = function() {
  -        var newPortlets = fetchStats();
  -        var newModel = up.fluid.copy(pager.model);
  -        newModel.totalRange = newPortlets.length;
  -        newModel.pageIndex = 0;
  -        newModel.pageCount = Math.max(1, Math.floor((newModel.totalRange - 1)/ newModel.pageSize) + 1);
  -        up.fluid.clear(pager.options.dataModel);
  -        up.fluid.model.copyModel(pager.options.dataModel, newPortlets);
  -        pager.permutation = undefined;
  -        pager.events.onModelChange.fire(newModel, pager.model, pager);
  -        up.fluid.model.copyModel(pager.model, newModel)
  -    }
  -
  -    var options = {
  -        dataModel: fetchStats(),
  -        annotateColumnRange: 'title',
  -        columnDefs: [
  -            { key: "title", valuebinding: "*.portletTitle", sortable: true,
  -                components: function(row, index) {
  -                    return {
  -                        markup: '<a href="' + portletDeepLinkUrl.replace("PORTLETFNAME", '${"${*.portletFName}"}') + '" title="\${*.portletDescription}">\${*.portletTitle}</a>'
  -                    }
  -                }
  -            },
  -            { key: "count", valuebinding: "*.count", sortable: true }
  -        ],
  -        bodyRenderer: {
  -          type: "fluid.pager.selfRender",
  -          options: {
  -              selectors: {
  -                 root: "#${n}portletsTable"
  -              },
  -              row: "row:"
  -            }
  -            
  -        },
  -        pagerBar: {type: "fluid.pager.pagerBar", options: {
  -          pageList: {type: "fluid.pager.renderedPageList",
  -            options: { 
  -              linkBody: "a"
  -            }
  -          }
  -        }}
       };
  -    pager = up.fluid.pager("#${n}popularPortlets", options);
  -
  -    $("#${n}days").change(updateTable);
  -    $("#${n}fromDate").change(updateTable);
  -
  -    $(".cal-datepicker").datepicker();
  +
  +    initializeTable();
  +    $("#${n}days").change(initializeTable);
   
   });
   </script>
  
positive.code: <!-- END: VALUES BEING PASSED FROM BACKEND -->
  
  <c:set var="n"><portlet:namespace/></c:set>
  
  <!--
  PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
  | For the standards and guidelines that govern
  
negative.code:     </select>
    </div> <!-- end: portlet-toolbar -->
          
      <!-- Portlet Body -->
    <div class="fl-widget-content portlet-body" role="main">
  
      <!-- Portlet Section -->
      <div id="${n}popularPortlets" class="portlet-section fl-pager" role="region">      
  
        <div class="portlet-section-body">
          <table id="${n}portletsTable" style="width:100%;">
            <thead>
              <tr rsf:id="header:">
                <th><spring:message code="title"/></th>
                <th><spring:message code="number.times"/></th>
              </tr>
            </thead>
          </table>
        </div>
        <c:if test="${showAdminFeatures}">
          <!-- Portlet Buttons -->
          <div class="portlet-button-group">
  