I have a data table which supports server side pagination and sorting.
I am using Redux as my store and React for display. The scenario is :
I have 5000 rows and hence server side pagination. Now the real challange is :
How do I use redux optimally to fetch data remotely in combination with Pagination and Sorting ?.
This link explains how I can handle server pagination by not hitting the server API for repeated data. But how can I handle pagination and sorting (together) in terms of saving data in REDUX and not making unnecessary calls to API for repeated data.
Example :
Pagination - Page Size = 10 =>
I am on Page1 -> I get first 10 records and display / save them with a FLAG that Page 1 data fetched true (as mentioned in the above article). Same for other pages. Now when I go to ANY page number; I check the flag, based on which I fetch data from REDUX or API.
If sorting is introduced in this solution; what can be done ? Need optimal solutions performance wise. Thanks !
Related
I am developing a React Firebase web app, and I want to implement a "custom" sort on top of sorting by name and date. How should I go about storing this "sort" information?
Do developers append a "key" property to the components themselves? How will reordering work then (do i shift every component's key values by 1? That seems inefficient). Or should I do a separate file or database entry that just stores the order as an array of component id keys?
Should all of this be resorted on page load or should I reorganize the data in a way where as soon as I request them they're already sorted?
I've tried adding the order key prop to every item but it seems overly complicated for a simple feature. I haven't had much luck searching this online.
Firestore allows you to orderBy and limit queries.
You can also specify a cursor to paginate more data on request.
See This Example in the docs for more info.
I already have a table that renders my data. But there can be as many as 1000 rows in the table.
Right now, the dataprovider component sends date to the table component via props. What's the best way to start pagination? Should I still fetch all the data at once, as is currently the case? If so, where do I store it? Keep it in memory and take slices as needed? Or somehow use query params for the the number of records to fetch (0 - 24, 25 - 49, etc)?
Returning all the data in one response could be too large, this depends on the size of each item. If the size of the response is small, you can simply request all the data and do the pagination on the UI. You can use react-table to do this.
If the response is too heavy (time-consuming), you have to implement pagination on your server. Then you can use react-table to seamlessly integrate the pagination to the UI.
The approach you use to paginate it is up to you, here are a few ways you can do it in: API pagination guide
I am using react with redux for development.
I have around 20000 rows in database. I need to display list to users on screen, 10 rows at a time. I also have sorting and filters applied to the list.
I can think of 2 options
Store only UI state of component in the redux state and bring data for each page using ajax/fetch. This way all sorting and filters are applied on server end and i get only 10 rows to display at a time.
Bring all data once to redux state and display 10 records. This way we do not request server for data again, as all sorting and filters are applied within data stored in state
What is better option/practice?
I have a big data portion that I would like to post in a table. However, the data should be sorted and paginated. I know I am able to pass the whole data to the client at once and then paginate it using angular, but this will be too slow. I prefer to pass the data page-by-page, so one the client want to open a page from a table to load the data for it.
Up until now I have created an API that returns me the data that I need, based on the page number and the number of rows on the page. However, I don't know how to use it with AngularJS.
Can you please help me?
It looks like a backend problem. If you are using a standard restful backend, use the limit/skip parameters, you can encapsulate into a paginate.
Example:
localhost:1337/dataTable?skip=0&limit=100
localhost:1337/dataTable?skip=100&limit=100
localhost:1337/dataTable?skip=200&limit=100
...
On the frontend use a table object like ng-Table, and use the pages to keep track of the offset, the page number and the total items available.
skip = (pagNum - 1 * pageSize)
limit = pageSize
Make your backend return you the page you want plus the available dataNumber so you can build the pages controller.
Documentation for skip/limit on sails
http://sailsjs.org/documentation/reference/waterline-orm/queries/limit
http://sailsjs.org/documentation/reference/waterline-orm/queries/skip
Best approach is to keep track of the limit and offset in your controller. Then when user selects new page (offset) or changes items per page (limit), update the corresponding values and use them to make a new http request.
You could call a function on ng-change of a dropdown and that drop down would contain values of page number and number of records to fetch. Or you can provide two text boxes one for page number other for number of records and keep a button and on its ng-click event that will take value of those text boxes and post to your server and bring back data based on new values in text boxes
I want to make a search into google patent using the following URL which is obsolete
https://ajax.googleapis.com/ajax/services/search/patent?v=1.0&q=thumb%20wrestling%20apparatus&userip=192.168.1.102
It gives me limited number of records per page.
But at the end of the JSON it also returns the cursor which has start and label keys. So my question is that how can I use that cursor to show all the records in my search. Like if there are 8 pages and each page contains 4 records so I want to show all 32 records on my UI.
How can I achieve that?
And second question that is there REST APi for google patent search? If yes then how can I search the patent using REST API and how can I get all the records on one page?
It looks like the API is restricted to a maximum of 8 results per request (you can increase your current 4 results to 8 by using the query param rsz=8.
So I guess the only way to get all results is by performing multiple requests. So if the current page info data is...
"pages":[
{"start":"0","label":1},
{"start":"8","label":2},
{"start":"16","label":3},
{"start":"24","label":4},
{"start":"32","label":5}
]
You would make 5 requests chaining the start param start=0, start=8 ... and so on, extracting the results and pushing to an array store. If you're not already I recommend using something like Restangular, as it would make this process much easier.
Depending on how your UI is set out, it would be nice maybe to do this with some lazy loading as the user is scrolling through the list?