react分页带首页尾页的实现

Posted 2022-01-03 老张在线敲代码

index.tsx代码

import React,  Component  from 'react';
import Header from '../../component/header'
import Footer from '../../component/footer'
import  Pagination  from 'antd';
import axios from 'axios';
type Props = 
    history:any
    data:any

class Index extends React.Component<Props>
    constructor(props:any)
        super(props)
        this.state=
            list:[],
            pPageCfg: 
                page_number: sessionStorage.getItem("currentPages") || 1,
                page_size: 8,
              ,
            setPageCfg: 
                currentPage: 1,
                totalPage: 24,
            ,
         
         this.lists=this.lists.bind(this)
    
   
   itemRender(current:any, type:any, originalElement:any)  if (type === 'prev')  return <a>上一页</ a>;  if (type === 'next')  return <a>下一页</ a>;  return originalElement; 
   getPage=(page:any, page_size = 8)=> 
    sessionStorage.setItem("currentPages", encodeURIComponent(page));
    const  pPageCfg :any = this.state;
    pPageCfg.page_number = page;
    pPageCfg.page_size = page_size;
    console.log(...pPageCfg,123)
    axios.get("http://localhost:8888/pages", params:...pPageCfg).then((res) => 
      console.log(res.data);
      const list2=res.data.data
        this.setState(
           list:list2,
          setPageCfg: 
            currentPage: page,
            totalPage: 24,
          ,
        );
    );
  
  lists():any
    const list:any =this.state
    return list.map((item:any,index:any)=>
     return <li key=index onClick=()=>this.xiabiao(item,index)>
             <div>
                  <img src=item.img alt="" />
                  <p>item.txt</p>
             </div>
         </li>
    )

   componentDidMount()
    const  setPageCfg :any = this.state;
      this.getPage(setPageCfg.currentPage);
   
   xiabiao(item:any,index:number)
    console.log(item)
    this.props.history.push(pathname: `/case/detail/$index`, state: data:item)
   
   first()
    let setPageCfg:any =this.state
    if(setPageCfg.currentPage == 1)
      return
    
    setPageCfg.currentPage = 1
    this.setState(
      setPageCfg
    )
    this.getPage(1)
   
   end()
    let setPageCfg:any =this.state
    if(setPageCfg.currentPage == 3)
      return
    
    setPageCfg.currentPage = 3
    this.setState(
      setPageCfg
    )
    this.getPage(3)
  
    public render() 
        const list,setPageCfg:any=this.state
        console.log(list)
        return (
            <div>
              <Header></Header>
                <ul className="content">list.length>0&&this.lists()</ul>
                <div className="fenyeqi">
                  <p className="zongshu">共有3页</p>
                  <p onClick=()=>this.first()>首页</p>
                  list.length !== 0 ? (
                  <Pagination 
                    className="fenye"
                    onChange=this.getPage
                    current=setPageCfg.currentPage
                    defaultPageSize=8
                    total=setPageCfg.totalPage
                    itemRender=this.itemRender
                   />
                  ) : (
                  "请等待..."
                  )
                  <p onClick=()=>this.end()>尾页</p>
                </div>
                <Footer></Footer>
            </div>
        );
    


export default Index;

后台接口

router.get('/pages', async (req, res, next) => 
  let page_size=8,page_number=1=req.query
  let sql = `select * from pages limit $(page_number-1)*page_size,$page_size`
  let result = await mysql(sql)
  if (result) 
    res.json(new SuccessModule(result))
    return
  

  res.json(new ErrorModule('操作失败'))
)