Как реализовать бесконечную прокрутку в таблице blueprintjs - PullRequest
Новая
       29

Как реализовать бесконечную прокрутку в таблице blueprintjs

0 голосов
/ 11 сентября 2018

Кто-нибудь реализовал бесконечную прокрутку в таблице BlueprintJS?

Мое требование - получить дату таблицы из API, поскольку пользователь прокручивает таблицу. Я пробовал использовать onCompleteRender реквизиты таблицы BlueprintJS, но это не соответствует моему требованию, поскольку все страницы выбираются в однойидти.
Я попробовал 

  <div>
                {this.props.spiders.spiders.length !==0 ?
                <Table numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} className="bp3-dark tableheight" onCompleteRender={this.scroll} enableRowHeader={false}>
                    <Column name="Name" cellRenderer={cellRenderer} />
                    <Column name="Developer" cellRenderer={cellRenderer}  />
                    <Column name="Status"  cellRenderer={cellRenderer} />
                    <Column name="Workers" cellRenderer={cellRenderer}  />
                    <Column name="Customer"  cellRenderer={cellRenderer} />
                    <Column name="Last Run"  cellRenderer={cellRenderer} />
                    <Column name="Proxy" cellRenderer={cellRenderer}  />
                </Table> :''}
  </div>

Мой scroll метод 

scroll = () =>{
       if(this.props.spiders.next!=null)
       {
           this.props.spiders.page = this.props.spiders.page + 1;
           this.props.pagination()

       }
    }

1 Ответ

0 голосов
/ 16 сентября 2018

Мы можем использовать событие onWheel для прослушивания событий прокрутки, а затем проверить, находимся ли мы в нижней части элемента для загрузки следующей страницы. Это можно реализовать как 

  <div className="spiderList" id="spidertable" onWheel={this.scrolling} ref="spiders" >
                {this.props.spiders.spiders.length !== 0 ?
                    <Table className="bp3-dark" numRows={this.props.spiders.spiders.length} defaultRowHeight={45} defaultColumnWidth={180} enableRowHeader={false} >
                        <Column name="Name" cellRenderer={cellRenderer} />
                        <Column name="Developer" cellRenderer={cellRenderer} />
                        <Column name="Status" cellRenderer={cellRenderer} />
                        <Column name="Workers" cellRenderer={cellRenderer} />
                        <Column name="Customer" cellRenderer={cellRenderer} />
                        <Column name="Last Run" cellRenderer={cellRenderer} />
                        <Column name="Proxy" cellRenderer={cellRenderer} />
                    </Table> : ''}
            </div>

Обработчику прокрутки необходимо проверить, достигнуто ли дно div, это можно сделать с помощью 

 scrolling() {
        const table = document.getElementById('spidertable')
        if (this.isBottom(table)) {
            if (this.props.spiders.next != null && this.props.loading === false) {
                this.props.spiders.page = this.props.spiders.page + 1;
                //call the api to fetch more table pages
            }
        }
    }

Мы можем определить, прокрутили ли пользователи до нижней части таблицы, используя следующий метод 

 isBottom(el) {
        return el.getBoundingClientRect().bottom <= window.innerHeight;
    }
...