Можно ли сделать эту нумерацию страниц без фона?
Я пытаюсь реализовать нумерацию на стороне сервера, как datetable, и я нашел библиотеку backbone.paginator, я не знаю, есть ли что-то еще.
В своих примерах они использовали другую библиотеку для помощи в реализации этого, а именно: http://backgridjs.com/ и его плагин-пагинатор.
Можно ли сделать эту нумерацию страниц без Backgrid? Не могли бы вы добавить пример по этому поводу?
2 ответа
Я разработал следующий код, чтобы поделиться с вами кодом JS/php, который выполняет нумерацию сайтов сервера, и вы можете изменить его в соответствии с вашими потребностями, а позже я могу обобщить его лучше.
Сначала установите соединение с БД и создайте таблицу нумерации страниц:
CREATE TABLE `pagination` (
`id` INT( 16 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 50 ) NOT NULL ,
`age` INT( 3 ) NOT NULL ,
`company` VARCHAR( 50 ) NOT NULL
)
Вторая вставка 400 одинаковых записей:
$i=0;
while ($i< 400){
$pag="insert into pagination (id,name,age,company) VALUES
('NULL','john','40','google')";
$excu=$mysqli->query($pag);
$i++;
}
Тогда сделайте test.php
<!DOCTYPE html>
<html><head>
<style>
#container{overflow-x: hidden;max-width:90%;min-width:90% ;margin: 0 auto;}
td{max-width:10%;min-width:10%}
tr,td{border:1px solid black }
#page{display:inline;border:1px solid black}
#numb,#numbs{display:none}
.button{background:white}
</style>
</head>
<body >
<?php $defaultoption ="10";?>
<div id=container></div><span id=numb></span><span id=numbs><?php echo
$defaultoption;?></span>
<script type=text/javascript src=js.js></script>
</body>
</html>
Тогда сделайте js.js:
onload = function (){
var container=document.getElementById("container");
var table =document.getElementById("numbs").innerHTML;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
container.innerHTML=xhttp.responseText;
var button=document.getElementById("button");
button.children[0].disabled="true";
button.children[0].style.background="yellow";
}}
xhttp.open("POST", "testa.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("table="+table);
}
function select(){
var sel =document.getElementById("select");
var table=sel.options[sel.selectedIndex].value;
var b2 =document.getElementById("numbs");
b2.innerHTML=table;
var se = new XMLHttpRequest();
se.onreadystatechange = function() {
if (se.readyState == 4 && se.status == 200) {
document.getElementById("container").innerHTML=se.responseText;
var button=document.getElementById("button");
button.children[0].disabled="true";
button.children[0].style.background="yellow";
}}
se.open("POST", "testa.php", true);
se.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
se.send("table="+table);
}
function button(button){
var b2 =document.getElementById("numbs");
var b1 =button.innerHTML;
var numb = document.getElementById("numb");
numb.innerHTML=b1;
var b= b2.innerHTML;
var butt = new XMLHttpRequest();
butt.onreadystatechange = function() {
if (butt.readyState == 4 && butt.status == 200) {
document.getElementById("container").innerHTML=butt.responseText;
var d = document.getElementsByClassName("button");
for(i=0;i<d.length;i++){
if(d[i].innerHTML == numb.innerHTML){d[i].disabled="true";
d[i].style.background="yellow";
}}}}
butt.open("POST", "testa.php", true);
butt.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
butt.send("b="+b+"&b1="+b1);
}
Сделайте testa.php:
<?php
$pag="SELECT * FROM pagination ORDER BY id ASC ";
$exc=$mysqli->query($pag);
$numrwos =mysqli_num_rows($exc);
if($_POST['b']){
$b =$_POST['b'];
$b1 =$_POST['b1'];
$max=($b*$b1);
$m =($b1-1);
$n =($m*$b);
$min =($n-1);
if($numrwos){
echo "<select id=select onchange=select()><option selected=selected>Show Entries</option>";
if($numrwos < 11){
echo "<option>10</option>";
}elseif($numrwos > 10 && $numrwos < 26){
echo "<option>10</option><option>25</option>"; }elseif($numrwos > 25 &&
$numrwos < 51){
echo "<option>10</option><option>25</option><option>50</option>";}else{
echo "<option>10</option><option>25</option><option>50</option>
<option>100</option>";}
echo "</select><br />";
echo "<table width=80% id=table>";
echo "<tr><td width=10%>id</td><td>name</td><td>age</td><td>company</td></tr>";
$stop="0";
while ($result=mysqli_fetch_array($exc)){
if($stop > $min && $stop < $max){
echo "<tr><td>".$result['id']."</td><td>".$result['name']."</td>
<td>".$result['age']."</td><td>".$result['company']."</td></tr>";
}else{}
$stop++;
}echo "</table><br />";
echo "<div id=button>";
$i=0;
while($i < $numrwos){
$page+=$i % $b == $b-1;
$i++;
if($i%$b == 1){
$pagenum=$page+1;
echo "<button class=button onmouseover='button(this)'>".$pagenum."</button>";}}
echo "</div>";
}else{echo "no records";}
}else{
$t =$_POST["table"];
if($numrwos){
echo "<select id=select onchange=select()><option selected=selected>Show Entries</option>";
if($numrwos < 11){
echo "<option>10</option>";
}elseif($numrwos > 10 && $numrwos < 26){
echo "<option>10</option><option>25</option>"; }elseif($numrwos > 25 && $numrwos < 51){
echo "<option>10</option><option>25</option><option>50</option>";}else{
echo "<option>10</option><option>25</option><option>50</option>
<option>100</option>";}
echo "</select><br />";
echo"<table width=80% id=table>";
echo "<tr><td width=10%>id</td><td>name</td><td>age</td><td>company</td></tr>";
$stop="0";
while ($result=mysqli_fetch_array($exc)){
echo "<tr><td>".$result['id']."</td><td>".$result['name']."</td>
<td>".$result['age']."</td><td>".$result['company']."</td></tr>";
if($stop ==$t-1){break;}
$stop++;
}echo "</table><br />";
echo "<div id=button>";
$i=0;
while($i < $numrwos){
$page+=$i % $t == $t-1;
$i++;
if($i%$t == 1){
$pagenum=$page+1;
echo "<button class=button onmouseover='button(this)'>".$pagenum."</button>";}}
echo "</div>";
}else{echo "no records";}
}
?>
Я желаю, чтобы это помогло вам.
Я это сделал
в View initialize функция
Я звоню
this.reloadCustomPages();
здесь его реализация
reloadCustomPages: function(options) {
var self = this;
self.block();
self.customPages.fetch({data: $.param(options)}).always(function () {
self.unblock();
});
}
на стороне сервера (Java-весна) я изменил API, чтобы принимать новые строки запроса
@RequestParam(value = "pageNumber", defaultValue = "1"),
@RequestParam(value = "perPage", defaultValue = "10")
и вместо того, чтобы возвращать список напрямую, он возвращает полезную информацию о нумерации страниц, такую как
- общее количество элементов в базе данных
- текущий номер страницы
- размер страницы
- и сами предметы
проверьте этот фрагмент на стороне сервера (я знаю, что это не связано, но стоит посмотреть)
@RequestMapping(value = "/editor/pages", method = RequestMethod.GET)
public void listPages(@RequestParam(value = "pageNumber", defaultValue = "1") Integer pageNumber,
@RequestParam(value = "perPage", defaultValue = "10") Integer perPage,
HttpServletResponse httpResp) throws IOException {
Long recordsTotal = pageSvc.findTotalNumberOfPages();// select count(*) from table_name
List<PbCustomPage> pages = pageSvc.findPages(pageNumber, perPage);// server side query that gets a pagenated data
BackbonePaginatorResponse response = new BackbonePaginatorResponse();// I created this simple class
response.setTotalCount(recordsTotal);
response.setPageNumber(pageNumber);
response.setPerPage(perPage);
response.setItems(pages);
httpResp.setContentType("application/json");
json.createCustomPageSerializer().addProperties().serialize(response, httpResp.getWriter());// just make your server send that obkect
}
Теперь верните вызов функции, пока сервер не получит страницу 1 с размером страницы 10
в моем шаблоне у меня есть это
<div class="pagination clear" style="text-align: center;">
<%= customPages.paginationHtml %>
</div>
позвольте мне рассказать вам, как я его заполнил
customPages.paginationHtml = this.generatePagination(customPages);
и вот самая важная часть
generatePagination: function (paginationResponse) {
var currentPage = paginationResponse.pageNumber,
lastPage = paginationResponse.totalCount==0?1:Math.ceil(paginationResponse.totalCount/paginationResponse.perPage);
var html = '<ul class="pagination">';
html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="1"><a href="#" class="first">««</a></li>';
html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="'+(currentPage==1?1:currentPage-1)+'"><a href="#" class="prev">«</a></li>';
for (var i = 1; i <= lastPage; i++) {
html += '<li class="'+(currentPage == i?"active":"")+'" data-pb-page-number="'+i+'"><a href="#" class="page">'+ i +'</a></li>';
}
html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(currentPage==lastPage?lastPage:currentPage+1)+'"><a href="#" class="next">»</a></li>';
html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(lastPage)+'"><a href="#" class="last">»»</a></li>';
html += '</ul>';
return html;
},
каждый ли я создаю это имеет data-pb-page-number будет использоваться позже
еще одна вещь, как делать новые запросы на другие страницы
в View initialize функция
this.el.on('click', 'ul.pagination li:not(.disabled,.active)', this.getCustomPagesPagination);
здесь его реализация
getCustomPagesPagination: function (e) {
e.preventDefault();
var $el = $(e.target).closest("li");
this.reloadCustomPages({pageNumber:$el.data("pb-page-number")})
},
результат такой
это, как я решил свою проблему, но вопрос до сих пор не ответил