JQuery Multiple Tables Row Separate In Pages For Print
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
Solution 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.
Post a Comment for "JQuery Multiple Tables Row Separate In Pages For Print"