interface INumberPagerItem {
    url: string;
    text: string;
    page: number;
    title: string;
    target: string;
    iscurrent: boolean;
    enabled: boolean;
}
interface INumberPager {
    total: number;
    current: number;
    showcount: number;
    items: INumberPagerItem[];
}

class NumberPagerItemModel implements INumberPagerItem {
    url: string;
    text: string;
    page: number;
    target: string;
    iscurrent: boolean;
    title: string;
    enabled: boolean;

    constructor(url: string, text: string, page: number, title: string, target: string, iscurrent: boolean, enabled: boolean) {
        this.url = url;
        this.text = text;
        this.page = page;
        this.title = title;
        this.target = target;
        this.iscurrent = iscurrent;
        this.enabled = enabled;
    }
}

class NumberPagerItem extends React.Component{
    render() {
        var a = null;
        if (this.props.enabled) {
            a = {this.props.text}
        }
        else {
            a = {this.props.text}
        }
        return (a);
    }
}

class NumberPager extends React.Component{
    constructor(props: INumberPager) {
        super(props);
    }

    render() {
        var items = this.props.items.map((i) => {
            return ();
        });

        return (
            
                {items}
            );
    }
}
interface IFastPager {
    current: number;
    totalpages: number;
    fastToPage(next: number): void;
}
class FastPager extends React.Component{
    next: number;
    constructor() {
        super();

        this.state = { current: 1, godisabled: true }
    }
    componentWillMount() {
        this.state.current = this.props.current;
        this.next = this.props.current;
    }
    handleChange(e) {
        this.next = parseInt(e.target.value);
        this.state.godisabled = this.next == this.state.current;
        this.setState(this.state);
    }
    handleClick(e) {
        if (this.next != this.state.current) {
            this.next = this.next > this.props.totalpages ? this.props.totalpages : this.next;
            this.props.fastToPage(this.next);
        }
    }
    render() {
        return (
            
                
                    到第
                 this.handleChange(e)} />
                    页
                
                 this.handleClick(e)} />
            
        );
    }
}

interface IWsPager {
    url: string;
    target?: string;
    total: number;
    size: number;
    current: number;
    showcount: number;
    needfast: boolean;
}

interface IWsPagerState {
    current: number;
    items: INumberPagerItem[];
}

class WsPager extends React.Component{
    constructor(props: IWsPager) {
        super(props);

        this.state = { current: this.props.current, items: [] };
    }
    componentWillMount() {
        let numbers: number[] = [];

        var total = parseInt((document.getElementById('ws_pager_total') as HTMLInputElement).value);
        var current = parseInt((document.getElementById('ws_pager_current') as HTMLInputElement).value);
        this.state.current = current;

        let totalpage = Math.ceil(total / this.props.size);
        let prepage = this.state.current - 1;
        let nextpage = this.state.current + 1;

        numbers.push(-10);

        if (totalpage - this.props.showcount <= 0) {
            for (var i = 1; i <= totalpage; i++) {
                numbers.push(i);
            }
        }
        else {
            let half = (this.props.showcount - 1) / 2;
            let pre = this.state.current - half;
            let next = this.state.current + half;

            numbers.push(1);

            if (pre > half) {
                numbers.push(-9);
            }
            var start = pre;
            if (pre < 2) {
                start = 2;
                var end = start + this.props.showcount > totalpage ? totalpage : start + this.props.showcount
                for (var i = start; i < end; i++) {
                    numbers.push(i);
                }
            }
            else {
                start = pre;
                if (next >= totalpage) {
                    next = totalpage - 1;
                    start = next - this.props.showcount;

                    for (var i = start; i <= next; i++) {
                        numbers.push(i);
                    }
                } else {
                    for (var i = pre; i < this.state.current; i++) {
                        numbers.push(i);
                    }

                    if (this.state.current != 1) {
                        numbers.push(this.state.current);
                    }

                    for (var i = this.state.current + 1; i <= next; i++) {
                        numbers.push(i);
                    }
                }
            }

            if (next + 1 < totalpage) {
                numbers.push(-2);
            }

            numbers.push(totalpage);
        }

        numbers.push(-1);

        var items: INumberPagerItem[] = [];

        for (var i = 0; i < numbers.length; i++) {
            var num = numbers[i];
            if (num == -10) {
                items.push(new NumberPagerItemModel(this.props.url, '上一页', prepage, '上一页', null, false, prepage > 0));
            } else if (num == -1) {
                items.push(new NumberPagerItemModel(this.props.url, '下一页', nextpage, '下一页', null, false, nextpage <= totalpage));
            } else if (num == -9) {
                items.push(new NumberPagerItemModel(null, '...', num, '向前' + this.props.showcount.toString() + "页", null, false, false));
            } else if (num == -2) {
                items.push(new NumberPagerItemModel(null, '...', num, '向后' + this.props.showcount.toString() + "页", null, false, false));
            } else {
                items.push(new NumberPagerItemModel(this.props.url, num.toString(), num, num.toString(), null, this.state.current == num, this.state.current != num));
            }
        }

        this.setState({ current: this.state.current, items: items });
    }
    handleFastToPage(e) {
        window.location.href = this.props.url + e;
    }
    render() {
        var p = null;
        if (this.props.needfast) {
            p =
                (
                    

                        
                         this.handleFastToPage(e)} />
                    
                );
        } else {
            p =
                (
                    

                        
                    
                )
        }
        return (p);
    }
}

ReactDOM.render(
    ,
    document.getElementById('pager')
)

目前我就是最笨的判断，if else 嵌套，可有算法优化一下？
就是计算numbers数组的值的算法。