indexdb實現分頁查詢

lyxxxh發表於2022-01-16

正常分頁

程式碼

var request = VueApp.$db.db.transaction('market_goods_supermarket').objectStore('market_goods_supermarket') 
// IDBObjectStore 



var page = 1 // 0為第一頁                                                                                                                
var page_size = 10 // 一頁10條資料
var list = [] // 存放10條資料的陣列
var is_first = true
request.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if( is_first && page > 0 ){ // 只需要移動一次就行了 如果是第一頁 不需要移動
      cursor.advance(page * page_size) // 移動到第幾條      
      is_first = false
      return 
    }

   if( cursor === null) // 資料到底
            console.log(list)

   list.push(cursor.value)
   if(page_size > list.length) { // 資料還沒到10條
       cursor.continue()
   }else {
          console.log(list) // 拿到10條了
   }
}

執行

indexdb實現分頁查詢

逆序分頁

程式碼

最新的資料在最前面, openCursor(null,'prev') 即可。

執行

indexdb實現分頁查詢

本作品採用《CC 協議》,轉載必須註明作者和本文連結
專心學習不瞎搞

相關文章