From d00685eee0342fad5a82b29207ad61f4d7022f97 Mon Sep 17 00:00:00 2001 From: cdtank Date: Thu, 3 Mar 2011 21:59:05 +0000 Subject: [PATCH] 1. Made changes so that in temporal vis, the pagination navs for the datatable are hidden if there is only one page worth of elements or no pages at all. (see http://issues.library.cornell.edu/browse/NIHVIVO-2191) --- .../entitycomparison/gui-event-manager.js | 16 +- .../jquery_plugins/datatable/demo_table.css | 1 + .../js/visualization/entitycomparison/util.js | 334 +++++++++--------- 3 files changed, 173 insertions(+), 178 deletions(-) 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");