superRaytin / paginationjs

A jQuery plugin to provide simple yet fully customisable pagination.
http://pagination.js.org
MIT License
912 stars 659 forks source link

可不可以在异步加载时不需要指定totalPageNumber? #2

Closed denghongcai closed 9 years ago

denghongcai commented 9 years ago

现在在初始化时就要指定totalPageNumber,但是在做搜索的场景时可能totalPageNumber是会改变的,能不能添加一个这样的特性呢?

superRaytin commented 9 years ago

异步加载必须要指定 totalNumber,这是创建分页实例时的关键数据,不是添加一个特性的事 ...

你这种场景办法也是有的,稍稍麻烦一些,可以考虑这样做:

先通过请求(这个请求和触发分页时的请求可以是同一个)拿到搜索的结果数据,可能有两种情况:

a. 拿到第 1 页的数据和总页数 b. 拿到搜索到的所有数据

一般是第 1 种情况,这时只要在请求成功后将第 1 页的数据渲染到页面,同时调用 container.pagination({ ... }) ,配合参数 triggerPagingOnInit: false (初始化分页实例时不触发分页)。每次用户搜索新的关键词直接在 container 上调用 pagination 插件方法,Pagination.js 会销毁原来的实例创建新的。

如果是第 2 种情况,就更加简单了,只需要把拿到的数据传给 dataSource 即可。

denghongcai commented 9 years ago

是这样的一个场景,在切换分页的时候,如果数据增加了,由于totalNumber固定了,这个时候页数就会偏少

superRaytin commented 9 years ago

分页实例初始化的时候,每页数据条数(pageSize)已经指定了,比如跳到第 2 页,此时分页请求已经带上 pageNumber: 2, pageSize: 10 参数发到后台了,数据怎么会增加呢?(除非后台没有处理好)

denghongcai commented 9 years ago

是比如插入了新的数据,这个时候数据的总条数已经被更新了

superRaytin commented 9 years ago

这个时候数据的总条数已经被更新了

这时可以在 container 上重新调用插件方法,重新生成分页实例,如我上面所说:

每次用户搜索新的关键词直接在 container 上调用 pagination 插件方法,Pagination.js 会销毁原来的实例创建新的。

denghongcai commented 9 years ago

也只有这样的办法了,这样就把pagination只作为渲染分页控件用了

Thanks

superRaytin commented 9 years ago

Pagination.js 是根据总页数(totalNumber)和每页条数(pageSize)来产出分页形态,分页类组件都是此机制的哦,所以数据总条数变了,总页数也就变了,分页必须要重新生成 ...

chenzhe-pro commented 7 years ago

不太理解的还是totalNumber为什么是必须的,要做到分页我认为只需要pageNumber、pageSize和totalPages就可以,totalNumber拿到后也是要转成总页数的吧?所以为何不用totalPages来代替totalNumber呢?

chenzhe-pro commented 7 years ago

并且按照我的想法 ajax分页插件最终的渲染应该是根据接口返回的totalPages来确定分页部分的html如何渲染,初始化参数中的totalNumber(或者totalPages)应该是最后返回数据的时候才被用来渲染

LukerSpringtree commented 7 years ago

感觉 好多问题都是 totalNumer 相关的 .而且 初读 确实容易迷惑. 作者可以把这个地方 讲详细一点,推广度会更高啊! 哈哈我就是这么一说^ @superRaytin

dhildreth commented 7 years ago

I hate to bring this back from the dead, but a working code example would be incredibly beneficial. I can sort of make sense of what Google Translator gives me for your answer:

Asynchronous loading must specify totalNumber, which is the key data when creating a paging instance, not adding a feature ... You are some of the scenarios that are some, a little trouble, you can consider doing this: First through the request (the request and trigger the page when the request can be the same) to get the results of the search data, there may be two cases:

a. Get the data on page 1 and the total number of pages b. Get all the data that is searched

Is usually the first case, then as long as the request is successful after the first page of the data rendered to the page, while calling container.pagination ({...}), with the triggerPagingOnInit: false (initialization paging instance does not trigger paging ). Each time a user searches for a new keyword directly calls the pagination plugin method on the container, Pagination.js destroys the original instance to create the new one.

If it is the first two cases, it is more simple, and only need to get the data passed to the dataSource.

So, here's what I have:

  var container = $('#pagination-container');
  $('#pagination-container').pagination({
      dataSource: '/query.php?term=' + "query term",
      locator: 'data',
      // How to set?
      //totalNumber: data.meta.numFound, 
      pageSize: 10,
      triggerPagingOnInit: false, // Necessary in this case?
      afterInit: function() {
          // Unsure what to do here, if anything.
          console.log("after init");
      },
      callback: function(data, pagination) {
          // Contains total number of results
          var meta = data[0]; 
          // Contains first 10 results
          var results = data[1];

          // This does not work, just demonstrates what I'd like to do.
          pagination.totalNumber = meta.numFound;

          var source = $('#hb-search-results').html();
          var html = Handlebars.compile(source, {
              data: results
          });

          $('#data-container').html(html);
      }
  })

The data returned by query.php looks like this:

[{
    "numFound": 1234,
    "start": 0
  },
 [{ 
    "id": "result 1"
  }, 
  {
    "id": "result2"
  }, 
  {
    "id": "result3
  }
]

So that data[0] is the meta data containing numFound and data[1] is the array of results.

Could you please provide a code example? Even if it's untested, I'd appreciate the help and direction. There's obviously a language barrier here, and example code would be much clearer.

Thanks in advance!

superRaytin commented 7 years ago

大家升级到 2.1.0 吧,已经可以支持 异步分页不指定 totalNumber查看 demo

superRaytin commented 7 years ago

@dhildreth

var container = $('#pagination-container');
$('#pagination-container').pagination({
  dataSource: '/query.php?term=' + "query term",
  locator: 'data',
  totalNumberLocator: function(response) {
    return response.data[0].numFound;
  },
  formatResult: function(data) {
    return data[1];
  },
  pageSize: 10,
  callback: function(data, pagination) {
    var source = $('#hb-search-results').html();
    var html = Handlebars.compile(source, {
        data: data
    });
    $('#data-container').html(html);
  }
})
dhildreth commented 7 years ago

Most excellent! Great turn around time! Thank you very much. I upgraded to 2.1.0 and used your example. Works perfectly.

denghongcai commented 7 years ago

finally, thanks!