Question

我在反应JS中制作了分页组件。目前，它只显示所有页码，但当总页数超过8时，它实际上应显示一些点。这是它应该是什么样子：

℃。总计＆lt; 9页：p1选择{1} 2 3 4 5 6 7 8

d。总计＆lt; 9页：第5页选择1 2 3 4 {5} 6 7 8

即总计＆lt; 9页：第8页选择1 2 3 4 5 6 7 {8}

F。总＆gt; = 9页：p2选择1 {2} 3 ... 7 8 9

克。总＆gt; = 9页：p3选择1 2 {3} 4 ... 7 8

小时。总＆gt; = 9页：p4选择1 ... 3 {4} 5 ... 9

我。总＆gt; = 9页：p6选择1 ... 5 {6} 7 ... 9

Ĵ。总＆gt; = 9页：p7选择1 2 3 ... 6 {7} 8 9

ķ。总＆gt; = 9页：p8选择1 2 3 ... 7 {8} 9

＆＃13;

db.test.aggregate([
    {
        $addFields: {
            filtered_tokens: {
                $filter: {
                    input: '$tokens',
                    as: 'token',
                    cond: {
                        $or: [
                            {
                                $eq: ['$$token.word', 'I']
                            },
                            {
                                $and: [
                                    {
                                        $eq: [{$substr: ['$$token.word', 0, 1]}, 'p']
                                    },
                                    {
                                        $eq: ['$$token.pos', 'VBZ']
                                    }
                                ]                            
                            }
                        ]
                    }
                }
            }
        }
    },
    {
        $match: {
            filtered_tokens: {$size: 2}
        }
    },
    {
        $addFields: {
            filtered_tokens: {
                $subtract: [
                    {
                        $arrayElemAt: ['$filtered_tokens.index', 1]
                    },
                    {
                        $arrayElemAt: ['$filtered_tokens.index', 0]
                    }
                ]
            }
        }
    },
    {
        $match: {
            filtered_tokens: 1
        }
    }
])

＆＃13;

console.clear();


class TodoApp extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: ['abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf', 'abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf', 'abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf'],
      currentPage: 1,
      todosPerPage: 3
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }

  render() {
    const {
      todos,
      currentPage,
      todosPerPage
    } = this.state;

    // Logic for displaying current todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);



    const renderTodos = currentTodos.map((todo, index) => {
      return <li key = {
        index
      } > {
        todo
      } < /li>;
    });

    // Logic for displaying page numbers
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }


    const renderPageNumbers = pageNumbers.map(number => {
      return (

        <
        li key = {
          number
        }
        id = {
          number
        }
        onClick = {
          this.handleClick
        } > {
          number
        } <
        /li>
      );
    });

    return ( <
      div >
      <
      div id = "abc" > {
        this.state.currentPage
      } < /div> <
      ul > {
        renderTodos
      }

      <
      /ul> <
      ul id = "page-numbers" > {
        renderPageNumbers
      }

      <
      /ul> < /
      div >
    );
  }
}


ReactDOM.render( <
  TodoApp / > ,
  document.getElementById('app')
);

＆＃13;

html,
body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1.2em;
}

#page-numbers {
  list-style: none;
  display: flex;
}

#page-numbers>li {
  margin-right: 0.3em;
  color: blue;
  user-select: none;
  cursor: pointer;
}

#abc {
  color: red;
  text-decoration: underline;
}

＆＃13;

任何帮助表示赞赏！感谢

Answer 1

＆＃13;

console.clear();


class TodoApp extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: ['abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf', 'abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf', 'abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf'],
      currentPage: 1,
      todosPerPage: 3
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }

  pageItem(number) {
    return <
        li key = {
          number
        }
        id = {
          number
        }
        onClick = {
          this.handleClick
        } > {
          number
        } <
        /li>;
  }

  renderPages(n, c) {
     const showSDots = c > 4;
     const showEDots = c < n - 3;
     
     const r = [];
     r.push(this.pageItem(1));
     if (showSDots) {
        r.push(this.pageItem('..'));
     } else {
     for(let i = 2; i<c-1; i++) {
        r.push(this.pageItem(i));
     }
     }
     if (c > 2) r.push(this.pageItem(c-1));
     r.push(this.pageItem(c));
     if (c < n-1) r.push(this.pageItem(c+1));
     if (showEDots) {
       r.push(this.pageItem('...'));
     } else {
     for (let i = c + 2; i<n; i++) {
        r.push(this.pageItem(i));
     }
     }
     r.push(this.pageItem(n));
     return r;
  }

  render() {
    const {
      todos,
      currentPage,
      todosPerPage
    } = this.state;

    // Logic for displaying current todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);



    const renderTodos = currentTodos.map((todo, index) => {
      return <li key = {
        index
      } > {
        todo
      } < /li>;
    });

    // Logic for displaying page numbers
    const tp = Math.ceil(todos.length / todosPerPage);

    return ( <
      div >
      <
      div id = "abc" > {
        this.state.currentPage
      } < /div> <
      ul > {
        renderTodos
      }

      <
      /ul> <
      ul id = "page-numbers" > {
        this.renderPages(tp, +currentPage)
      }

      <
      /ul> < /
      div >
    );
  }
}


ReactDOM.render( <
  TodoApp / > ,
  document.getElementById('app')
);

＆＃13;

html,
body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1.2em;
}

#page-numbers {
  list-style: none;
  display: flex;
}

#page-numbers>li {
  margin-right: 0.3em;
  color: blue;
  user-select: none;
  cursor: pointer;
}

#abc {
  color: red;
  text-decoration: underline;
}

＆＃13;

<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  <title>React JS</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

＆＃13;

如何在reactJS / Javascript分页中的页码之间添加点

1 个答案: