diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html b/openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html
index ecc0b86..fc42739 100644
--- a/openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html
+++ b/openo-portal/portal-catalog/src/main/webapp/catalog/csarPackage.html
@@ -73,69 +73,8 @@
 		    </div> 
 	   	</div> 
 	   	<div class="separator-line"></div>
-		<div>
-			<table class="table table-striped table-bordered dataTable ">
-				<thead>
-				<tr class="heading">
-					<th id="nfv-package-iui-field-sn" name_i18n="com_zte_nfv_nsoc_i18n"
-						style="width: 80px;">
-					</th>
-					<th id="nfv-package-iui-field-name" name_i18n="com_zte_nfv_nsoc_i18n"></th>
-					<th id="nfv-package-iui-field-type" name_i18n="com_zte_nfv_nsoc_i18n"></th>
-					<th id="nfv-package-iui-field-usagestate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
-					<th id="nfv-package-iui-field-processstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
-					<th id="nfv-package-iui-field-operationalstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
-					<th id="nfv-package-iui-field-onboardstate" name_i18n="com_zte_nfv_nsoc_i18n"></th>
-					<th id="nfv-package-iui-field-operation" name_i18n="com_zte_nfv_nsoc_i18n"></th>
-				</tr>
-				</thead>
-				<tbody ms-each-res="vm.resource.packageInfo">
-				<tr>
-					<td ms-text="$index+1"></td>
-					<td>
-						<a href="#" ms-click="vm.packageDetail.$showDetails('block',$index,res.name)">
-							{{res.name}}
-						</a>
-					</td>
-					<td ms-text="res.type"></td>
-					<td ms-text="res.usageState"></td>
-					<td ms-text="res.processState"></td>
-					<td ms-text="res.operationalState"></td>
-					<td>
-						<span class="label label-info status" data-toggle="tooltip" title="nfv-package-iui-status-tip"
-							  ms-click="vm.onBoardPackage(res.csarId,res.type,res.onBoardState)">
-						{{res.onBoardState}}
-						</span>
-					</td>
-					<td>
-						<a href="#" class="btn-xs grey btn-editable" ms-click="vm.$delPackage(res.csarId,res.type)">
-							<i class="ict-delete"></i>
-							<i id="nfv-software-iui-action-delete" name_i18n="com_zte_nfv_nsoc_i18n"></i>
-						</a>
-					</td>
-				</tr>
-				</tbody>
-			</table>
-		</div>
-		<div class="row-fluid">
-			<div class="col-md-12" style="padding-left:0px;">
-				<div class="pull-left">
-					<small><label>
-						View
-						<select size="1" name="ict_template_table_length" aria-controls="ict_template_table">
-							<option value="10" selected="selected">10</option>
-							<option value="25">25</option>
-							<option value="50">50</option>
-							<option value="100">100</option>
-						</select>
-						 records
-					</label>
-					<span id="com_zte_openo_umc_monitor_monitorList_total" name_i18n="com_zte_openo_umc_monitor_ui_i18n">Found total</span>
-						<span ms-text="vm.resource.packageInfo.size()"></span>
-						<span id="com_zte_openo_umc_monitor_monitorList_records" name_i18n="com_zte_openo_umc_monitor_ui_i18n">records</span>
-					</small>
-				</div>
-			</div>
+		<div class="row-fluid" data-name="table_zone">
+			<div id='ict_package_table_div'></div>
 		</div>
 		<div id="right-menu" ms-css-display="packageDetail.isShow">
 			<div>
@@ -265,24 +204,6 @@
 								</tr>
 							</tbody>
 						</table>
-						<!--	<div class="form-group">
-                                <div class="col-sm-3"></div>
-                                <div class="col-sm-3" id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></div>
-                                <div class="col-sm-3" id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></div>
-                            </div>
-                            <form class="form-horizontal" role="form" id="vimForm">
-                                <div ms-each-rest="resource.vimSelectItems">
-                                    <div class="form-group">
-                                        <label class="col-sm-3 control-label" ms-text="rest.vimName"></label>
-                                        <div class="col-sm-3">
-                                            <select  class="form-control" ms-attr-id='vim{{$index}}'>
-                                                <option value="1" id="nfv-package-iui-product-env" name_i18n="com_zte_nfv_nsoc_i18n"></option>
-                                                <option value="2" id="nfv-package-iui-test-env" name_i18n="com_zte_nfv_nsoc_i18n"></option>
-                                            </select>
-									</div>
-								</div>
-							</div>
-						</form>-->
 					</div>
 					<div class="modal-footer">
 						<button type="button" class="btn" data-dismiss="modal">
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js
index 72d83df..abe4fb1 100644
--- a/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js
+++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmController.js
@@ -15,22 +15,26 @@
  */
 var vm = avalon.define({
 	$id : "pmController",
+    $tableId : "ict_package_table",
     resource : {
         packageInfo : [],
         packageDetails : "",
         vimSelectItems : []
     },
     csarIdSelected : "",
-	//$packageTableFields : {// table columns
-	//	table: [
-     //       {"mData": "name", name: $.i18n.prop("nfv-package-iui-field-name")},
-     //       {"mData": "type", name: $.i18n.prop("nfv-package-iui-field-type")},
-     //       {"mData": "size", name: $.i18n.prop("nfv-package-iui-field-size")},
-     //       {"mData": "createTime", name: $.i18n.prop("nfv-package-iui-field-createTime")},
-     //       {"mData": "status", name: $.i18n.prop("nfv-package-iui-field-status"), "fnRender" : pmUtil.statusRender},
-     //       {"mData": null, name: $.i18n.prop("nfv-package-iui-field-operation"), "fnRender" : pmUtil.actionRender}
-	//	]
-	//},
+	$packageTableFields : {// table columns
+		table: [
+            //{"mData":"",name:$.i18n.prop("nfv-package-iui-field-sn")},
+            {"mData": "csarId", name: "ID", "bVisible": false},
+            {"mData": "name", name: $.i18n.prop("nfv-package-iui-field-name"),"fnRender" : pmUtil.nameRender},
+            {"mData": "type", name: $.i18n.prop("nfv-package-iui-field-type")},
+            {"mData": "usageState", name: $.i18n.prop("nfv-package-iui-field-usagestate")},
+            {"mData": "processState", name: $.i18n.prop("nfv-package-iui-field-processstate")},
+            {"mData": "operationalState", name: $.i18n.prop("nfv-package-iui-field-operationalstate")},
+            {"mData": "onBoardState", name: $.i18n.prop("nfv-package-iui-field-onboardstate"), "fnRender" : pmUtil.onBoardRender},
+            {"mData": "", name: $.i18n.prop("nfv-package-iui-field-operation"), "fnRender" : pmUtil.operationRender}
+		]
+	},
 	$language: {
         "sProcessing": "<img src='../common/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"
                         +$.i18n.prop("nfv-nso-iui-table-sProcess")+"</span>",
@@ -66,14 +70,24 @@
     	var cond = {};
 		return cond;
     },
-	$initTable: function() {
-        var url=vm.$restUrl.queryPackageInfoUrl;
-        commonUtil.get(url,null,function(resp) {
-            if (resp) {
-                vm.resource.packageInfo=resp;
-            }
-        })
-	},
+	//$initTable: function() {
+     //   var url=vm.$restUrl.queryPackageInfoUrl;
+     //   commonUtil.get(url,null,function(resp) {
+     //       if (resp) {
+     //           vm.resource.packageInfo=resp;
+     //       }
+     //   })
+	//},
+    $initTable: function() {
+        var setting = {};
+        setting.language = vm.$language;
+        setting.paginate = true;
+        setting.info = true;
+        setting.columns = vm.$packageTableFields.table;
+        setting.restUrl = vm.$restUrl.queryPackageInfoUrl;
+        setting.tableId = vm.$tableId;
+        serverPageTable.initDataTable(setting,{},vm.$tableId + '_div');
+    },
     packageDetail : {
         detailTitle : "",
         isShow : "none",
@@ -88,14 +102,14 @@
             isActive : false
         }
         ],
-        $showDetails : function (isShow, sn, name) {
+        $showDetails : function (isShow, csarId, name) {
             vm.packageDetail.isShow = isShow;
             vm.packageDetail.detailCondChange(0);
             if (isShow == "block") {
                 vm.packageDetail.detailTitle = name + "-" + $.i18n.prop("nfv-package-iui_packageview_packageDetail"),
                     $('#' + vm.packageDetail.detailData[0].id).click();
                 vm.packageDetail.detailData[0].isActive = true;
-                vm.packageDetail.$initPackageDetailTable(sn);
+                vm.packageDetail.$initPackageDetailTable(csarId);
             }
         },
         detailCondChange : function (index) {
@@ -105,8 +119,15 @@
             }
             vm.packageDetail.detailData[index].isActive = true;
         },
-        $initPackageDetailTable : function (sn) {
-            vm.resource.packageDetails = vm.resource.packageInfo[sn];
+        $initPackageDetailTable : function (csarId) {
+            var data;
+            for(var i=0; i<vm.resource.packageInfo.length; i++) {
+                if (vm.resource.packageInfo[i].csarId == csarId) {
+                    data = vm.resource.packageInfo[i];
+                    break;
+                }
+            }
+            vm.resource.packageDetails = data;
             vm.resource.relationInfo = [];
         },
         $isRowDeletingStatus : function(name) {
@@ -221,13 +242,16 @@
             var url = vm.$restUrl.gsarOnboardUrl;
             pmUtil.doOnBoard(url, param);
         } else if(type == "SSAR") {
-            var ssarTarOnbardState="";            
+            var ssarTarOnbardState="";
+            var operationalState="";
             if(onBoardState =="onBoarded") {
                 ssarTarOnbardState = "non-onBoarded";
+                operationalState = "Disabled";
             } else {
                 ssarTarOnbardState = "onBoarded";
+                operationalState = "Enabled";
             }
-            var url = vm.$restUrl.ssarOnboardUrl+"/"+csarId+"?onBoardState="+ssarTarOnbardState
+            var url = vm.$restUrl.ssarOnboardUrl+"/"+csarId+"?onBoardState="+ssarTarOnbardState+"&operationalState="+operationalState;
             pmUtil.doSSAROnboard(url);
         }
     },
diff --git a/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js
index d632126..79dd813 100644
--- a/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js
+++ b/openo-portal/portal-catalog/src/main/webapp/catalog/js/package/pmUtil.js
@@ -151,15 +151,41 @@
         contentType : "application/json",
         success : function(resp) {
             commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-success"), "success");
-            refreshByCond();
+            setTimeout( function(){
+                refreshByCond();
+            }, 1 * 1000 );
         },
         error : function(resp) {
             if(resp.status == 202 || resp.responseText == "success") {
                 commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-success"), "success");
-                refreshByCond();
+                setTimeout( function(){
+                    refreshByCond();
+                }, 1 * 1000 );
+                //refreshByCond();
             } else {
                 commonUtil.showMessage($.i18n.prop("nfv-package-iui-message-delete-error"), "failed");
+                setTimeout( function(){
+                    refreshByCond();
+                }, 1 * 1000 );
+                //refreshByCond();
             }
         }
     });
 }
+
+pmUtil.nameRender = function(obj) {
+    return '<a href="#" onclick="vm.packageDetail.$showDetails('
+        + '\'block\',\'' + obj.aData.id + '\', \'' + obj.aData.name + '\')">' + obj.aData.name + '</a>';
+}
+
+pmUtil.onBoardRender = function(obj) {
+    var attr;
+    attr = 'class="label label-info status" data-toggle="tooltip" title="nfv-package-iui-status-tip"';
+    return '<span class="label label-info status" data-toggle="tooltip" title="nfv-package-iui-status-tip" onclick="vm.onBoardPackage(\'' + obj.aData.csarId
+        + '\',\''+ obj.aData.type + '\', \''+ obj.aData.onBoardState +'\')">' + obj.aData.onBoardState + '</span>';
+}
+
+pmUtil.operationRender = function(obj) {
+    return '<a href="#" class="btn-xs grey btn-editable" onclick="vm.$delPackage(\'' + obj.aData.csarId
+        + '\',\''+ obj.aData.type + '\')">' + '<i class=\"ict-delete\"></i>' + $.i18n.prop('nfv-software-iui-action-delete') + '</a>';
+}
\ No newline at end of file