Skip to content Skip to sidebar Skip to footer
Home / Ajax / Html / Javascript / Jquery

Jquery Multiple Tables Row Separate In Pages For Print

Post a Comment
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 moreif (pages == 1) {
      return;
    }
    //get the table we're spluttingvar table_to_split = $(element);

    var current_page = 1;
    //loop through each of our pagesfor (current_page = 1; current_page <= pages; current_page++) {
      //make a new copy of the tablevar 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 maxif (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 pageif (loop < per_page) {
          //remove that one
          $(row_element).remove();
        }
      });

      //insert the other table afdter the copyif (current_page < pages) {
        //check here if the table has trs then append else do nothingif (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><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><linkrel="stylesheet"href="style.css" /><scriptsrc="script.js"></script></head><body><scriptsrc="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><divid="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"