litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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)

Browse source
This commit is contained in:
cdtank 2011-03-03 21:59:05 +00:00
parent 8a45a8a3a1
commit d00685eee0
3 changed files with 173 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

12
productMods/js/visualization/entitycomparison/gui-event-manager.js
View file

@ -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,6 +247,12 @@ temporalGraphProcessor = {
initiateTemporalGraphRenderProcess: function(givenGraphContainer, jsonData) {
this.dataTableParams = {
searchBarParentContainerDIVClass : "searchbar",
paginationContainerDIVClass : "paginatedtabs"
};
/*
* initial display of the grid when the page loads
* */
@ -255,7 +261,7 @@ temporalGraphProcessor = {
/*
* 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.

1
productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css
View file

@ -3,6 +3,7 @@
.filterInfo {
float:left;
margin-top: 15px;
margin-bottom: 10px;
}
.filterInfo div {

300
productMods/js/visualization/entitycomparison/util.js
View file

@ -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 = "<span class='small-arrows'>&laquo;</span> <span class='paginate-nav-text'>First</span>";
nPrevious.innerHTML = "<span class='small-arrows'>&lsaquo;</span> <span class='paginate-nav-text'>Prev</span>";
nNext.innerHTML = "<span class='paginate-nav-text'>Next</span><span class='small-arrows'>&rsaquo;</span>";
nLast.innerHTML = "<span class='paginate-nav-text'>Last</span><span class='small-arrows'>&raquo;</span>";
nFirst.innerHTML = "<span class='small-arrows'>&laquo;</span> <span class='paginate-nav-text'>First</span>";
nPrevious.innerHTML = "<span class='small-arrows'>&lsaquo;</span> <span class='paginate-nav-text'>Prev</span>";
nNext.innerHTML = "<span class='paginate-nav-text'>Next</span><span class='small-arrows'>&rsaquo;</span>";
nLast.innerHTML = "<span class='paginate-nav-text'>Last</span><span class='small-arrows'>&raquo;</span>";
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;
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 );
//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 );
}
} );
$(nFirst).click(function () {
if (oSettings.oApi._fnPageChange(oSettings, "first")) {
fnCallbackDraw(oSettings);
}
});
$(nPrevious).click( function() {
if ( oSettings.oApi._fnPageChange( oSettings, "previous" ) )
{
fnCallbackDraw( oSettings );
}
} );
$(nPrevious).click(function () {
if (oSettings.oApi._fnPageChange(oSettings, "previous")) {
fnCallbackDraw(oSettings);
}
});
$(nNext).click( function() {
if ( oSettings.oApi._fnPageChange( oSettings, "next" ) )
{
fnCallbackDraw( oSettings );
}
} );
$(nNext).click(function () {
if (oSettings.oApi._fnPageChange(oSettings, "next")) {
fnCallbackDraw(oSettings);
}
});
$(nLast).click( function() {
if ( oSettings.oApi._fnPageChange( oSettings, "last" ) )
{
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; } );
/* 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' );
}
},
/* 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;
}
"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;
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;
}
}
}
// console.log(iPageCount,
// iPageCountHalf,
// iPages,
// iCurrentPage,
// oClasses);
/* 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; };
/* 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;
}
}
}
for ( i=0, iLen=an.length ; i<iLen ; i++ )
{
if ( an[i].childNodes.length === 0 )
{
continue;
}
/* 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;
};
/* 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;
}
for (i = 0, iLen = an.length; i < iLen; i++) {
if (an[i].childNodes.length === 0) {
continue;
}
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;
}
}
}
};
/* 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 = $('<th>');
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("<span id='reset-search' title='Clear Search query'>X</span>");