Jquery Несколько строк таблицы Разделяются в отдельных страницах при печати

У меня есть несколько таблиц, подобных этим 1st table 2nd table Я хочу разделить эти строки таблицы на отдельных страницах. каждая страница содержит 15 или 20 строк, после завершения 1-й таблицы, затем начнется вторая таблица. этот код повторяет текст главы на следующей странице при печати, которую я хочу удалить.Jquery Несколько строк таблицы Разделяются в отдельных страницах при печати

пожалуйста, помогите

jQuery(document).ready(function() { 
 
     for (i = 0; i < document.getElementsByClassName("testInfoTable").length; i++) { 
 
     document.getElementsByClassName("testInfoTable")[i].style.pageBreakBefore = "always"; 
 

 
     } 
 
     var div_pageBreaker = '<div style="page-break-before:always;"></div>'; 
 
     var per_page = 15; 
 
\t 
 
     $('.testInfoTable').each(function(index, element) { 
 
     var pages = Math.ceil($(element).find('tbody tr').length/per_page); 
 

 
     if (pages == 1) { 
 
      return; 
 
     } 
 
     var table_to_split = $(element); 
 

 
     var current_page = 1; 
 
     
 
\t \t for (current_page = 1; current_page <= pages; current_page++) { 
 
      
 
\t \t var cloned_table = table_to_split.clone(); 
 
      
 
\t \t $('tbody tr', table_to_split).each(function(loop, row_element) { 
 
      
 
\t \t \t if (loop >= per_page) { 
 
       
 
\t \t \t $(row_element).remove(); 
 
      } 
 
      }); 
 

 
      
 
\t \t $('tbody tr', cloned_table).each(function(loop, row_element) { 
 
      
 
\t \t \t if (loop < per_page) { 
 
       
 
\t \t \t $(row_element).remove(); 
 
      } 
 
      }); 
 

 
      
 
\t \t if (current_page < pages) { 
 
      if (cloned_table.find('tbody tr').length > 0) { 
 
       
 
\t \t \t $(element).find(".text").html("What"); 
 
\t \t \t \t $(cloned_table).find("h4").html("What"); 
 
\t \t \t \t $(div_pageBreaker).appendTo($(element)); 
 
\t \t \t \t $(cloned_table).appendTo($(element)); 
 
\t \t \t 
 
      } 
 
      } 
 

 
      //make a break 
 
      table_to_split = cloned_table; 
 
     } 
 
     }); 
 

 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> 
 
<div> 
 

 
    <table class="testInfoTable"> 
 
    <thead> 
 
\t \t <tr><th> Table 1 Head 1</th> </tr> 
 
\t \t <tr><th> <div>Table 1 Head 2</div></th> </tr> 
 
\t \t <tr><th> <div>Table 1 Head 3</div></th> </tr> 
 
\t \t <tr> 
 
\t \t \t <th> 
 
\t \t \t \t <h4 class="text">Head Text : Table 1</h4> 
 
\t \t \t </th> 
 
\t \t </tr> 
 
    </thead> 
 
    <tbody> 
 
\t \t <tr><td>1</td> <td>1</td> <td>1</td></tr> 
 
\t \t <tr><td>2</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>3</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>4</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>5</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>6</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>7</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>8</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>9</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>10</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>11</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>12</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>13</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>14</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>15</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>16</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>17</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>18</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>19</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>20</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>21</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>22</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>23</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>24</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>25</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>26</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>27</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>28</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>29</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>30</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>31</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>32</td> <td>1</td> <td>1</td> </tr> 
 
\t </tbody> 
 
    </table> 
 

 
    <table class="testInfoTable"> 
 
    <thead> 
 
\t \t <tr><th> Table 2 Head 1</th> </tr> 
 
\t \t <tr><th> <div>Table 2 Head 2</div></th> </tr> 
 
\t \t <tr><th> <div>Table 2 Head 3</div></th> </tr> 
 
\t \t <tr> 
 
\t \t \t <th> 
 
\t \t \t \t <h4 class="text">Head Text : Table 2</h4> 
 
\t \t \t </th> 
 
\t \t </tr> 
 
    </thead> 
 
    <tbody> 
 
\t \t <tr><td>1</td> <td>1</td> <td>1</td></tr> 
 
\t \t <tr><td>2</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>3</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>4</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>5</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>6</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>7</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>8</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>9</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>10</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>11</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>12</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>13</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>14</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>15</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>16</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>17</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>18</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>19</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>20</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>21</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>22</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>23</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>24</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>25</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>26</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>27</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>28</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>29</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>30</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>31</td> <td>1</td> <td>1</td> </tr> 
 
\t \t <tr><td>32</td> <td>1</td> <td>1</td> </tr> 
 
\t </tbody> 
 
    </table> 
 
    <div id="appendTable"></div> 
 
</div> 
 
    </body> 
 

 
</html>

источник

2017-02-04 Luis

Вы ищете "пагинацией". – Chris

no Я ищу разбивку страницы в строках таблицы для печати – Luis

Добро пожаловать в Stack Overflow! Мы являемся сайтом «вопрос-ответ», а не услугой «Кодеры для найма». Пожалуйста, объясните, что вы пробовали до сих пор, и почему это не сработало. Смотрите: [Почему «Кто-нибудь может мне помочь?» не актуальный вопрос?] (http://meta.stackoverflow.com/q/284236) –

Я считаю, что эта модификация делает то, что вы хотите.

Я изменил код, поэтому клонированные таблицы не остаются внутри исходных таблиц.

jQuery(document).ready(function() { 
 

 
    var per_page = 15; 
 

 
    $('.testInfoTable').each(function (index, element) { 
 
     var pages = Math.ceil($(element).find('tbody tr').length/per_page); 
 

 
     if (pages == 1) { 
 
      return; 
 
     } 
 
     var table_to_split = $(element); 
 

 
     var current_page = 1; 
 

 
     for (current_page = 1; current_page <= pages; current_page++) { 
 

 
      var cloned_table = $('<table><tbody>' + table_to_split.find('tbody').html() + '</tbody></table>'); 
 

 
      cloned_table.addClass("testInfoTable cloned") 
 

 
      $('tbody tr', table_to_split).each(function (loop, row_element) { 
 

 
       if (loop >= per_page) { 
 

 
        $(row_element).remove(); 
 
       } 
 
      }); 
 

 

 
      $('tr', cloned_table).each(function (loop, row_element) { 
 

 
       if (loop < per_page) { 
 

 
        $(row_element).remove(); 
 
       } 
 

 
      }); 
 

 

 
      if (current_page < pages) { 
 
      
 
       table_to_split.after(cloned_table); 
 

 
       cloned_table.width(table_to_split.width()); 
 

 
      } 
 

 
      table_to_split = cloned_table;   
 

 

 
     } 
 

 

 
    }); 
 

 

 
    $('<tr><th colspan="3"><h4 class="text">Table Head</h4></th></tr>').prependTo('table.cloned') 
 

 

 
});

table.testInfoTable { 
 
    page-break-before: always; 
 
    width: 200px; 
 
} 
 

 
table.testInfoTable td, table.testInfoTable th { 
 

 
     border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="button" value="PRINT" onclick="window.print();" /> 
 

 
<table class="testInfoTable"> 
 
<thead> 
 
<tr><th colspan="3"> Table 1 Head 1</th> </tr> 
 
<tr><th colspan="3"> <div>Table 1 Head 2</div></th> </tr> 
 
<tr><th colspan="3"> <div>Table 1 Head 3</div></th> </tr> 
 
<tr> 
 
<th colspan="3"> 
 
<h4 class="text">Head Text : Table 1</h4> 
 
</th> 
 
</tr> 
 
</thead> 
 
    
 
<tbody> 
 
<tr><td>1</td> <td>1</td><td>1</td></tr> 
 
<tr><td>2</td><td>1</td><td>1</td></tr> 
 
<tr><td>3</td><td>1</td><td>1</td></tr> 
 
<tr><td>4</td><td>1</td><td>1</td></tr> 
 
<tr><td>5</td><td>1</td><td>1</td></tr> 
 
<tr><td>6</td><td>1</td><td>1</td></tr> 
 
<tr><td>7</td><td>1</td><td>1</td></tr> 
 
<tr><td>8</td><td>1</td><td>1</td></tr> 
 
<tr><td>9</td><td>1</td><td>1</td></tr> 
 
<tr><td>10</td><td>1</td><td>1</td></tr> 
 
<tr><td>11</td><td>1</td><td>1</td></tr> 
 
<tr><td>12</td><td>1</td><td>1</td></tr> 
 
<tr><td>13</td><td>1</td><td>1</td></tr> 
 
<tr><td>14</td><td>1</td><td>1</td></tr> 
 
<tr><td>15</td><td>1</td><td>1</td></tr> 
 
<tr><td>16</td><td>1</td><td>1</td></tr> 
 
<tr><td>17</td><td>1</td><td>1</td></tr> 
 
<tr><td>18</td><td>1</td><td>1</td></tr> 
 
<tr><td>19</td><td>1</td><td>1</td></tr> 
 
<tr><td>20</td><td>1</td><td>1</td></tr> 
 
<tr><td>21</td><td>1</td><td>1</td></tr> 
 
<tr><td>22</td><td>1</td><td>1</td></tr> 
 
<tr><td>23</td><td>1</td><td>1</td></tr> 
 
<tr><td>24</td><td>1</td><td>1</td></tr> 
 
<tr><td>25</td><td>1</td><td>1</td></tr> 
 
<tr><td>26</td><td>1</td><td>1</td></tr> 
 
<tr><td>27</td><td>1</td><td>1</td></tr> 
 
<tr><td>28</td><td>1</td><td>1</td></tr> 
 
<tr><td>29</td><td>1</td><td>1</td></tr> 
 
<tr><td>30</td><td>1</td><td>1</td></tr> 
 
<tr><td>31</td><td>1</td><td>1</td></tr> 
 
<tr><td>32</td><td>1</td><td>1</td></tr> 
 
</tbody> 
 
</table> 
 

 
<table class="testInfoTable"> 
 
    <thead> 
 
     <tr><th colspan="3"> Table 2 Head 1</th> </tr> 
 
     <tr><th colspan="3"> <div>Table 2 Head 2</div></th> </tr> 
 
     <tr><th colspan="3"> <div>Table 2 Head 3</div></th> </tr> 
 
     <tr> 
 
      <th colspan="3"> 
 
       <h4 class="text">Head Text : Table 2</h4> 
 
      </th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr><td>1</td> <td>1</td><td>1</td></tr> 
 
     <tr><td>2</td><td>1</td><td>1</td></tr> 
 
     <tr><td>3</td><td>1</td><td>1</td></tr> 
 
     <tr><td>4</td><td>1</td><td>1</td></tr> 
 
     <tr><td>5</td><td>1</td><td>1</td></tr> 
 
     <tr><td>6</td><td>1</td><td>1</td></tr> 
 
     <tr><td>7</td><td>1</td><td>1</td></tr> 
 
     <tr><td>8</td><td>1</td><td>1</td></tr> 
 
     <tr><td>9</td><td>1</td><td>1</td></tr> 
 
     <tr><td>10</td><td>1</td><td>1</td></tr> 
 
     <tr><td>11</td><td>1</td><td>1</td></tr> 
 
     <tr><td>12</td><td>1</td><td>1</td></tr> 
 
     <tr><td>13</td><td>1</td><td>1</td></tr> 
 
     <tr><td>14</td><td>1</td><td>1</td></tr> 
 
     <tr><td>15</td><td>1</td><td>1</td></tr> 
 
     <tr><td>16</td><td>1</td><td>1</td></tr> 
 
     <tr><td>17</td><td>1</td><td>1</td></tr> 
 
     <tr><td>18</td><td>1</td><td>1</td></tr> 
 
     <tr><td>19</td><td>1</td><td>1</td></tr> 
 
     <tr><td>20</td><td>1</td><td>1</td></tr> 
 
     <tr><td>21</td><td>1</td><td>1</td></tr> 
 
     <tr><td>22</td><td>1</td><td>1</td></tr> 
 
     <tr><td>23</td><td>1</td><td>1</td></tr> 
 
     <tr><td>24</td><td>1</td><td>1</td></tr> 
 
     <tr><td>25</td><td>1</td><td>1</td></tr> 
 
     <tr><td>26</td><td>1</td><td>1</td></tr> 
 
     <tr><td>27</td><td>1</td><td>1</td></tr> 
 
     <tr><td>28</td><td>1</td><td>1</td></tr> 
 
     <tr><td>29</td><td>1</td><td>1</td></tr> 
 
     <tr><td>30</td><td>1</td><td>1</td></tr> 
 
     <tr><td>31</td><td>1</td><td>1</td></tr> 
 
     <tr><td>32</td><td>1</td><td>1</td></tr> 
 
    </tbody> 
 
</table>

источник

2017-02-04 09:05:40

Рабочий пример с кнопкой для печати на этой скрипке: https: //jsfiddle.net/Leon_Klaj/pnen5g3f/2/ –

обновите его, почему ширина строк таблицы клонирования не совпадает с строками основной таблицы. Пожалуйста, помогите https://jsfiddle.net/pnen5g3f/7/ – Luis

@ Luis, обновление сделано. https://jsfiddle.net/pnen5g3f/8/ –

Jquery Несколько строк таблицы Разделяются в отдельных страницах при печати

ответ

Смежные вопросы