I have a requirement where I query all the records and push it to array. And since I have about 2000 records to display, it takes more time. So I would like to implement infinite scroll. But I have filter feature along with this. So how can I show all records on scroll initially and show filtered records on scroll when search box contains search term? Pls help.
Thanks in Advance!
This is a slightly more complicated task since the built in angular filter requires all the elements to be in a local array before being able to filter. So you cannot use it, and must move the task of filtering to the server, for example using the sql %like% query.
You need to reuse both the array of records, and the pagination component. So there are 2 use cases:
User is viewing unfiltered list
User has entered a valid search query and is viewing a filtered list
When user is viewing the unfiltered list, you are querying the API endpoint ex:
server.com/api/records?page=page_number
When the user is viewing a filtered list, you are querying the API endpoint ex:
server.com/api/records?page=page_number&query=mysearchquery
So the entire task becomes:
User is viewing unfiltered list
User enters a search term in the search box
Use a debounce to check the input query for validation, ex: length > 4
Front end clears entire list of records, and reset any pagination state
Pagination now occuring on the filtered list
When a user clears the search box:
Clear the list of filtered records and reset pagination state
Begin paginating the unfiltered list once again
If you any specific questions about any part of the process, I'd be happy to update my answer.
Related
I'm using mui-datatable to implement table in my app. I've every feature I need up and running, and I'm using server side data and pagination.
The problem is that I need to persist selection of rows when the user change the current page.
I can store the ids of the rows that where selected in an external array using onRowSelected.. but I'm not sure how to make the table render those rows as selected when user changes the page.
Bare in mind i'm using server side data, so the idea would be that in page 1, when I select row 1, a take the id of that record and add it to the array of selected ids. Then I need to check if the ids of rows that are currently displayed in the page are included in the selected array, and if so then check it as selected in the table. That way when I change the page, the same logic would run and all rows would be cleared since none of the row in the new page are selected.. I think you get the point.
I dont know where should i check if the row's id is included y my selected array and if so, how to check it in the datatable.
Thanks in advance for the help.
You can wrap your entire MUI datatable in another component which maintains the state of all selected rows
I'm stupid... I just needed some sleep xD
My problem was solved once I realized that I just needed to pass the rowsSelected option like this:
rowsSelected: this.state.pictures.filter(p=>this.state.selectedIds.includes(p.id)).map((p,i)=>i)
where this.state.picture will change when the user changes the page and rowsSelected will also changed.
Never mind... It's a rookie mistake.
I have a list of data which are rendered by default (20 items) with lazy loading functionality (pagination) to load more data when the user scrolls to a certain position.
Now I need to implement a search functionality from the api itself, my question is:
Initially I have 20 items, when a user search they will get another 20 items based on the search term (the old set will be replaced), and when scrolling they will get page 2 from the list based on the search term.
So what is the best practice here to know when I need to concatenate the old data with the new batch or to replace the old set of data with a new one.
My question is more architectural, any help would be appreciated.
Because backend shall has paginator in search, you only would re render component with new information in such page(bit collection), in other words , if you has service backend pagination render "item component", if you search into a collection(javascript array) in browser , use "collection/list component" (map), you can use keys to property change
I have to design a search form and display the results. I am having some difficulties finalizing the models/collections to be used.
I have a few fields which acts as filters. These fields are select boxes where multiple items can be selected. After an item has been selected from a field, I need to call the API which will return a list of results with this filter and also all the remaining filter options for the other fields based on the first filter.
What I am confused is how should I go about this. Should every select box be a model? Because the options for each select box will be changing.
About the results,
I am thinking that results should be a collection. But given that there is only one API endpoint here, I am confused which model should hold the url.
Since your API is actually returning a collection of results, I'd keep the filter parameters in a model, and while submitting search request, create the collection URL dynamically based on the filter model attributes.
You can go the other way, send the request from model itself, then in parse set results from response to the collection and remove it from model, but it seems more hacky than dynamically creating collection URL
I have a small web app that allows users to search for new items or select items that they have previously searched for saved to a menu. The issue I am having is that after a user uses the master search and then searches from their saved search, the input field is not being updated to new search text.
Also, the select values for each of the searches remain the same after the data is loaded. The correct values are being passed through the API, but the actual select is not changing.
You can see the web app here: http://dev.sortsof.com.
Try searching for an item. Then search for another.
Use the left hand menu to load your original item, you will see that the search field does not update to the correct search terms.
Also, the select will not reset back to the first select after each new set of items is loaded.
Any thoughts?
Try this
$scope.search = searchterm ;
$scope.$apply() ;
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