流星分頁問題

Question

我遇到了我實施的分頁問題。分頁工作基於服務器端發佈skip &限制過濾器。

問題＃1。 如果我執行特定的用戶搜索，那麼第一頁將是空白的。

在這種狀態下跳過被設置爲0，上限爲總20

如果我執行查找（）。取（）我得到的20個元素，但他們都是爲了一個不同的用戶。

問題2：我要下一個頁面（跳過+ 10）給了我一個幾個元素

老毛病又給人更結果

最後數據丟失，轉到下一頁只刪除了10個結果，剩下10個顯示

這是一個非常奇怪的行爲。 服務器雙面發佈

Meteor.publish('overtime', function(opt){ 
if (!Roles.userIsInRole(this.userId, 'admin')) { 
return Overtime.find({userId: this.userId}, opt); 
} else { 
return Overtime.find({}, opt); 
} 
}); 

客戶端片面訂閱​​

var defaultSkipStep = 10; 
var defaultLimit = 20; 
Template.triphtml.onCreated(function(){ 
var instance = this; 
Session.set('limit',defaultLimit); 
instance.autorun(function(){ 


instance.subscribe('overtime', {skip:(Session.get('overSkip')||0), limit:(Session.get('limit')||defaultLimit), sort: {createdAt: -1}}); 
instance.subscribe('trips', {skip:(Session.get('tripSkip')||0), limit:(Session.get('limit')||defaultLimit), sort: {createdAt: -1}}); 
}); 

下一頁點擊事件

"click .nxtpage_over": function(event, template){ 
Session.set('overSkip', (Session.get('overSkip') || 0) + defaultSkipStep); 
Session.set('limit', 20); 
}, 

提交事件 https://pastebin.com/btYCSQBD

查詢用戶看到 main.js（客戶端）

https://pastebin.com/tWakPDT1

main.html中 https://pastebin.com/4uMVFsNG

不知道如何使它所以，當我執行搜索一個特定的用戶我得到的所有20名導致該用戶，下一頁給我下20個元素，沒有顯示我剛纔看到的20個元素。

Answer 1

使用以下代碼進行分頁。它是非常理想的代碼，易於理解和實施。

服務器發佈：

 Meteor.publish('Students', function (str, toSkip, tillLimit) { 
     var regex = new RegExp(str, 'i'); 
     var data = Students.find({ 
           $or:[ 
            {"_id": {'$regex' : regex}}, 
            {"username": {'$regex' : regex}} 
           ] 
          }, 
        {sort: {'time': -1}, skip: toSkip, limit : tillLimit}); 
     return data; 
    }); 

    Meteor.publish('StudentsTotalCount', function (str) { 
     var regex = new RegExp(str, 'i'); 
     Counts.publish(this, "StudentsTotalCount", Students.find({ 
           $or:[ 
            {"_id": {'$regex' : regex}}, 
            {"username": {'$regex' : regex}} 
           ] 
          }); 
     ); 
    }); 

str是從客戶端的全局搜索文本。現在，由於用戶會經常點擊next和previous按鈕。在客戶端，訂閱必須是被動的。爲此，你可以在下面的代碼。

客戶端訂閱：

裏面的一些App_ShowStudents.js文件，你可以如下創建訂閱;

Template.App_ShowStudents.onCreated(function(){ 
     this.userId = new ReactiveVar(""); 
     this.filterCriteria = new ReactiveVar(""); 
     //PAGINATION 
     this.enablePrevious = new ReactiveVar(false); 
     this.enableNext = new ReactiveVar(true); 
     this.skip = new ReactiveVar(0); 
     this.diff = new ReactiveVar(0); 
     this.total = new ReactiveVar(0); 
     this.limit = new ReactiveVar(10); 

     this.autorun(() => { 
     Meteor.subscribe('Students', this.filterCriteria.get(), this.skip.get(), this.limit.get()); 
     Meteor.subscribe('StudentsTotalCount', this.filterCriteria.get(), this.role.get()); 
     }); 
    }); 

助手：

Template.App_ShowStudents.helpers({ 
     students(){ 
      return Students.findOne({}); // this will always be less or equal to 10. 
     }, 
      skip(){ 
      return Template.instance().skip.get(); 
      }, 
      diff(){ 
      var instance = Template.instance(); 
      var add = instance.skip.get() + instance.limit.get(); 
      var total = instance.total.get(); 
      var diff = (add >= total ? total : add); 
      instance.diff.set(diff); 
      return instance.diff.get(); 
      }, 
      total(){ 
      Template.instance().total.set(Counts.get('StudentsTotalCount')); 
      return Template.instance().total.get(); 
      } 
    }); 

total實際上必須是反應性的，應該只給算按你的搜索條件，所以我們有一個單獨的服務器上發佈。

活動：

Template.App_ShowStudents.events({ 
     'click .previous': function (event, template) { 
      event.preventDefault(); 
      if(template.diff.get() > template.limit.get()){ 
       template.skip.set(template.skip.get() - template.limit.get()); 
      } 
      }, 
     'click .next': function (event, template) { 
     event.preventDefault(); 
     if(template.diff.get() < template.total.get()){ 
      template.skip.set(template.skip.get() + template.limit.get()); 
     } 
     }, 
     'input #searchData': function(event, template) { 
      if ($(event.target).val()) { // has some value. 
       template.filterCriteria.set($(event.target).val()); 
      } else { 
       template.filterCriteria.set(""); 
      } 
      console.log(template.filterCriteria.get()); 
      }, 
    }); 

App_ShowStudents.html

<template name="App_ShowStudents"> 
     {{#if Template.subscriptionsReady}} 
      <body> 
       <input type="text" id="searchData" class="form-control input-lg" placeholder="Search ID, Username" /> 
       Showing {{skip}} - {{diff}} of {{total}} 
       {{#each students}} 
        ... 
       {{/each}} 
       <ul> 
        <li><a href="#" role="button" class="previous">Previous</a></li> 
        <li><a href="#" role="button" class="next">Next</a></li> 
       </ul> 
      </body> 
     {{else}} 
      Please wait... 
     {{/if}} 
    </template>