performance/src/main/webapp/performance/js/serverPageTable.js

   1 /*
   2  * Copyright 2016-2017, CMCC Technologies Co., Ltd.
   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 serverPageTable.initDataTable = function( setting , divId ,pageInfos) {
 153     serverPageTable.pageInfo = pageInfos;
 154     //转换colomn
 155
 156     var column = setting.columns;
 157     //先把原来的表格清空
 158     $('#'+ divId).children().remove();
 159     var tableId = setting.tableId;
 160     var tableEleStr = '<table class="table table-striped table-bordered table-hover" id= '+ tableId + '>'
 161         + '<thead>'
 162         +'<tr role="row" class="heading" >'
 163         + '</tr>'
 164         + '</thead>'
 165         +'<tbody>'
 166         +'</tbody>'
 167         +'</table>';
 168     $('#'+ divId).append(tableEleStr);
 169     //$('#'+ tableId).append(' <thead><tr role="row" class="heading" ></tr></thead><tbody></tbody>');
 170     var trEle = $('#'+ tableId  + ' > thead >tr');
 171     //var dataTableColumn = [];
 172     for ( var one in column){
 173         var th = '<th>' + column[one].name + '</th>';
 174         trEle.append(th);
 175     }
 176          serverPageTable.pageInfo = pageInfos;
 177         if(!setting.pageHtml){
 178            pageHtml="<'row'<'col-md-12 col-sm-12'lip>r><'table-scrollable't>>";
 179         }else{
 180           pageHtml=setting.pageHtml;
 181         }
 182     var table = $("#" + tableId).dataTable({
 183         //"sDom" : "tr<'row'<'col-md-6 col-sm-12'><'col-md-6 col-sm-12'pli>>", // datatable layout
 184         "sDom" : pageHtml,
 185         "oLanguage": setting.language,//汉化
 186         "bJQueryUI": true,
 187         "bPaginate": true,// 分页按钮
 188         "bFilter": false,// 搜索栏
 189         "bAutoWidth":true,//自动设置列宽
 190         "bLengthChange": true,// 每行显示记录数
 191         "iDisplayLength": 10,// 每页显示行数
 192         "bSort": false,// 排序
 193         "bInfo": true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
 194         "bWidth": true,
 195         "bScrollCollapse": true,
 196         "sPaginationType": "bootstrap_extended", // 分页，一共两种样式 另一种为two_button // 是datatables默认
 197         "bProcessing": true,
 198         "bServerSide": true,
 199         "bDestroy": true,
 200         "bSortCellsTop": true,
 201         "sAjaxSource": setting.restUrl,
 202         "aoColumns": setting.columns,
 203         "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
 204            fnServerData(sSource, aoData, fnCallback, oSettings);
 205         }
 206     });
 207     $('#'+ tableId + '>tbody').on('click', 'td.details-control', function () {
 208         var tr = $(this).closest('tr');
 209         //var nTr = $(this).parents('tr')[0];
 210         //var row = table.row( tr );
 211         if ( table.fnIsOpen(tr[0]) ){
 212             table.fnClose( tr[0] );
 213         //if ( row.child.isShown() ) {
 214             // This row is already open - close it
 215             //row.child.hide();
 216             tr.removeClass('shown');
 217         }
 218         else {
 219             // Open this row
 220             table.fnOpen( tr[0], format_Detail(table, tr[0],column) );
 221             //row.child( format_Detail(row.data()) ).show();
 222             tr.addClass('shown');
 223         }
 224     } );
 225     return table;
 226
 227
 228 };
 229
 230
 231
 232