【发布时间】：2019-02-21 22:10:21
【问题描述】：
如何在服务器端使用simplePagination.js jQuery plugin？我的页面（不是表格）加载了很多 div，并且我正在对这些“div”进行分页。但是，在某些情况下，我会得到很多要分页的东西（比如 2500+）并且我的页面会变慢。这是我现在的代码：
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
这是我加载了所有 div 的页面：
如您所见，我有一个搜索选项：
但是每次我搜索一些东西时，所有的 div 都会重新加载，并且再次进行分页。
我想知道是否可以更改此代码以不在客户端加载所有内容，但如果我从服务器端选择内容。 div 是通过 SQL 命令加载的，所以，也许我可以使用每个页码的功能来正确加载每个页面，只需 20 个元素，然后我可以对搜索框做一些事情。
编辑 那是我的 html 代码（在 php 中）：
<html lang="pt-br">
<head>
<link rel="stylesheet" href="assets/css/simplePagination.css">
<script src="assets/js/jquery.simplePagination.js"></script>
<script type="text/javascript">
$(function(){
var keywordInput = document.querySelector("input[name='keyword']");
function performMark() {
$(".content.panel").show();
// Read the keyword
var keyword = keywordInput.value;
$('.content').removeClass('hidden');
$('.content:not(:contains(' + keyword + '))').addClass('hidden');
/* Tentar refazer paginação */
var items = $(".content.panel").not(".hidden");
var numItems = items.length;
var perPage = 16;
// Only show the first 2 (or first `per_page`) items initially.
items.slice(perPage).hide();
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
};
// Listen to input and option changes
keywordInput.addEventListener("input", performMark);
});
</script>
<script type="text/javascript">
$(function() {
var items = $(".content.panel").not(".hidden");
var numItems = items.length;
var perPage = 16;
// Only show the first 2 (or first `per_page`) items initially.
items.show();
items.slice(perPage).hide();
// Now setup the pagination using the `.pagination-page` div.
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
function checkFragment() {
// If there's no hash, treat it like page 1.
var hash = window.location.hash || "#page-1";
// We'll use a regular expression to check the hash string.
hash = hash.match(/^#page-(\d+)$/);
if(hash) {
// The `selectPage` function is described in the documentation.
// We've captured the page number in a regex group: `(\d+)`.
$("#pagination").pagination("selectPage", parseInt(hash[1]));
}
};
// We'll call this function whenever back/forward is pressed...
$(window).bind("popstate", checkFragment);
// ... and we'll also call it when the page has loaded
// (which is right now).
checkFragment();
});
</script>
<!--link href="assets/css/table.css" rel="stylesheet"-->
</head>
<body onload="myFunction()">
<div class="container">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<div class="input-group input-group-lg" style="margin-bottom: 15px;">
<span class="input-group-addon glyphicon glyphicon-search" id="sizing-addon1" style="position: initial;"></span>
<input name="keyword" type="text" class="form-control" placeholder="Pesquisar" aria-describedby="sizing-addon1" onload="performMark()">
</div>
<div id="pagination" style="margin-bottom: 5px;"></div>
<div class='row centered'>
<?php
$sql = "SELECT * FROM USU_TDriCad";
$stid = oci_parse($conn, $sql);
oci_execute($stid);
while (($row = oci_fetch_array($stid, OCI_BOTH)) != false) {
$CodDri = 'test';
$CodDri = (isset($row['USU_CODDRI']) ? $row['USU_CODDRI'] : '');
echo '<div class="content warning">
<div class="content panel panel-warning">
<div class="panel-heading highlight">
<h3 class="panel-title">' . $StrLoc . '</h3>
</div>
<div class="panel-body warning highlight" style="padding: 2px">
' . $CodDri . '
</div>
<div class="panel-body warning highlight" style="padding: 2px; font-size: 16px">
<div class="col-xs-6">1000</div>
<div class="col-xs-6">#008</div>
</div>
</div>
</div>';
}
oci_free_statement($stid);
?>
</div>
</div>
</div>
</body>
</html>
谢谢
【问题讨论】：
-
请添加您正在工作的html
-
你应该用你的服务器端语言对服务器端进行分页。因此，检索所有项目的子集并在用户滚动时加载更多。 Jquery 是客户端
-
我认为 simplePagination 这个名字说明了一切。它只对一组完整的数据进行简单的客户端分页。规范并未表明它可以按需执行任何形式的服务器请求。
-
@SamuelJMathew html5?
-
我认为他的意思是从页面中添加您的 HTML 示例（不仅仅是图像）:)
标签： javascript php jquery pagination