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

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