第三章完结

css/section_3.css

@@ -9,4 +9,7 @@
   width: 2mm;
   height: 2mm;
   border-radius: 50%;
+}
+.ChapterThree .points{
+  width: 50mm;
 }

js/section_3.js

@@ -52,7 +52,7 @@ $(function () {
       },
       radar: {
         radius: "60%",
-        center: ["50%", "55%"],
+        center: ["50%", "50%"],
         indicator: arrList
       },
       series: {
@@ -96,9 +96,20 @@ $(function () {
   function showlargeAnalysistable (list,legendlist,s_index) {
     var table = "",goodTableHeadTr1Html = '<th rowspan="2">题型</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
       goodTableHeadTr2Html = "", trHtml = "";
+    var data = {
+      0:""
+    }, page = 0;
+    var pointnum = s_index == 0?11:16;//第一次是半页 显示十条 往后二十条每页
     $.each(list, function (idx, item) {
-      trHtml += "<tr>";
-      trHtml+= '<td><div class="my_cell">' +
+      if((idx + 1) % pointnum == 0){
+        page++;
+        if (page == 1) {
+          pointnum = 31;
+        }
+        data[page] = ""; 
+      }
+      data[page] += "<tr>";
+      data[page]+= '<td><div class="my_cell">' +
       item.qtypename +
       '</div></td><td><div class="my_cell">' +
       item.qns +
@@ -117,9 +128,11 @@ $(function () {
       "%" +
       '</div></td>';
     })
+    console.log(page,data);
     $.each(legendlist, function (idx, item) {
       goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
     })
+
       table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
         goodTableHeadTr1Html  +
         '</tr><tr class="goodTableHeadTr2">' +
@@ -127,7 +140,24 @@ $(function () {
         '</tr></thead><tbody class="goodTableTbody">' +
         trHtml  +
       "</tbody></table>"
-    $(".section_3_"+s_index +" .largeAnalysistable").html(table)
+     for (var i = 0; i <= page; i++){
+      table ='<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
+        goodTableHeadTr1Html  +
+        '</tr><tr class="goodTableHeadTr2">' +
+        goodTableHeadTr2Html  +
+        '</tr></thead><tbody class="goodTableTbody">' +
+        data[i]  +
+        "</tbody></table>"
+      $(".section_3_" + s_index + ".large_"+ i+" .largeAnalysistable").html(table);
+      if (i != 0) {
+         //添加分页
+        $(".large_"+ (i-1)+".section_3_"+s_index).after(
+        '<div class="page_root section_3_'+s_index+' large_'+i+'"></div>'
+        );
+      $(".page_root.section_3_"+s_index+'.large_'+i).html(table); 
+      }
+    }
+    // $(".section_3_"+s_index +" .largeAnalysistable").html(table)
   }
 
   function initSmallAnalysisEcharts (s_index,list) {
@@ -449,11 +479,22 @@ $(function () {
   }
 
   function showpointsAnalysistable (list, legendlist, s_index) {
-     var table = "",goodTableHeadTr1Html = '<th rowspan="2">知识点</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
+     var table = "",goodTableHeadTr1Html = '<th rowspan="2" class="points">知识点</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">'+currentclass+'</th>',
       goodTableHeadTr2Html = "", trHtml = "";
+    var data = {
+      0:""
+    }, page = 0;
+    var pointnum = 16;//第一次是半页 显示十条 往后二十条每页
     $.each(list, function (idx, item) {
-      trHtml += "<tr>";
-      trHtml+= '<td><div class="my_cell">' +
+      if((idx + 1) % pointnum == 0){
+        page++;
+        if (page == 1) {
+          pointnum = 31;
+        }
+        data[page] = ""; 
+      }
+      data[page] += "<tr>";
+      data[page]+= '<td><div class="my_cell">' +
       item.pointname +
       '</div></td><td><div class="my_cell">' +
       item.qns +
@@ -475,26 +516,33 @@ $(function () {
     $.each(legendlist, function (idx, item) {
       goodTableHeadTr2Html+="<th>平均分</th><th>得分率</th>";
     })
-      table ='  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
+    for (var i = 0; i <= page; i++){
+      table ='<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
         goodTableHeadTr1Html  +
         '</tr><tr class="goodTableHeadTr2">' +
         goodTableHeadTr2Html  +
         '</tr></thead><tbody class="goodTableTbody">' +
-        trHtml  +
-      "</tbody></table>"
-    $(".section_3_" + s_index + " .pointsAnalysistable").html(table);
-    console.log($(".section_3_" + s_index + " .pointsAnalysistable").height());
-    var 
+        data[i]  +
+        "</tbody></table>"
+      $(".section_3_" + s_index + ".page_"+ i+" .pointsAnalysistable").html(table);
+      if (i != 0) {
+         //添加分页
+        $(".page_"+ (i-1)+".section_3_"+s_index).after(
+        '<div class="page_root section_3_'+s_index+' page_'+i+'"></div>'
+        );
+      $(".page_root.section_3_"+s_index+'.page_'+i).html(table); 
+      }
+    }
   }
   var parameter = $(".section_3_html_root").data("page-params");
   parameter = JSON.parse(parameter);
   var html = "";
   $.each(parameter, function (s_index, item) {
-    html+='<div class="page_root section_3_'+s_index +'">'+
+    html+='<div class="page_root large_0 section_3_'+s_index +'">'+
      (s_index == 0?'<h1 class="section_title_1">第三章 试卷分析</h1><div class="abstract_box"><div class="abstract_left"><img src="/img/img2.png" /></div><div class="abstract_right"><div class="abstract_content">从学科试卷分析，帮我们从宏观的角度了解班级的水平和差异。系统从多个维度的数据进行学科对比分析，<strong>包括大题年级和班级的（平均分、得分率）、小题年级和班级的（平均分、得分率）。</strong></div></div></div>':"")+ 
       '<h1 class="subjectinfo">'+item.subjectname+'试卷分析</h1><h2 class="section_title_2">1. 大题分析</h2><h3 class="section_title_3">1.1 大题分析</h3><div id="largeAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3">1.2 大题整体分析</h2><div class="largeAnalysistable"></div></div><div class="page_root section_3_'+
     s_index + '"><h2 class="section_title_2">2. 小题分析</h2><h3 class="section_title_3">2.1 小题分析</h3><div id="SmallAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3_'+
-      s_index +'">2.2 小题整体分析</h2><div class="SmallAnalysistable"></div></div>'+(item.points.length>0?'<div class="page_root section_3_'+
+      s_index +'">2.2 小题整体分析</h2><div class="SmallAnalysistable"></div></div>'+(item.points.length>0?'<div class="page_root page_0 section_3_'+
     s_index +'"><h2 class="section_title_2">3. 知识点掌握整体概况</h2><h3 class="section_title_3">3.1 知识点得分率分析</h3><div id="pointsAnalysisEcharts" style="margin: 0 4mm 4mm; height: 90mm"></div><h2 class="section_title_3">3.2 知识点整体分析</h2><div class="pointsAnalysistable"></div></div></div>':"")
   })
   $(".ChapterThree").html(html);
@@ -505,5 +553,5 @@ $(function () {
     initpointsAnalysisEcharts(s_index, item.points);
   })
   
-   document.documentElement.scrollTop = 4000;
+  //  document.documentElement.scrollTop = 1000;
 });