Jquery mehrere Tabellenzeilen teilen in separaten Seiten Wenn Drucken

Ich habe mehrere Tabelle wie diese 1st table 2nd table Ich möchte diese Tabellenzeilen in separaten Seiten teilen. Jede Seite enthält 15 oder 20 Zeilen. Nachdem die erste Tabelle vollständig getrennt wurde, beginnt die zweite Tabelle. Diese Codes wiederholen den Kopftext auf der nächsten Seite, wenn ich sie drucken möchte.Jquery mehrere Tabellenzeilen teilen in separaten Seiten Wenn Drucken

bitte helfen

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>

Quelle

2017-02-04 Luis

Sie suchen "Paginierung". – Chris

nein ich bin auf der Suche nach Seitenumbrüche in Tabellenzeilen für den Druck – Luis

Willkommen bei Stack Overflow! Wir sind eine Frage-und-Antwort-Seite, kein Coder-for-Hire-Service. Bitte erläutern Sie, was Sie bisher versucht haben und warum es nicht funktioniert hat. Siehe: [Warum ist "Kann mir jemand helfen?" keine Frage?] (http://meta.stackoverflow.com/q/284236) –

Ich glaube, diese Änderung das tut, was Sie wollen.

Ich habe den Code geändert, damit die geklonten Tabellen nicht in den Originaltabellen bleiben.

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>

Quelle

2017-02-04 09:05:40

Beispiel mit Button zum Drucken auf dieser Fidel: https: //jsfiddle.net/Leon_Klaj/pnen5g3f/2/ –

aktualisieren Sie es, warum klonen Tabellenzeilen Breite nicht mit den wichtigsten Tabellenzeilen übereinstimmen. Bitte helfen https://jsfiddle.net/pnen5g3f/7/ – Luis

@Luis, Update erfolgt. https://jsfiddle.net/pnen5g3f/8/ –

Jquery mehrere Tabellenzeilen teilen in separaten Seiten Wenn Drucken

Antwort

Verwandte Themen