Javascript 传递到下一页时网格是如何工作的？

假设我有大约500行数据，并且在一个显示每页40行的网格内。 我一直在想网格是如何工作的，下一页显示的500行数据是对应的

我有两个选择。。。。 1第一个是，您向BD进行一次查询，并在内存中保留500行，然后从那里开始工作，每次通过页面时都进行剪切

第二，对数据库运行查询，剪切以显示必要的行，然后显示。每次我通过页面时，我都会做一个新的查询，带上500个数据并进行剪切，只显示需要的内容

---

所以问题是什么是理想的操作，应该有一个网格来处理数据？最好地利用性能。

如果您尝试查看更一般的情况，即数据集中有N行，并且需要在页面上显示M，那么很明显，如果N足够大，在大多数情况下，将所有数据加载到内存中是没有意义的（不过您可以这样做以预热缓存等）

因此，通常一次从数据库加载一个页面，将

pageNumber

和

pageSize

参数传递给查询

此外，在导航到新页面时，您还可以使用客户端缓存并保存旧页面。在浏览器中使用LocalStorage、WebSql等使其变得非常简单

 function getNewPage(pageNumber, pageSize) {
      var cacheKey = pageNumber + '_' + pageSize

      if (myCache.contain(cacheKey)) { 
         return $.deferred().resolve(myCache.get(cacheKey))
      }

      return $.ajax( url , { pageSize:pageSize, pageNumber: pageNumber }, function (data) {
           myCache.set(cacheKey, data)
           return data
      } )
 } 

 var myCache = { 
    contain: function(key) {
       return !!sessionStorage.getItem(key)
    },
    get: function(key) {
       return JSON.parse(sessionStorage.getItem(key)
    },
    set: function(key, o) {
       sessionStorage.setItem(key, JSON.stringify(o)) 
    } 
 } 

在某个按钮点击处理程序中的某个地方：

 getNewPage(0,10).done(function(data) {
     var template = _.template('<tr><td>{field1}</td><td>{field2}</td></tr>')
     $myTableTbody.html(data.map(template))
 })

getNewPage（0,10）.done（函数（数据）{
var-template=551;.template（“{field1}{field2}”）
$myTableTbody.html（data.map（模板））
})