portal-catalog/src/main/webapp/catalog/js/component/serverPageTable.js

   1 /*\r
   2  * Copyright 2016-2017 ZTE Corporation.\r
   3  *\r
   4  * Licensed under the Apache License, Version 2.0 (the "License");\r
   5  * you may not use this file except in compliance with the License.\r
   6  * You may obtain a copy of the License at\r
   7  *\r
   8  *     http://www.apache.org/licenses/LICENSE-2.0\r
   9  *\r
  10  * Unless required by applicable law or agreed to in writing, software\r
  11  * distributed under the License is distributed on an "AS IS" BASIS,\r
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13  * See the License for the specific language governing permissions and\r
  14  * limitations under the License.\r
  15  */\r
  16 var serverPageTable = {};\r
  17 /* Bootstrap style full number pagination control */\r
  18 $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )\r
  19 {\r
  20     return {\r
  21         "iStart":         oSettings._iDisplayStart,\r
  22         "iEnd":           oSettings.fnDisplayEnd(),\r
  23         "iLength":        oSettings._iDisplayLength,\r
  24         "iTotal":         oSettings.fnRecordsTotal(),\r
  25         "iFilteredTotal": oSettings.fnRecordsDisplay(),\r
  26         "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),\r
  27         "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )\r
  28     };\r
  29 };\r
  30 \r
  31 $.extend( $.fn.dataTableExt.oPagination, {\r
  32     "bootstrap_extended": {\r
  33         "fnInit": function( oSettings, nPaging, fnDraw ) {\r
  34             var oLang = oSettings.oLanguage.oPaginate;\r
  35             var oPaging = oSettings.oInstance.fnPagingInfo();\r
  36 \r
  37             var fnClickHandler = function ( e ) {\r
  38                 e.preventDefault();\r
  39                 if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {\r
  40                     fnDraw( oSettings );\r
  41                 }\r
  42             };\r
  43 \r
  44             $(nPaging).append(\r
  45                 '<div class="pagination-panel"> ' + oLang.sPage + ' ' +\r
  46                 '<a href="#" class="btn btn-sm default prev disabled" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a>' +\r
  47                 '<input type="text" class="pagination-panel-input input-mini input-inline input-sm" maxlenght="5" style="text-align:center; margin: 0 4px; border: 1px solid rgb(169, 169, 169);height: 28px;">' +\r
  48                 '<a href="#" class="btn btn-sm default next disabled" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a> ' +\r
  49                 oLang.sPageOf + ' <span class="pagination-panel-total"></span>' +\r
  50                 '</div>'\r
  51             );\r
  52 \r
  53             var els = $('a', nPaging);\r
  54 \r
  55             $(els[0]).bind('click.DT', { action: "previous" }, fnClickHandler );\r
  56             $(els[1]).bind('click.DT', { action: "next" }, fnClickHandler);\r
  57 \r
  58             $('.pagination-panel-input', nPaging).bind('change.DT', function(e) {\r
  59                 var oPaging = oSettings.oInstance.fnPagingInfo();\r
  60                 e.preventDefault();\r
  61                 var page = parseInt($(this).val());\r
  62                 if (page > 0 && page < oPaging.iTotalPages) {\r
  63                     if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {\r
  64                         fnDraw( oSettings );\r
  65                     }\r
  66                 } else {\r
  67                     $(this).val(oPaging.iPage + 1);\r
  68                 }\r
  69             });\r
  70 \r
  71             $('.pagination-panel-input', nPaging).bind('keypress.DT', function(e) {\r
  72                 var oPaging = oSettings.oInstance.fnPagingInfo();\r
  73                 if (e.which == 13) {\r
  74                     var page = parseInt($(this).val());\r
  75                     if (page > 0 && page < oSettings.oInstance.fnPagingInfo().iTotalPages) {\r
  76                         if ( oSettings.oApi._fnPageChange(oSettings, page-1) ) {\r
  77                             fnDraw( oSettings );\r
  78                         }\r
  79                     } else {\r
  80                         $(this).val(oPaging.iPage + 1);\r
  81                     }\r
  82                     e.preventDefault();\r
  83                 }\r
  84             });\r
  85         },\r
  86 \r
  87         "fnUpdate": function ( oSettings, fnDraw ) {\r
  88             var iListLength = 5;\r
  89             var oPaging = oSettings.oInstance.fnPagingInfo();\r
  90             var an = oSettings.aanFeatures.p;\r
  91             var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);\r
  92 \r
  93             if ( oPaging.iTotalPages < iListLength) {\r
  94                 iStart = 1;\r
  95                 iEnd = oPaging.iTotalPages;\r
  96             }\r
  97             else if ( oPaging.iPage <= iHalf ) {\r
  98                 iStart = 1;\r
  99                 iEnd = iListLength;\r
 100             } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {\r
 101                 iStart = oPaging.iTotalPages - iListLength + 1;\r
 102                 iEnd = oPaging.iTotalPages;\r
 103             } else {\r
 104                 iStart = oPaging.iPage - iHalf + 1;\r
 105                 iEnd = iStart + iListLength - 1;\r
 106             }\r
 107 \r
 108 \r
 109             for ( i=0, iLen=an.length ; i<iLen ; i++ ) {\r
 110                 var wrapper = $(an[i]).parents(".dataTables_wrapper");\r
 111 \r
 112                 if (oPaging.iTotalPages <= 0) {\r
 113                     $('.pagination-panel, .dataTables_length', wrapper).hide();\r
 114                 } else {\r
 115                     $('.pagination-panel, .dataTables_length', wrapper).show();\r
 116                 }\r
 117 \r
 118                 $('.pagination-panel-total', an[i]).html(oPaging.iTotalPages);\r
 119                 $('.pagination-panel-input', an[i]).val(oPaging.iPage + 1);\r
 120 \r
 121                 // Remove the middle elements\r
 122                 $('li:gt(1)', an[i]).filter(':not(.next)').remove();\r
 123 \r
 124                 // Add the new list items and their event handlers\r
 125                 for ( j=iStart ; j<=iEnd ; j++ ) {\r
 126                     sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';\r
 127                     $('<li '+sClass+'><a href="#">'+j+'</a></li>')\r
 128                         .insertBefore( $('li.next:first', an[i])[0] )\r
 129                         .bind('click', function (e) {\r
 130                             e.preventDefault();\r
 131                             oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;\r
 132                             fnDraw( oSettings );\r
 133                         } );\r
 134                 }\r
 135 \r
 136                 // Add / remove disabled classes from the static elements\r
 137                 if ( oPaging.iPage === 0 ) {\r
 138                     $('a.prev', an[i]).addClass('disabled');\r
 139                 } else {\r
 140                     $('a.prev', an[i]).removeClass('disabled');\r
 141                 }\r
 142 \r
 143                 if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {\r
 144                     $('a.next', an[i]).addClass('disabled');\r
 145                 } else {\r
 146                     $('a.next', an[i]).removeClass('disabled');\r
 147                 }\r
 148             }\r
 149         }\r
 150     }\r
 151 } );\r
 152 \r
 153 serverPageTable.getRestPara = function( cond , tableSetting ){\r
 154     var pageNo=tableSetting._iDisplayStart/tableSetting._iDisplayLength+1;\r
 155     var pageSize = tableSetting._iDisplayLength;\r
 156     var queryParameter={"pageNo":pageNo,"pageSize":tableSetting._iDisplayLength,groupId:["it.group.database=02","it.group.server=01"]},\r
 157         newData={"data":JSON.stringify(queryParameter)};\r
 158     //put the pageinfo in cond if there is a pageinfo \r
 159     var pageInfo = vm.logInfo[vm.logType].pageInfo;\r
 160     if(pageInfo != null && serverPageTable.perpagenumber == pageSize){ \r
 161         cond.idEnd = pageInfo.pageStart[pageNo - 1];\r
 162         cond.idStart = pageInfo.pageStart[pageNo];\r
 163         if(!cond.idStart){ //the last page\r
 164             cond.idStart = 0;\r
 165         }\r
 166 \r
 167     }else{\r
 168         delete cond.idStart;\r
 169         delete cond.idEnd;\r
 170         vm.logInfo[vm.logType].pageInfo = null;\r
 171         pageNo = 1;\r
 172         tableSetting._iDisplayStart = 0;\r
 173     }\r
 174     var data = {\r
 175         cond:JSON.stringify(cond),\r
 176         perpagenumber:pageSize,\r
 177         pageNo:pageNo,\r
 178         needPageInfo:vm.logInfo[vm.logType].pageInfo == null\r
 179     };\r
 180     serverPageTable.perpagenumber = pageSize;\r
 181     return data;\r
 182 };\r
 183 \r
 184 serverPageTable.initTableWithoutLib = function( setting ,cond , divId) {\r
 185     //transform colomn\r
 186     var column = setting.columns;\r
 187     //empty table\r
 188     $('#'+ divId).children().remove();\r
 189     var tableId = setting.tableId;\r
 190     var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
 191         + '<thead>'\r
 192         +'<tr role="row" class="heading" >'\r
 193         + '</tr>'\r
 194         + '</thead>'\r
 195         +'<tbody>'\r
 196         +'</tbody>'\r
 197         +'</table>';\r
 198     $('#'+ divId).append(tableEleStr);\r
 199     //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');\r
 200     var trEle = $('#'+ tableId  + ' > thead >tr');\r
 201     //var dataTableColumn = [];\r
 202     for ( var one in column){\r
 203         var th = '<th>' + column[one].name + '</th>';\r
 204         trEle.append(th);\r
 205     }\r
 206     var table = $("#" + tableId).dataTable({\r
 207         //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout\r
 208         //"sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",\r
 209         //"sDom": '<"top"rt><"bottom"lip>',\r
 210         "sDom": '<"top"rt>',\r
 211         "oLanguage": setting.language,//language\r
 212         //"bJQueryUI": true,\r
 213         "bPaginate": setting.paginate,// page button\r
 214         "bFilter": false,// search bar\r
 215         "bAutoWidth":true,//automatically set colum width\r
 216         "bLengthChange": true,// record number in each row\r
 217         "iDisplayLength": 10,// row number in each page\r
 218         "bSort": setting.sort ? true : false,// sort\r
 219         "bInfo": setting.info,// Showing 1 to 10 of 23 entries\r
 220         "bWidth": true,\r
 221         "bScrollCollapse": true,\r
 222         "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
 223         "bProcessing": true,\r
 224         "bServerSide": false,\r
 225         "bDestroy": true,\r
 226         "bSortCellsTop": true,\r
 227         "sAjaxSource": setting.restUrl,\r
 228         "aoColumns": setting.columns,\r
 229         "aoColumnDefs": [\r
 230             {\r
 231                 sDefaultContent: '',\r
 232                 aTargets: [ '_all' ]\r
 233             }\r
 234         ],\r
 235         "fnServerData": function (sSource, aoData, fnCallback, oSettings) {\r
 236             oSettings.jqXHR = $.ajax({\r
 237                 "type": 'get',\r
 238                 "url": sSource,\r
 239                 "dataType": "json",\r
 240                 //"data":serverPageTable.getRestPara(cond,oSettings),\r
 241                 "success": function (resp) {\r
 242                     oSettings.iDraw = oSettings.iDraw + 1;\r
 243 \r
 244                     resp = resp || [];\r
 245                     var data = {};\r
 246                     data.aaData = resp;\r
 247                     var totalCounts = resp.length;\r
 248 \r
 249                     data.iTotalRecords = totalCounts;\r
 250                     data.iTotalDisplayRecords = totalCounts;\r
 251                     data.sEcho = oSettings;\r
 252                     fnCallback(data);\r
 253                 },\r
 254                 "error": function(resp) {\r
 255                     var data = {};\r
 256                     data.aaData = [];\r
 257                     var totalCounts = 0;\r
 258 \r
 259                     data.iTotalRecords = totalCounts;\r
 260                     data.iTotalDisplayRecords = totalCounts;\r
 261                     data.sEcho = oSettings;\r
 262                     fnCallback(data);\r
 263                 }\r
 264             });\r
 265         }\r
 266     });\r
 267 };\r
 268 \r
 269 serverPageTable.initDataTable = function( setting ,cond , divId) {\r
 270     //transform colomn\r
 271     var column = setting.columns;\r
 272     //empty table\r
 273     $('#'+ divId).children().remove();\r
 274     var tableId = setting.tableId;\r
 275     var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
 276         + '<thead>'\r
 277         +'<tr role="row" class="heading" >'\r
 278         + '</tr>'\r
 279         + '</thead>'\r
 280         +'<tbody>'\r
 281         +'</tbody>'\r
 282         +'</table>';\r
 283     $('#'+ divId).append(tableEleStr);\r
 284     //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');\r
 285     var trEle = $('#'+ tableId  + ' > thead >tr');\r
 286     //var dataTableColumn = [];\r
 287     for ( var one in column){\r
 288         var th = '<th>' + column[one].name + '</th>';\r
 289         trEle.append(th);\r
 290     }\r
 291     var table = $("#" + tableId).dataTable({\r
 292         //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout\r
 293         //"sDom" : "<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>",\r
 294         "sDom": '<"top"rt><"bottom"lip>',\r
 295         "oLanguage": setting.language,//language\r
 296         //"bJQueryUI": true,\r
 297         "bPaginate": setting.paginate,// page button\r
 298         "bFilter": false,// search bar\r
 299         "bAutoWidth":true,//automatically set colum width\r
 300         "bLengthChange": true,// record number in each row\r
 301         "iDisplayLength": 10,// row number in each page\r
 302         "bSort": setting.sort ? true : false,// sort\r
 303         "bInfo": setting.info,// Showing 1 to 10 of 23 entries \r
 304         "bWidth": true,\r
 305         "bScrollCollapse": true,\r
 306         "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
 307         "bProcessing": true,\r
 308         "bServerSide": false,\r
 309         "bDestroy": true,\r
 310         "bSortCellsTop": true,\r
 311         "sAjaxSource": setting.restUrl,\r
 312         "aoColumns": setting.columns,\r
 313         "aoColumnDefs": [\r
 314             {\r
 315                 sDefaultContent: '',\r
 316                 aTargets: [ '_all' ]\r
 317             }\r
 318         ],\r
 319         "fnServerData": function (sSource, aoData, fnCallback, oSettings) {\r
 320             oSettings.jqXHR = $.ajax({\r
 321                 "type": 'get',\r
 322                 "url": sSource,\r
 323                 "dataType": "json",\r
 324                 //"data":serverPageTable.getRestPara(cond,oSettings),\r
 325                 "success": function (resp) {                                       \r
 326                     oSettings.iDraw = oSettings.iDraw + 1;\r
 327                     \r
 328                     resp = resp || [];\r
 329                     var data = {};\r
 330                     data.aaData = resp;\r
 331                     var totalCounts = resp.length;\r
 332                     \r
 333                     data.iTotalRecords = totalCounts;\r
 334                     data.iTotalDisplayRecords = totalCounts;\r
 335                     data.sEcho = oSettings;\r
 336                     fnCallback(data);\r
 337                 },\r
 338                 "error": function(resp) {\r
 339                     var data = {};\r
 340                     data.aaData = [];\r
 341                     var totalCounts = 0;\r
 342                     \r
 343                     data.iTotalRecords = totalCounts;\r
 344                     data.iTotalDisplayRecords = totalCounts;\r
 345                     data.sEcho = oSettings;\r
 346                     fnCallback(data);\r
 347                 }\r
 348             });\r
 349         }\r
 350     });\r
 351 };\r
 352 \r
 353 serverPageTable.initTableWithData = function( setting , divId , tableData) {\r
 354     //transform colomn\r
 355     var column = setting.columns;\r
 356     //empty table\r
 357     $('#'+ divId).children().remove();\r
 358     var tableId = setting.tableId;\r
 359     var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
 360         + '<thead>'\r
 361         +'<tr role="row" class="heading" >'\r
 362         + '</tr>'\r
 363         + '</thead>'\r
 364         +'<tbody>'\r
 365         +'</tbody>'\r
 366         +'</table>';\r
 367     $('#'+ divId).append(tableEleStr);\r
 368     var trEle = $('#'+ tableId  + ' > thead >tr');\r
 369     for ( var one in column){\r
 370         var th = '<th>' + column[one].name + '</th>';\r
 371         trEle.append(th);\r
 372     }\r
 373     var table = $("#" + tableId).dataTable({\r
 374         "sDom" : "<'row'<'col-md-12 col-sm-12'lip>r>>",\r
 375         "oLanguage": setting.language,//language\r
 376         //"bJQueryUI": true,\r
 377         "bPaginate": setting.paginate,// page button\r
 378         "bFilter": false,// search bar\r
 379         "bAutoWidth":true,//automatically set the column width\r
 380         "bLengthChange": true,// record number in each row\r
 381         "iDisplayLength": 10,// row number in each page\r
 382         "bSort": setting.sort ? true : false,// sort\r
 383         "bInfo": setting.info,// Showing 1 to 10 of 23 entries\r
 384         "bWidth": true,\r
 385         "bScrollCollapse": true,\r
 386         "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
 387         "bProcessing": false,\r
 388         "bServerSide": false,\r
 389         "bDestroy": true,\r
 390         "bSortCellsTop": true,\r
 391         "sAjaxSource": tableData,\r
 392         "aoColumns": setting.columns,\r
 393         "fnServerData": function (sSource, aoData, fnCallback, oSettings) {                    \r
 394             oSettings.iDraw = oSettings.iDraw + 1;            \r
 395             var resp = tableData || [];\r
 396             var data = {};\r
 397             data.aaData = resp;\r
 398             var totalCounts = resp.length;\r
 399             \r
 400             data.iTotalRecords = totalCounts;\r
 401             data.iTotalDisplayRecords = totalCounts;\r
 402             data.sEcho = oSettings;\r
 403             fnCallback(data); \r
 404         }\r
 405     });\r
 406 };\r
 407 \r
 408 \r
 409 serverPageTable.initDataTableForEvent = function( setting ,cond , divId) {\r
 410     //transform colomn\r
 411     var column = setting.columns;\r
 412     //empty table\r
 413     $('#'+ divId).children().remove();\r
 414     var tableId = setting.tableId;\r
 415     var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'\r
 416         + '<thead>'\r
 417         +'<tr role="row" class="heading" >'\r
 418         + '</tr>'\r
 419         + '</thead>'\r
 420         +'<tbody>'\r
 421         +'</tbody>'\r
 422         +'</table>';\r
 423     $('#'+ divId).append(tableEleStr);\r
 424     var trEle = $('#'+ tableId  + ' > thead >tr');\r
 425     for ( var one in column){\r
 426         var th = '<th>' + column[one].name + '</th>';\r
 427         trEle.append(th);\r
 428     }\r
 429     var table = $("#" + tableId).dataTable({\r
 430         "sDom": '<"top"rt><"bottom"lip>',\r
 431         "oLanguage": setting.language,//language\r
 432         //"bJQueryUI": true,\r
 433         "bPaginate": setting.paginate,// page button\r
 434         "bFilter": false,// search bar\r
 435         "bAutoWidth":true,//automatically set the column width\r
 436         "bLengthChange": true,// record number in each row\r
 437         "iDisplayLength": 10,// row number in each page\r
 438         "bSort": setting.sort ? true : false,\r
 439         "bInfo": setting.info,// Showing 1 to 10 of 23 entries \r
 440         "bWidth": true,\r
 441         "bScrollCollapse": true,\r
 442         "sPaginationType": "bootstrap_extended", // page, a total of two kinds of style, another one is two_button\r
 443         "bProcessing": true,\r
 444         "bServerSide": false,\r
 445         "bDestroy": true,\r
 446         "bSortCellsTop": true,\r
 447         "sAjaxSource": setting.restUrl,\r
 448         "aoColumns": setting.columns,\r
 449         "aoColumnDefs": [\r
 450             {\r
 451                 sDefaultContent: '',\r
 452                 aTargets: [ '_all' ]\r
 453             }\r
 454         ],\r
 455         "fnServerData": function (sSource, aoData, fnCallback, oSettings) {\r
 456             oSettings.jqXHR = $.ajax({\r
 457                 "type": 'get',\r
 458                 "url": sSource,\r
 459                 "dataType": "json",\r
 460                 //"data":serverPageTable.getRestPara(cond,oSettings),\r
 461                 "success": function (resp) {                                       \r
 462                     oSettings.iDraw = oSettings.iDraw + 1;\r
 463                     \r
 464                     var result = [];\r
 465                     for(var i=0;i<resp.length;i++) {\r
 466                         result.push(resp[i].currentStepInfo);\r
 467                     }\r
 468                     var data = {};\r
 469                     data.aaData = result;\r
 470                     var totalCounts = result.length;\r
 471                     \r
 472                     data.iTotalRecords = totalCounts;\r
 473                     data.iTotalDisplayRecords = totalCounts;\r
 474                     data.sEcho = oSettings;\r
 475                     fnCallback(data);\r
 476                 },\r
 477                 "error": function(resp) {\r
 478                     var data = {};\r
 479                     data.aaData = [];\r
 480                     var totalCounts = 0;\r
 481                     \r
 482                     data.iTotalRecords = totalCounts;\r
 483                     data.iTotalDisplayRecords = totalCounts;\r
 484                     data.sEcho = oSettings;\r
 485                     fnCallback(data);\r
 486                 }\r
 487             });\r
 488         }\r
 489     });\r
 490 };