pagination - implement previous button, next button.

This commit is contained in:
Jessica Wang 2010-11-30 16:52:21 -08:00
parent 677394c27a
commit 0ad7680dfd
3 changed files with 100 additions and 17 deletions

View File

@ -30,20 +30,76 @@ function afterLoadClusterJSP($leftmenuItem1) {
clusterJsonToRightPanel($leftmenuItem1);
var clusterId = $leftmenuItem1.data("jsonObj").id;
var $midmenuContainer = $("#midmenu_container").empty();
disableMultipleSelectionInMidMenu();
var $container_host = $("<div id='midmenu_host_container'></div>");
$midmenuContainer.append($container_host);
var $header1 = $("#midmenu_itemheader_without_margin").clone().show(); //without margin on top
$header1.find("#name").text("Host");
$container_host.append($header1);
listMidMenuItems2(("listHosts&type=Routing&clusterid="+clusterId), "listhostsresponse", "host", hostToMidmenu, hostToRightPanel, hostGetMidmenuId, false, true, $container_host);
$container_host.append($header1);
//listMidMenuItems2(("listHosts&type=Routing&clusterid="+clusterId), "listhostsresponse", "host", hostToMidmenu, hostToRightPanel, hostGetMidmenuId, false, 1);
var count = 0;
$.ajax({
cache: false,
data: createURL("command=listHosts&type=Routing&clusterid="+clusterId),
dataType: "json",
async: false,
success: function(json) {
selectedItemsInMidMenu = {};
var items = json.listhostsresponse.host;
if(items != null && items.length > 0) {
for(var i=0; i<items.length;i++) {
var $midmenuItem1 = $("#midmenu_item").clone();
$midmenuItem1.data("toRightPanelFn", hostToRightPanel);
hostToMidmenu(items[i], $midmenuItem1);
bindClickToMidMenu($midmenuItem1, hostToRightPanel, hostGetMidmenuId);
$container_host.append($midmenuItem1.show());
if(i == 0) { //click the 1st item in middle menu as default
$midmenuItem1.click();
}
}
count = items.length;
}
else {
$container_host.append($("#midmenu_container_no_items_available").clone().show());
}
}
});
var $container_primarystorage = $("<div id='midmenu_primarystorage_container'></div>");
$midmenuContainer.append($container_primarystorage);
var $header2 = $("#midmenu_itemheader_with_margin").clone().show(); //with margin on top
$header2.find("#name").text("Primary Storage");
$container_primarystorage.append($header2);
listMidMenuItems2(("listStoragePools&clusterid="+clusterId), "liststoragepoolsresponse", "storagepool", primarystorageToMidmenu, primarystorageToRightPanel, primarystorageGetMidmenuId, false, false, $container_primarystorage);
//listMidMenuItems2(("listStoragePools&clusterid="+clusterId), "liststoragepoolsresponse", "storagepool", primarystorageToMidmenu, primarystorageToRightPanel, primarystorageGetMidmenuId, false, 1);
var count = 0;
$.ajax({
cache: false,
data: createURL("command=listStoragePools&clusterid="+clusterId),
dataType: "json",
async: false,
success: function(json) {
selectedItemsInMidMenu = {};
var items = json.liststoragepoolsresponse.storagepool;
if(items != null && items.length > 0) {
for(var i=0; i<items.length;i++) {
var $midmenuItem1 = $("#midmenu_item").clone();
$midmenuItem1.data("toRightPanelFn", primarystorageToRightPanel);
primarystorageToMidmenu(items[i], $midmenuItem1);
bindClickToMidMenu($midmenuItem1, primarystorageToRightPanel, primarystorageGetMidmenuId);
$container_primarystorage.append($midmenuItem1.show());
}
count = items.length;
}
else {
$container_primarystorage.append($("#midmenu_container_no_items_available").clone().show());
}
}
});
}
function clusterJsonToRightPanel($leftmenuItem1) {

View File

@ -210,8 +210,25 @@ $(document).ready(function() {
return;
}
//pagination
$("#middle_menu_pagination").unbind("clik").bind("click", function(event) {
var params = $(this).data("params");
var $target = $(event.target);
var targetId = $target.attr("id");
if(targetId == "midmenu_prevbutton") {
listMidMenuItems2(params.commandString, params.jsonResponse1, params.jsonResponse2, params.toMidmenuFn, params.toRightPanelFn, params.getMidmenuIdFn, params.isMultipleSelectionInMidMenu, (params.page-1));
}
else if(targetId == "midmenu_nextbutton") {
listMidMenuItems2(params.commandString, params.jsonResponse1, params.jsonResponse2, params.toMidmenuFn, params.toRightPanelFn, params.getMidmenuIdFn, params.isMultipleSelectionInMidMenu, (params.page+1));
}
return false;
});
// refresh button
$("#refresh_link").bind("click", function(event) {
$("#refresh_link").unbind("clik").bind("click", function(event) {
var onRefreshFn = $("#right_panel").data("onRefreshFn");
if(onRefreshFn != null)
onRefreshFn();
@ -219,13 +236,13 @@ $(document).ready(function() {
});
// Initialize help drop down dialog
$("#help_link").bind("click", function(event) {
$("#help_link").unbind("clik").bind("click", function(event) {
$("#help_dropdown_dialog").show();
$("#help_button").addClass("selected");
return false;
});
$("#help_dropdown_close").bind("click", function(event) {
$("#help_dropdown_close").unbind("clik").bind("click", function(event) {
$("#help_dropdown_dialog").hide();
$("#help_button").removeClass("selected");
return false;

View File

@ -928,7 +928,19 @@ function getMidmenuId(jsonObj) {
return "midmenuItem_" + jsonObj.id;
}
function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu, clickFirstItem, $midMenuContainer) {
function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu, page) {
var params = {
"commandString": commandString,
"jsonResponse1": jsonResponse1,
"jsonResponse2": jsonResponse2,
"toMidmenuFn": toMidmenuFn,
"toRightPanelFn": toRightPanelFn,
"getMidmenuIdFn": getMidmenuIdFn,
"isMultipleSelectionInMidMenu": isMultipleSelectionInMidMenu,
"page": page
}
$("#middle_menu_pagination").data("params", params);
if(isMultipleSelectionInMidMenu == true)
enableMultipleSelectionInMidMenu();
else
@ -937,11 +949,12 @@ function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmen
var count = 0;
$.ajax({
cache: false,
data: createURL("command="+commandString+"&pagesize="+midmenuItemCount+"&page=1"),
data: createURL("command="+commandString+"&pagesize="+midmenuItemCount+"&page="+page),
dataType: "json",
async: false,
success: function(json) {
selectedItemsInMidMenu = {};
success: function(json) {
selectedItemsInMidMenu = {};
$("#midmenu_container").empty();
var items = json[jsonResponse1][jsonResponse2];
if(items != null && items.length > 0) {
for(var i=0; i<items.length;i++) {
@ -949,12 +962,9 @@ function listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmen
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
toMidmenuFn(items[i], $midmenuItem1);
bindClickToMidMenu($midmenuItem1, toRightPanelFn, getMidmenuIdFn);
if($midMenuContainer == null)
$midMenuContainer = $("#midmenu_container");
$midMenuContainer.append($midmenuItem1.show());
if(clickFirstItem == true && i == 0) { //click the 1st item in middle menu as default
$("#midmenu_container").append($midmenuItem1.show());
if(i == 0) { //click the 1st item in middle menu as default
$midmenuItem1.click();
if(isMultipleSelectionInMidMenu == true) {
$midmenuItem1.addClass("ui-selected"); //because instance page is using JQuery selectable widget to do multiple-selection
@ -997,7 +1007,7 @@ function listMidMenuItems(commandString, jsonResponse1, jsonResponse2, rightPane
});
removeDialogs();
afterLoadRightPanelJSPFn();
listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu, true);
listMidMenuItems2(commandString, jsonResponse1, jsonResponse2, toMidmenuFn, toRightPanelFn, getMidmenuIdFn, isMultipleSelectionInMidMenu, 1);
});
return false;
}