react.js 翻页插件

最新推荐文章于 2024-07-23 08:45:00 发布

越野骑士

最新推荐文章于 2024-07-23 08:45:00 发布

阅读量3.7k

点赞数

本文链接：https://blog.youkuaiyun.com/a1038546502/article/details/54612440

版权

本文介绍了一个使用React实现的分页组件的具体代码细节，包括如何根据当前页数和总条目数显示适当的页码按钮，以及如何处理各种边界条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var Page = React.createClass({
    render:function(){
        //中间代码更新
        var totalRows = this.props.totalRows;
        var listRows = this.props.listRows;
        var nowPage = this.props.nowPage>0?this.props.nowPage:1;
        var firstRow = this.props.listRows*(this.props.nowPage-1);
        var totalPage = Math.ceil(totalRows/listRows);
        var show_count=this.props.show_count?this.props.show_count:5;
        if((!totalPage)&&nowPage>totalPage) {
            this.props.nowPage=totalPage;
        }
        if(this.props.nowPage<1) {
            this.props.nowPage=1;
        }
        var show_count_mid=show_count/2;
        var pages = [];
        for(var i=1;i<=show_count;i++) {
            var page=0;
            if(nowPage<=show_count_mid) {
                page = i;
            }else if(nowPage+show_count_mid>totalPage) {
                page = totalPage - show_count+i;
            }else{
                page =nowPage-Math.ceil(show_count_mid)+i;
            }
            if(page>0&&page!=nowPage){
                if(page<=totalPage){
                    pages.push(<li onClick={this.props.onPagination.bind(this,page)}><a>{page}</a></li>);
                }
            }else{
                pages.push(<li className="active"><a>{page}</a></li>);
            }
        }
        this.pagesbutton=pages;
        return (
            this.props.totalRows>0?(
                <ul className="pagination">
                    <li><a>Total:{this.props.totalRows} {this.props.nowPage}/{Math.ceil(this.props.totalRows/this.props.listRows)}</a></li>
                    <li onClick={this.props.onPagination.bind(this,1)}><a>firstpage</a></li>
                    <li onClick={this.props.onPagination.bind(this,this.props.nowPage==1?1:this.props.nowPage-1)}><a href="#none">&laquo;</a></li>
                    {this.pagesbutton}
                    <li onClick={this.props.onPagination.bind(this,this.props.nowPage==this.props.totalPage?this.props.totalPage:this.props.nowPage+1)}>
                        <a href="#none">&raquo;</a>
                    </li>
                    <li onClick={this.props.onPagination.bind(this,Math.ceil(this.props.totalRows/this.props.listRows))}><a>lastpage</a></li>
                </ul>
            ):(
                <ul className="pagination">
                    <li><a>No data</a></li>
                </ul>
            )
        );
    }
});

当前应该还存在Bug，请读者自行修复