0

我正在尝试为“基本”和“高级”订阅者获取有限的记录，并在分页中显示记录计数。

我尝试了很多方法来显示以下格式的记录。

如果，我创建“BASIC”订阅者，那么它的“value = 0”和“PREMIUM”它的“value = 1”。

  1. 对于“BASIC”订阅者，我想显示最新的 30 条记录。喜欢：

    • 如果，我有“total = 8”的记录。然后，它将获取 8 条记录并在分页中显示（8 条中的 1-8 条）记录。
    • 如果，我有“总计 = 35”条记录。然后。它将获取最新的 30 条记录并在分页中显示（30 条中的 1-30 条）记录，因为我想为基本用户显示 10 条最新记录。

  2. 对于“高级”订阅者，我想显示最新的 50 条记录，pageSize 为 30。例如：

    • 如果，我有“总计 = 55”条记录。然后，它将以 {30-30} 的形式获取记录，并在第一页显示 (1-30 out of 55)，在下一页显示 (31 - 55 out 55)。
    • 如果，我有“总计 = 75”条记录。然后。它将获取最新的 100 条记录并在第一页中显示（50 条中的 1-30 条），在下一页中的分页中显示（50 条中的 31-50 条），因为我想为高级用户显示最新的 50 条记录。

下面是我的代码，请纠正我的错误。感谢您的任何帮助。

健康）状况：

  1. 如果 userType = 0 那么，User = "BASIC"
  2. 如果 userType = 1 那么，User = "Premium"
 // const pageSize = parseInt(50);
    
    
    this.state = {
                pageInfo: {
                    offset: 0,
                    limit: (userType === 1)? premium: basic,
                    total: -1
                },
                currentPage: 1,
                totalRecords: null,
                currentRecords: [],
                logRecords: [],
    }
    
    // Here, I am fetching data from API using ajax request
    
    myUserRecords(){
                 var pageInfo = {};
                 pageInfo = this.state.pageInfo;
                 pageInfo = { ...pageInfo, total: -1 }
                 
                 if (this.state.currentRecords.length !== 0 && ((this.state.currentPage * 
                     this.pageLimit) - this.pageLimit) > this.state.currentRecords.length) {
                     
                      this.setState({ currentPage: 1 })
                      pageInfo = { ...pageInfo, offset: 0 }
                  }
    
            $.ajax({
                method: "GET",
                url: API + encodeURIComponent(JSON.stringify(filter)),
                dataType: 'json',
            })
    
           .done(function (result) {
    
                this.setState({ logRecords : result.records, pageInfo : result.pageInfo });
    
                let currentPage = this.state.currentPage;
                
                if (result.records.length !== 0 && this.state.currentPage === 0) {
                    currentPage = 1;
                }
    
                 if(currentPage>1){
            self.setState({
                currentPage: currentPage, records: resultObj.records,
                pageInfo: resultObj.pageInfo
            });
        }else{
            self.setState({
                currentPage: currentPage, totalRecords: resultObj.pageInfo.total, records: resultObj.records,
                pageInfo: resultObj.pageInfo
            });
        }   
           })
          .fail(function (error) {
                if(error == "error"){ return }
          });
    }
    
    
    getStartEndValue = () => {
            let start =((this.state.currentPage-1) * this.pageLimit) + 1;
            let end = this.state.currentPage * this.pageLimit;
            if(end > this.state.userRecords)
            {
                end = this.state.userRecords
            }
            return { start , end }
    }
    
    onPageChanged = (data) => {
            const { records } = this.state;
            const { currentPage, totalPages, pageLimit } = data;
            let new_offset = (currentPage * pageLimit) - pageLimit
            let pageInfo = { ...this.state.pageInfo, offset: new_offset }
            if (currentPage === 0 && this.state.currentRecords.length > 0) {
                currentPage = 1
            }
            const offset = (currentPage - 1) * pageLimit;
            const currentRecords = records.slice(offset, offset + pageLimit);
            this.setState({ currentPage, currentRecords, totalPages, pageInfo }, () => {
                this.myUserRecords();
            });
     };
    
     render() { 
            let { start , end } = this.getStartEndValue();
          
            <div className="paginationNew">
              <div className="recordCount">
                   
                     {this.state.totalRecords > 0 ?
                             <h2 className={"text-dark"}>
                                    
                              {/* <strong className="text-secondary"> {start} - {end} 
                              out of {this.state.totalRecords}</strong>{" "}  */}
    
                              <strong className="text-secondary"> {start} - {end} out of 
                              {this.state.pageInfo.limit}</strong>{" "} 
    
                              </h2>  : "No records found"  }
              </div>
              <div className="paginationComp">
                  <NewPagination
                      totalRecords={this.state.totalRecords}
                      pageLimit={(userType === 1)? premium: basic}
                      pageNeighbours={1}
                      onPageChanged={this.onPageChanged}
                      current_page={this.state.currentPage}
                   />
              </div>
            </div>
    }
4

1 回答 1

0

我在每页上添加了 30 条记录的 pageSize 以获取溢价。

const pageSize = parseInt(30);


constructor() {
super();
this.state = {
            pageSize: (userType === 1)? pageSize: basic,
            pageInfo: {
                offset: 0,
                limit: (userType === 1)? pageSize: basic,
                total: 0
            },
            totalRecords: null,
            totalCount: (userType === 1)? premium: basic,

}
            this.pageLimit = this.state.pageSize;
}

在 loadRecords() 中，我在 .done 函数内调用 API 后给出条件。

  • 如果 totalRecords > 则（Basic/Premium）限制值，它将
    只给出已经分配给（BASIC/Premium）的记录的 logCount 值，否则，给出 totalRecords。

    加载记录（）{

         .done{
             const totalRecords = (result.pageInfo.total > logCount)? logCount: result.pageInfo.total;

             this.setState({ currentPage : currentPage, totalRecords : totalRecords, records: result.records, pageInfo : result.pageInfo});
          }

    }

于 2021-05-04T08:45:08.967 回答