javascript - 打印分页表(flaviusmatis 的 simplePagination.js)

Question

var search;

var searchdiv = $("#searchdiv");
var perPage = 3;
searchdiv.pagination({
  itemsOnPage: perPage,
  cssStyle: "light-theme",
  onPageClick: function(pageNumber) {
    var showFrom = perPage * (pageNumber - 1);
    var showTo = showFrom + perPage;

    search.hide()
      .slice(showFrom, showTo).show();
  }
});

function updateItems() {
  search = $(".geoname");
  searchdiv.pagination("updateItems", search.length);
  var page = Math.min(
    searchdiv.pagination("getCurrentPage"),
    searchdiv.pagination("getPagesCount")

  );

  searchdiv.pagination("selectPage", page);
}
updateItems();

var geo = {
  "geonames": [{
    "lng": -99.12766456604,
    "geonameId": 3530597,
    "countrycode": "MX",
    "name": "Mexiko-Stadt",
    "fclName": "city, village,...",
    "toponymName": "Mexico City",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Mexico_City",
    "lat": 19.428472427036,
    "fcl": "P",
    "population": 12294193,
    "fcode": "PPLC"
  }, {
    "lng": 116.397228240967,
    "geonameId": 1816670,
    "countrycode": "CN",
    "name": "Peking",
    "fclName": "city, village,...",
    "toponymName": "Beijing",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Beijing",
    "lat": 39.9074977414405,
    "fcl": "P",
    "population": 11716620,
    "fcode": "PPLC"
  }, {
    "lng": 120.9822,
    "geonameId": 1701668,
    "countrycode": "PH",
    "name": "Manila",
    "fclName": "city, village,...",
    "toponymName": "Manila",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Manila",
    "lat": 14.6042,
    "fcl": "P",
    "population": 10444527,
    "fcode": "PPLC"
  }, {
    "lng": 90.40743827819824,
    "geonameId": 1185241,
    "countrycode": "BD",
    "name": "Dhaka",
    "fclName": "city, village,...",
    "toponymName": "Dhaka",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Dhaka",
    "lat": 23.710395616597037,
    "fcl": "P",
    "population": 10356500,
    "fcode": "PPLC"
  }, {
    "lng": 126.9784,
    "geonameId": 1835848,
    "countrycode": "KR",
    "name": "Seoul",
    "fclName": "city, village,...",
    "toponymName": "Seoul",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Seoul",
    "lat": 37.566,
    "fcl": "P",
    "population": 10349312,
    "fcode": "PPLC"
  }, {
    "lng": 106.84513092041016,
    "geonameId": 1642911,
    "countrycode": "ID",
    "name": "Jakarta",
    "fclName": "city, village,...",
    "toponymName": "Jakarta",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Jakarta",
    "lat": -6.214623197035775,
    "fcl": "P",
    "population": 8540121,
    "fcode": "PPLC"
  }, {
    "lng": 139.69171,
    "geonameId": 1850147,
    "countrycode": "JP",
    "name": "Tokyo",
    "fclName": "city, village,...",
    "toponymName": "Tokyo",
    "fcodeName": "capital of a political entity",
    "wikipedia": "de.wikipedia.org/wiki/Tokyo",
    "lat": 35.6895,
    "fcl": "P",
    "population": 8336599,
    "fcode": "PPLC"
  }, {
    "lng": 121.531846,
    "geonameId": 1668341,
    "countrycode": "TW",
    "name": "Taipeh",
    "fclName": "city, village,...",
    "toponymName": "Taipei",
    "fcodeName": "capital of a political entity",
    "wikipedia": "de.wikipedia.org/wiki/Taipei",
    "lat": 25.047763,
    "fcl": "P",
    "population": 7871900,
    "fcode": "PPLC"
  }, {
    "lng": -74.08175468444824,
    "geonameId": 3688689,
    "countrycode": "CO",
    "name": "Bogotá",
    "fclName": "city, village,...",
    "toponymName": "Bogotá",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Bogot%C3%A1",
    "lat": 4.609705849789108,
    "fcl": "P",
    "population": 7674366,
    "fcode": "PPLC"
  }, {
    "lng": 114.157691001892,
    "geonameId": 1819729,
    "countrycode": "HK",
    "name": "Hong Kong",
    "fclName": "city, village,...",
    "toponymName": "Hong Kong",
    "fcodeName": "capital of a political entity",
    "wikipedia": "en.wikipedia.org/wiki/Hong_Kong",
    "lat": 22.2855225817732,
    "fcl": "P",
    "population": 7012738,
    "fcode": "PPLC"
  }]
}

geonames = geo.geonames;

var data = geonames;


for (var i = 0; i < data.length; i++) {
  tr = $('<tr class=geoname/>');
  if (data[i].geonameId) {
    tr.append("<td id=''>" + data[i].name + "</td>");
    tr.append("<td id=''>" + data[i].countrycode + "</td>");
    tr.append("<td id=''>" + data[i].lng + "</td>");
    tr.append("<td id=''>" + data[i].lat + "</td>");
    tr.append("<td id=''>" + data[i].population + "</td>");
    tr.append("<td id=''>" + data[i].geonameId + "</td>");

    tr.append("<td id=''>" + "<a class=geonameview  id=" + data[i].geonameId + " href='#' >View Details</a>" + "</td>");

  } else {
    tr.append("<td id=''></td>");
    tr.append("<td id=''></td>");
    tr.append("<td id=''></td>");
    tr.append("<td id=''></td>");
    tr.append("<td id=''></td>");
    tr.append("<td id=''></td>");
    tr.append("<td id=''></td>");

  }

  $("#geonames").append(tr);
}
updateItems();









function printpage() {
  window.print();
}

@media print {
  .dontprint {
    display: none
  }
  body {
    display: block;
  }
}
body {
  display: block;
}

<link type="text/css" rel="stylesheet" href="https://rawgit.com/flaviusmatis/simplePagination.js/master/simplePagination.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/flaviusmatis/simplePagination.js/master/jquery.simplePagination.js"></script>



<table id="geonames" class="searchresult" border="1">
  <tr id="">
    <th>
      Name
    </th>
    <th>
      Country Code
    </th>
    <th>
      Longitude
    </th>
    <th>
      Latitude
    </th>
    <th>
      Population
    </th>
    <th>
      ID
    </th>
    <th>
      Action
    </th>
  </tr>

</table>
<div id="searchdiv" class="dontprint"></div>
<button onclick="printpage()" class="dontprint" style="float: right">Print Preview</button>

使用

$('.printMe').click(function(){
     window.print();
});

我可以打印整个屏幕。在我的屏幕上，我有一个使用 flaviusmatis Simple Pagination 分页的表格。所以我在 table 上有按钮。我加了

.dontprint{ 
    display : none
}

对于我不需要打印的元素，包括分页中的按钮。

如果我有 50 个页面，那么点击和浪费时间太多了。

注意

我。我尽可能不想使用除此分页以外的其他功能，但如果没有其他选择，那么我别无选择，只能使用其他带有打印功能的分页功能。

当前函数

现在我要做的就是一张一张打印出来。 我需要点击第 1 页点击打印点击第 2 页点击打印等等...

目标函数

有一个按钮，让用户可以一次单击打印所有分页页面。

可能的方法

在按钮上单击具有事件类的查找按钮(在分页页面中)单击打印按钮(在代码中)然后单击下一步按钮(在代码中)然后单击打印(在代码中)等等直到最后一页。 还在研究这个

问题

1. 有没有一种方法可以让我只需单击一个按钮就可以打印所有分页的页面。
2. 如果我说 20 个页面至少会有 39 次点击并且我不确定它是否会导致页面关闭(如果可能的方法已完成)

更新

我不想将所有页面打印成一个页面。我想要的是按原样打印页面。表示每个页面与其他页面分开。 我希望我说得有道理

Answer 1

编辑: 我不再推荐 iFrame 方法。有更好的选择，例如打印新窗口或在打印时隐藏/显示页面的某些部分。

您可以做的是将表格添加到 iframe，然后仅打印该 iframe。

JSFiddle因为 SO 代码片段不允许我打印 iframe。

在 fiddle 中，我向名为“print_frame”的正文添加了一个隐藏的 iframe，然后添加了一个 <style>。标记它和 #geonames表。

function printpage() {
  // display the hidden table rows
  var style = "<style>.geoname {display: table-row !important; }</style>";

  window.frames["print_frame"].document.body.innerHTML = style + $("#geonames")[0].outerHTML;
  window.frames["print_frame"].window.focus();
  window.frames["print_frame"].window.print();
}

如果您想在 iframe 中使用样式表，请注意存在跨域问题。

更新

要将内容分成多个页面，您需要使用 page-break CSS 属性。

不幸的是，这不适用于 <tr>没有 display: block .因此，在生成表格行的函数中，我添加了这段代码，它添加了一个我们将中断的隐藏行，并为每个新页面制作了一个标题行的副本。

if ((i + 1) % perPage === 0) {
  $("#geonames").append("<tr class='pagebreak'></tr>")
  $("#geonames").append($("#headerRow").clone().addClass("headerCopy"));
}

断行的 CSS

.pagebreak { display: block; page-break-after: always; }

但是，由于表格现在向下延伸到整个页面，您会在整个页面下方看到表格的边框。 Image (太高了，不能在这里显示)

Updated Fiddle

更新 2

经过 OP 的更多测试后，发现在表格行上打破页面会产生一些奇怪的结果，页面顶部会出现额外的空白。

解决方法是为每个页面创建一个新表格，然后在表格上打断。

Update Fiddle