jQuery multiple tables row separate in pages for print

Question

i want to divide multiple tables row in separate pages when print. First table rows separate complete then start next table rows separate and each page can contain 21rows

Any help with this is very much appreciated

 <script> jQuery(document).ready(function() { for (i=0; i<document.getElementsByTagName("table").length; i++) { document.getElementsByTagName("table")[i].style.pageBreakBefore="always"; } var div_pageBreaker = '<div style="page-break-before:always;"></div>'; var per_page = 15; $('table').each(function(index, element) { console.log($(element)); //how many pages of rows have we got? var pages = Math.ceil($('tbody tr').length / per_page); //if we only have one page no more if (pages == 1) { return; } //get the table we're splutting var table_to_split = $(element); var current_page = 1; //loop through each of our pages for (current_page = 1; current_page <= pages; current_page++) { //make a new copy of the table var cloned_table = table_to_split.clone(); //remove rows on later pages $('tbody tr', table_to_split).each(function(loop, row_element) { //if we've reached our max if (loop >= per_page) { //get rid of the row $(row_element).remove(); } }); //loop through the other copy $('tbody tr', cloned_table).each(function(loop, row_element) { //if we are before our current page if (loop < per_page) { //remove that one $(row_element).remove(); } }); //insert the other table afdter the copy if (current_page < pages) { $(div_pageBreaker).appendTo('#appendTable'); $(cloned_table).appendTo('#appendTable'); } //make a break table_to_split = cloned_table; } }); }); </script> 

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> <table> <thead> <tr> <td><h4>Table 1</h4></td> </tr> </thead> <tbody> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> <tr><td>9</td></tr> <tr><td>10</td></tr> <tr><td>11</td></tr> <tr><td>12</td></tr> <tr><td>13</td></tr> <tr><td>14</td></tr> <tr><td>15</td></tr> <tr><td>16</td></tr> </tbody> </table> <table> <thead> <tr> <td><h4>Table 2</h4></td> </tr> </thead> <tbody> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> <tr><td>6</td></tr> <tr><td>7</td></tr> <tr><td>8</td></tr> <tr><td>9</td></tr> <tr><td>10</td></tr> <tr><td>11</td></tr> <tr><td>12</td></tr> <tr><td>13</td></tr> <tr><td>14</td></tr> <tr><td>15</td></tr> </tbody> </table> <div id="appendTable"></div> 

Answer 1

this is the last code updated and blank pages are removed:-

  jQuery(document).ready(function() { for (i = 0; i < document.getElementsByTagName("table").length; i++) { document.getElementsByTagName("table")[i].style.pageBreakBefore = "always"; } var div_pageBreaker = '<div style="page-break-before:always;"></div>'; var per_page = 15; $('table').each(function(index, element) { debugger; console.log($(element)); //how many pages of rows have we got? //EDIT:????????????????????????????????? var pages = Math.ceil($(element).find('tbody tr').length / per_page); //if we only have one page no more if (pages == 1) { return; } //get the table we're splutting var table_to_split = $(element); var current_page = 1; //loop through each of our pages for (current_page = 1; current_page <= pages; current_page++) { //make a new copy of the table var cloned_table = table_to_split.clone(); //remove rows on later pages $('tbody tr', table_to_split).each(function(loop, row_element) { //if we've reached our max if (loop >= per_page) { //get rid of the row $(row_element).remove(); } }); //loop through the other copy $('tbody tr', cloned_table).each(function(loop, row_element) { //if we are before our current page if (loop < per_page) { //remove that one $(row_element).remove(); } }); //insert the other table afdter the copy if (current_page < pages) { //check here if the table has trs then append else do nothing if (cloned_table.find('tbody tr').length > 0) { //EDIT:????????????????????????????????? $(div_pageBreaker).appendTo($(element)); $(cloned_table).appendTo($(element)); } } //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> <table> <thead> <tr> <td> <h4>Table 1</h4></td> </tr> </thead> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> <tr> <td>11</td> </tr> <tr> <td>12</td> </tr> <tr> <td>13</td> </tr> <tr> <td>14</td> </tr> <tr> <td>15</td> </tr> <tr> <td>16</td> </tr> </tbody> </table> <table> <thead> <tr> <td> <h4>Table 2</h4></td> </tr> </thead> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> <tr> <td>11</td> </tr> <tr> <td>12</td> </tr> <tr> <td>13</td> </tr> <tr> <td>14</td> </tr> <tr> <td>15</td> </tr> </tbody> </table> <div id="appendTable"></div> </body> </html> 

Edit : This is a working Demo Hope this answers your Question.