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

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