分数段分页显示

js/scoreAnalysis/section_2_part.js

@@ -110,8 +110,10 @@ $(function () {
     var calsslist = [];
     var tableobj = {};
     var num = -1;
+    var rownum = 6;//一行七条数据
+    // if(s_index != 0) return
     $.each(xAxis_data, function (idx, item) {
-      if ((idx + 7) % 7 == 0) {
+      if ((idx + rownum) % rownum == 0) {
         num++;
         tableobj[num+"trHtml"] = "";
         tableobj[num + "goodTableHeadTr1Html"] = '<th rowspan="2">班级</th>';
@@ -134,7 +136,7 @@ $(function () {
         var rank = $.grep(classs, function (val) {
           return val.rankname == item;
         })[0];
-        if ((idx + 7) % 7 == 0) {
+        if ((idx + rownum) % rownum == 0) {
           num++;
           if (index == 0) {
             tableobj[num + "trHtml"] += "<tr>";
@@ -152,14 +154,43 @@ $(function () {
       });
        
     })
+    //计算表格高度 页面高1047 剩余高度700 表头62.5  内容27.42
+    var tableheight = (calsslist.length * 27.5+62.5 +15) * (num+1);
+    var page = {
+      1:"",2:"",3:""
+    }; //页数
     var table = "";
-    for (var i = 0; i < num+1; i++){
-      table+='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
-      tableobj[i+"goodTableHeadTr1Html"] + '</tr><tr class="goodTableHeadTr2">' +
-      tableobj[i+"goodTableHeadTr2Html"] + '</tr></thead><tbody class="goodTableTbody">' +
-      tableobj[i+"trHtml"] + '</tbody></table>'
+    var itemheight = calsslist.length * 27.5 + 62.5 + 15; //单表高度
+    var maxheight = 0;
+    for (var i = 0; i < num + 1; i++){
+      maxheight = itemheight * (i + 1)
+      var content = '  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
+        tableobj[i + "goodTableHeadTr1Html"] + '</tr><tr class="goodTableHeadTr2">' +
+        tableobj[i + "goodTableHeadTr2Html"] + '</tr></thead><tbody class="goodTableTbody">' +
+        tableobj[i + "trHtml"] + '</tbody></table>';
+      //计算剩余高度是否能显示最后一个表格
+      if (maxheight > 700 || 700-maxheight<itemheight) {
+        page[1] += content;
+      } else if (maxheight > 1747 || 1747-maxheight<itemheight) {
+        page[2] += content;
+      } else {
+        table += content;
+      }
+    }
+    $(".part_" + s_index + " .table_" + s_index + " ").html(table);
+    if (tableheight > 700) {
+      //添加第一页
+      $(".part_" + s_index).after('<div class="page_root section_2_part part_' +
+      s_index +
+        '_1"></div>')
+      $(".part_" + s_index + "_1").html(page[1]);
+    } else if (tableheight > 1747) {
+      //添加第二页
+      $(".part_" + s_index+'_1').after('<div class="page_root section_2_part part_' +
+      s_index +
+        '_2"></div>')
+      $(".part_" + s_index + "_2").html(page[2]);
     }
-    $(".part_"+ s_index + " .table_"+s_index+" ").html(table);
   }
   var parameter = $(".section_2_html_root .section_2_part_html_root").data(
     "page-params"
@@ -197,14 +228,15 @@ $(function () {
       s_item.subjectname +
       '分数段统计</h3><h4 class="section_title_4">3.' +
       (s_index + 1) +
-      '.1 各分数段分析</h4><div>当前设置分数段：<span class="curscorepart">10</span>分/段</div><div id="classPartEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div><h4 h4 class="section_title_4" > 3.' +
+      '.1 各分数段分析</h4><div>当前设置分数段：<span class="curscorepart">10</span>分/段</div><div id="classPartEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div><h4 class="section_title_4" > 3.' +
       (s_index + 1) +
-      '.2 各班等级比例分布<z < div class="table_'+s_index+'" ></ ></div > ';
+      '.2 各班等级比例分布 </h4><div class="tables table_'+s_index+'" ></div ></div > ';
     
   });
   $(".section_2_part_root").html(singleRootHtml);
   $.each(subjectInfo, function (s_index, s_item) { 
     $(".part_ " + s_index + " .curscorepart").text(s_item.maxscore);
-    classscorePartEcharts(s_index,s_item);
+    classscorePartEcharts(s_index, s_item);
+    // var height = $(".part_" + s_index).height()
   })
 });

sections/scoreAnalysis/section_2_part.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>校本PDF报告-第二章 成绩分析</title>
+    <link rel="stylesheet" href="../../css/scoreAnalysis/section_2_part.css" />
   </head>
   <body>
     <div class="section_2_part_root">