Javascript 是否可以不使用backgrid进行分页？_Javascript_Backbone.js_Pagination_Backgrid_Backbone.paginator

Javascript 是否可以不使用backgrid进行分页？

javascript backbone.js pagination

Javascript 是否可以不使用backgrid进行分页？,javascript,backbone.js,pagination,backgrid,backbone.paginator,Javascript,Backbone.js,Pagination,Backgrid,Backbone.paginator,我试图实现服务器端分页，就像我发现的那样，我不知道是否还有其他东西通过他们的例子，他们使用了另一个库来帮助实现这一点，即是否可以不使用Backgrid进行分页？你能在这方面添加一些例子吗？我开发了下面的代码，与你分享一个JS/php代码，它可以进行服务器站点分页，你可以根据需要进行更改，稍后我可能会对其进行更好的总结首先连接数据库并创建分页表： CREATE TABLE `pagination` ( `id` INT( 16 ) NOT NULL AUTO_INCREMENT PRI

我试图实现服务器端分页，就像我发现的那样，我不知道是否还有其他东西

通过他们的例子，他们使用了另一个库来帮助实现这一点，即

是否可以不使用Backgrid进行分页？你能在这方面添加一些例子吗？

我开发了下面的代码，与你分享一个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++;
       }

$i=0；
而（$i<400）{
$pag=“在分页（id、姓名、年龄、公司）值中插入
（'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>


#容器{overflow-x:隐藏；最大宽度：90%；最小宽度：90%；边距：0自动；}
td{最大宽度：10%；最小宽度：10%}
tr，td{边框：1px纯黑}
#页面{显示：内联；边框：1px纯黑色}
#麻木，#麻木{显示：无}
.按钮{背景：白色}

然后制作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);
  }

onload=function（）{
var container=document.getElementById（“容器”）；
var table=document.getElementById（“numbs”）.innerHTML；
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
container.innerHTML=xhttp.responseText；
var button=document.getElementById（“按钮”）；
button.children[0]。disabled=“true”；
button.children[0].style.background=“yellow”；
}}  
open（“POST”，“testa.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xhttp.send（“table=“+table”）；
}      
函数选择（）{
var sel=document.getElementById（“选择”）；
var table=sel.options[sel.selectedIndex].值；
var b2=document.getElementById（“numbs”）；
b2.innerHTML=表格；
var se=新的XMLHttpRequest（）；
se.onreadystatechange=函数（）{
如果（se.readyState==4&&se.status==200）{
document.getElementById（“容器”）.innerHTML=se.responseText；
var button=document.getElementById（“按钮”）；
button.children[0]。disabled=“true”；
button.children[0].style.background=“yellow”；
}}  
open（“POST”，“testa.php”，true）；
se.setRequestHeader（“内容类型”、“应用程序/x-www-form-urlencoded”）；
se.send（“table=“+table”）；
}
功能按钮（按钮）{
var b2=document.getElementById（“numbs”）；
var b1=button.innerHTML；
var numb=document.getElementById（“numb”）；
numb.innerHTML=b1；
var b=b2.html；
var butt=新的XMLHttpRequest（）；
butt.onreadystatechange=函数（）{
如果（butt.readyState==4&&butt.status==200）{
document.getElementById（“容器”）.innerHTML=butt.responseText；
var d=document.getElementsByClassName（“按钮”）；
因为（i=0；i我做到了
在视图中初始化
功能
this.el.on('click', 'ul.pagination li:not(.disabled,.active)', this.getCustomPagesPagination);

我打电话
this.reloadCustomPages();

这里是它的实施
reloadCustomPages: function(options) {
    var self = this;
    self.block();
    self.customPages.fetch({data: $.param(options)}).always(function () {
        self.unblock();
    });
}

getCustomPagesPagination: function (e) {
    e.preventDefault();
    var $el = $(e.target).closest("li");
    this.reloadCustomPages({pageNumber:$el.data("pb-page-number")})
},

在服务器端（JavaSpring），我修改了api以接受新的查询字符串
@RequestParam(value = "pageNumber", defaultValue = "1"),
@RequestParam(value = "perPage", defaultValue = "10")

它不直接返回列表，而是返回有用的分页信息，如

数据库中的项目总数
当前页码
页面大小
以及物品本身

检查这个服务器端代码片段（我知道它没有关系，但值得一看）
这是最重要的部分
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">&laquo;&laquo;</a></li>';
    html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="'+(currentPage==1?1:currentPage-1)+'"><a href="#" class="prev">&laquo;</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">&raquo;</a></li>';
    html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(lastPage)+'"><a href="#" class="last">&raquo;&raquo;</a></li>';

    html += '</ul>';
    return html;
},

这里是它的实施
reloadCustomPages: function(options) {
    var self = this;
    self.block();
    self.customPages.fetch({data: $.param(options)}).always(function () {
        self.unblock();
    });
}

getCustomPagesPagination: function (e) {
    e.preventDefault();
    var $el = $(e.target).closest("li");
    this.reloadCustomPages({pageNumber:$el.data("pb-page-number")})
},

结果是这样的

这就是我解决问题的方法，但问题仍然没有得到回答
为什么不想使用paginator插件？你想做什么？异地推荐是离题的。@EmileBergeron实际上我只知道我可以向项目中添加多少库，顺便问一句，使用backgrid的目的是什么，以及它如何简化crea分页的定义？（我应该将此添加到问题中吗？）@BasheerAL MOMANI难道你不能看看backgrid的源代码，判断它是值得自己实现还是只需要使用现有的库吗？backgrid和paginator做不同的事情。backgrid只处理动态表格数据，而paginator只是一个特殊的集合，用最小的c配置和解析。我曾经需要对长列表进行无限滚动式分页，其中所有加载的项目都将被呈现，并会加载和呈现额外的页面（块）。我希望能够集中精力呈现页面，但解决这一问题太痛苦了。所以我推出了自己的页面。
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")})
},