search

Mevrael / bunny

BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.
https://bunnyjs.com
MIT License
486 stars 39 forks source link

Datatable go to page programatically #12

Closed joebordes closed 7 years ago

joebordes commented 7 years ago

I am using a datatable to access a database table.

The underlying SQL gets filtered by a query generator form controlled by the user. I am having a problem with the dynamic changing of pages.

Imagine a query that returns 10 pages, the user navigates to page 5 and decides to change the query criteria. Once changed the dataset now has only 3 pages. The pagination stays on page 5.

I looked for a way to update/refresh the Pagination widget or a "goToPage(1)" method but couldn't get it working.

Is there a way to set the page to the start programatically that I couldn't find?

Mevrael commented 7 years ago

Pagination should not stay. Whenever search data changed, DataTable rerenders new results from page 1.

You can update DataTable manually with DataTable.update(datatable, newAjaxURL) or DataTable.changePage(datatable, pageNumber); You can get newAjaxURL from DataTable.getDataUrl(datatable, page, params = {}) and update it according to your needs.

This is how, for example, DataTable is rerendered every time search field is updated:

this.update(datatable, this.getDataUrl(datatable, 1, Object.assign(this.getSearchData(datatable), this.getOrderData(datatable))));
joebordes commented 7 years ago

Works perfect!

I ended up using DataTable.changePage(datatable, pageNumber)

Thanks