diff --git a/productMods/js/visualization/entitycomparison/gui-event-manager.js b/productMods/js/visualization/entitycomparison/gui-event-manager.js index 388eff71..749dac63 100644 --- a/productMods/js/visualization/entitycomparison/gui-event-manager.js +++ b/productMods/js/visualization/entitycomparison/gui-event-manager.js @@ -147,14 +147,14 @@ function performEntityCheckboxClickedRedrawActions() { * values from the json file and * dynamically generate checkboxes */ -function loadData(jsonData) { +function loadData(jsonData, dataTableParams) { $.each(jsonData, function (index, val) { setOfLabels.push(val.label); labelToEntityRecord[val.label] = val; }); - - prepareTableForDataTablePagination(jsonData); + + prepareTableForDataTablePagination(jsonData, dataTableParams); setEntityLevel(getEntityVisMode(jsonData)); entityCheckboxOperatedOnEventListener(); @@ -247,15 +247,21 @@ temporalGraphProcessor = { initiateTemporalGraphRenderProcess: function(givenGraphContainer, jsonData) { + this.dataTableParams = { + searchBarParentContainerDIVClass : "searchbar", + paginationContainerDIVClass : "paginatedtabs" + }; + + /* * initial display of the grid when the page loads * */ init(givenGraphContainer); - + /* * render the temporal graph per the sent content. * */ - loadData(jsonData); + loadData(jsonData, this.dataTableParams); /* * This will make sure that top 3 entities are selected by default when the page loads. diff --git a/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css b/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css index 88fa30a2..51d1fec7 100644 --- a/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css +++ b/productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css @@ -3,6 +3,7 @@ .filterInfo { float:left; margin-top: 15px; + margin-bottom: 10px; } .filterInfo div { diff --git a/productMods/js/visualization/entitycomparison/util.js b/productMods/js/visualization/entitycomparison/util.js index 3d40f4c7..c504e801 100644 --- a/productMods/js/visualization/entitycomparison/util.js +++ b/productMods/js/visualization/entitycomparison/util.js @@ -2,184 +2,174 @@ (function ($) { -$.fn.dataTableExt.oPagination.gmail_style = { + $.fn.dataTableExt.oPagination.gmail_style = { - "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) - { - //var nInfo = document.createElement( 'div' ); - var nFirst = document.createElement( 'span' ); - var nPrevious = document.createElement( 'span' ); - var nNext = document.createElement( 'span' ); - var nLast = document.createElement( 'span' ); - - /* + + "fnInit": function (oSettings, nPaging, fnCallbackDraw) { + //var nInfo = document.createElement( 'div' ); + var nFirst = document.createElement('span'); + var nPrevious = document.createElement('span'); + var nNext = document.createElement('span'); + var nLast = document.createElement('span'); + +/* nFirst.innerHTML = oSettings.oLanguage.oPaginate.sFirst; nPrevious.innerHTML = oSettings.oLanguage.oPaginate.sPrevious; nNext.innerHTML = oSettings.oLanguage.oPaginate.sNext; nLast.innerHTML = oSettings.oLanguage.oPaginate.sLast; */ - - nFirst.innerHTML = "« First"; - nPrevious.innerHTML = "‹ Prev"; - nNext.innerHTML = "Next›"; - nLast.innerHTML = "Last»"; - - var oClasses = oSettings.oClasses; - nFirst.className = oClasses.sPageButton+" "+oClasses.sPageFirst; - nPrevious.className = oClasses.sPageButton+" "+oClasses.sPagePrevious; - nNext.className= oClasses.sPageButton+" "+oClasses.sPageNext; - nLast.className = oClasses.sPageButton+" "+oClasses.sPageLast; - - //nPaging.appendChild( nInfo ); - nPaging.appendChild( nFirst ); - nPaging.appendChild( nPrevious ); - nPaging.appendChild( nNext ); - nPaging.appendChild( nLast ); - - $(nFirst).click( function () { - if ( oSettings.oApi._fnPageChange( oSettings, "first" ) ) - { - fnCallbackDraw( oSettings ); - } - } ); - - $(nPrevious).click( function() { - if ( oSettings.oApi._fnPageChange( oSettings, "previous" ) ) - { - fnCallbackDraw( oSettings ); - } - } ); - - $(nNext).click( function() { - if ( oSettings.oApi._fnPageChange( oSettings, "next" ) ) - { - fnCallbackDraw( oSettings ); - } - } ); - - $(nLast).click( function() { - if ( oSettings.oApi._fnPageChange( oSettings, "last" ) ) - { - fnCallbackDraw( oSettings ); - } - } ); - - /* Take the brutal approach to cancelling text selection */ - $('span', nPaging) - .bind( 'mousedown', function () { return false; } ) - .bind( 'selectstart', function () { return false; } ); - - /* ID the first elements only */ - if ( oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined" ) - { - nPaging.setAttribute( 'id', oSettings.sTableId+'_paginate' ); - nFirst.setAttribute( 'id', oSettings.sTableId+'_first' ); - nPrevious.setAttribute( 'id', oSettings.sTableId+'_previous' ); - //nInfo.setAttribute( 'id', 'infoContainer' ); - nNext.setAttribute( 'id', oSettings.sTableId+'_next' ); - nLast.setAttribute( 'id', oSettings.sTableId+'_last' ); - } - }, - - /* + + nFirst.innerHTML = "« First"; + nPrevious.innerHTML = "‹ Prev"; + nNext.innerHTML = "Next›"; + nLast.innerHTML = "Last»"; + + var oClasses = oSettings.oClasses; + nFirst.className = oClasses.sPageButton + " " + oClasses.sPageFirst; + nPrevious.className = oClasses.sPageButton + " " + oClasses.sPagePrevious; + nNext.className = oClasses.sPageButton + " " + oClasses.sPageNext; + nLast.className = oClasses.sPageButton + " " + oClasses.sPageLast; + + //nPaging.appendChild( nInfo ); + nPaging.appendChild(nFirst); + nPaging.appendChild(nPrevious); + nPaging.appendChild(nNext); + nPaging.appendChild(nLast); + + $(nFirst).click(function () { + if (oSettings.oApi._fnPageChange(oSettings, "first")) { + fnCallbackDraw(oSettings); + } + }); + + $(nPrevious).click(function () { + if (oSettings.oApi._fnPageChange(oSettings, "previous")) { + fnCallbackDraw(oSettings); + } + }); + + $(nNext).click(function () { + if (oSettings.oApi._fnPageChange(oSettings, "next")) { + fnCallbackDraw(oSettings); + } + }); + + $(nLast).click(function () { + if (oSettings.oApi._fnPageChange(oSettings, "last")) { + fnCallbackDraw(oSettings); + } + }); + + /* Take the brutal approach to cancelling text selection */ + $('span', nPaging).bind('mousedown', function () { + return false; + }).bind('selectstart', function () { + return false; + }); + + /* ID the first elements only */ + if (oSettings.sTableId !== '' && typeof oSettings.aanFeatures.p == "undefined") { + nPaging.setAttribute('id', oSettings.sTableId + '_paginate'); + nFirst.setAttribute('id', oSettings.sTableId + '_first'); + nPrevious.setAttribute('id', oSettings.sTableId + '_previous'); + //nInfo.setAttribute( 'id', 'infoContainer' ); + nNext.setAttribute('id', oSettings.sTableId + '_next'); + nLast.setAttribute('id', oSettings.sTableId + '_last'); + } + }, + +/* * Function: oPagination.full_numbers.fnUpdate * Purpose: Update the list of page buttons shows * Returns: - * Inputs: object:oSettings - dataTables settings object * function:fnCallbackDraw - draw function to call on page change */ - "fnUpdate": function ( oSettings, fnCallbackDraw ) - { - if ( !oSettings.aanFeatures.p ) - { - return; - } - - var iPageCount = 5; - var iPageCountHalf = Math.floor(iPageCount / 2); - var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength); - var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; - var iStartButton, iEndButton, i, iLen; - var oClasses = oSettings.oClasses; - - /* Pages calculation */ - if (iPages < iPageCount) - { - iStartButton = 1; - iEndButton = iPages; - } - else - { - if (iCurrentPage <= iPageCountHalf) - { - iStartButton = 1; - iEndButton = iPageCount; - } - else - { - if (iCurrentPage >= (iPages - iPageCountHalf)) - { - iStartButton = iPages - iPageCount + 1; - iEndButton = iPages; - } - else - { - iStartButton = iCurrentPage - Math.ceil(iPageCount / 2) + 1; - iEndButton = iStartButton + iPageCount - 1; - } - } - } - - /* Loop over each instance of the pager */ - var an = oSettings.aanFeatures.p; - var anButtons, anStatic, nPaginateList; - var fnClick = function() { - /* Use the information in the element to jump to the required page */ - var iTarget = (this.innerHTML * 1) - 1; - oSettings._iDisplayStart = iTarget * oSettings._iDisplayLength; - fnCallbackDraw( oSettings ); - return false; - }; - var fnFalse = function () { return false; }; - - for ( i=0, iLen=an.length ; i= (iPages - iPageCountHalf)) { + iStartButton = iPages - iPageCount + 1; + iEndButton = iPages; + } else { + iStartButton = iCurrentPage - Math.ceil(iPageCount / 2) + 1; + iEndButton = iStartButton + iPageCount - 1; + } + } + } + + /* Loop over each instance of the pager */ + var an = oSettings.aanFeatures.p; + var anButtons, anStatic, nPaginateList; + var fnClick = function () { /* Use the information in the element to jump to the required page */ + var iTarget = (this.innerHTML * 1) - 1; + oSettings._iDisplayStart = iTarget * oSettings._iDisplayLength; + fnCallbackDraw(oSettings); + return false; + }; + var fnFalse = function () { + return false; + }; + + for (i = 0, iLen = an.length; i < iLen; i++) { + if (an[i].childNodes.length === 0) { + continue; + } + + /* Update the 'premanent botton's classes */ + anButtons = an[i].getElementsByTagName('span'); + anStatic = [ + anButtons[0], anButtons[1], anButtons[anButtons.length - 2], anButtons[anButtons.length - 1]]; + $(anStatic).removeClass(oClasses.sPageButton + " " + oClasses.sPageButtonActive + " " + oClasses.sPageButtonStaticDisabled); + if (iCurrentPage == 1) { + anStatic[0].className += " " + oClasses.sPageButtonStaticDisabled; + anStatic[1].className += " " + oClasses.sPageButtonStaticDisabled; + } else { + anStatic[0].className += " " + oClasses.sPageButton; + anStatic[1].className += " " + oClasses.sPageButton; + } + + if (iPages === 0 || iCurrentPage == iPages || oSettings._iDisplayLength == -1) { + anStatic[2].className += " " + oClasses.sPageButtonStaticDisabled; + anStatic[3].className += " " + oClasses.sPageButtonStaticDisabled; + } else { + anStatic[2].className += " " + oClasses.sPageButton; + anStatic[3].className += " " + oClasses.sPageButton; + } + } + + + if (iPages <= 1) { + $("." + temporalGraphProcessor.dataTableParams.paginationContainerDIVClass).hide(); + } else { + $("." + temporalGraphProcessor.dataTableParams.paginationContainerDIVClass).show(); + } + } + }; $.fn.ellipsis = function () { return this.each(function () { @@ -946,7 +936,7 @@ function removeCheckBoxFromGlobalSet(checkbox){ * used by jquery.dataTables. The JsonObject * returned is used to populate the pagination table. */ -function prepareTableForDataTablePagination(jsonData){ +function prepareTableForDataTablePagination(jsonData, dataTableParams){ resetStopWordCount(); var checkboxCount = 0; @@ -968,9 +958,9 @@ function prepareTableForDataTablePagination(jsonData){ entityLabelTH.html('Entity Name'); var publicationCountTH = $(''); - if($("select.comparisonValues option:selected").text() === "by Publications"){ + if ($("select.comparisonValues option:selected").text() === "by Publications") { publicationCountTH.html('Publication Count'); - }else{ + } else { publicationCountTH.html('Grant Count'); } @@ -1017,10 +1007,8 @@ function prepareTableForDataTablePagination(jsonData){ table.append(tbody); tableDiv.append(table); - var searchBarParentContainerDIVClass = "searchbar"; - var entityListTable = $('#datatable').dataTable({ - "sDom": '<"' + searchBarParentContainerDIVClass + '"f><"filterInfo"i><"paginatedtabs"p><"table-separator"><"datatablewrapper"t>', + "sDom": '<"' + dataTableParams.searchBarParentContainerDIVClass + '"f><"filterInfo"i><"' + dataTableParams.paginationContainerDIVClass + '"p><"table-separator"><"datatablewrapper"t>', "aaSorting": [ [2, "desc"], [1,'asc'] ], @@ -1045,7 +1033,7 @@ function prepareTableForDataTablePagination(jsonData){ }); - var searchInputBox = $("." + searchBarParentContainerDIVClass).find("input[type=text]"); + var searchInputBox = $("." + dataTableParams.searchBarParentContainerDIVClass).find("input[type=text]"); searchInputBox.after("X");