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分页的表格。所以我在桌子上有按钮。我添加了

.dontprint{ 
    display : none
}

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

如果我有50页，那么点击并浪费时间。

注意

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

当前功能

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

目标功能

有一个按钮，用户只需点击一下即可打印所有分页页面。

可能的方法

在按钮上单击带有活动类的查找按钮（在分页页面中）单击打印按钮（在代码中），然后单击下一步按钮（在代码中），然后单击打印（在代码中），直到最后一页。 仍在处理这个

问题

有没有办法我只需点击一个按钮就可以打印所有分页页面。
如果我说20个页面至少有39次点击而且我不确定是否会导致页面关闭（如果可能的话，已经完成）

更新

我不想将所有页面打印成一页。我想要的是按原样打印页面。将每个页面与其他页面分开。 我希望我有意义

Answer 1

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

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

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

在小提琴中，我向身体添加了一个名为“print_frame”的隐藏iframe，然后为其添加了TextView标记和<style>表格。

#geonames

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

<强>更新

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

但遗憾的是，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(); }没有<tr>。因此，在您生成表行的函数中，我添加了此代码，该代码添加了一个隐藏的行，我们将打破这一行，并为每个新页面生成标题行的副本。

display: block

打破行的CSS

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

但是，由于该表现在向下延伸到整个页面，因此您将在整个页面中看到表格的边框。 Image（太高，不能在这里显示）

Updated Fiddle

更新2

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

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

Update Fiddle

print paginated table（flaviusmatis的simplePagination.js）

1 个答案: