I am using Backbone to do pagination on a static dataset. So I have a dataset with 100 records, I would like to store that data in the collection and use pagination over that dataset.
There is no database pagination available. So if I have 100 records, I would like to show 10 and then when I scroll, I would like to append another 10 to the view.
Any help is appreciated.
This might help you. Look at clientPager. A plugin by Addy Osmani.
Related
Hello everyone,
I am using react-admin for admin panel. I am facing issue, the pagination does not work properly.
The pagination makes only for 10 records.
eg. if I have 100 records, there should be 10 pagination if every page has 10 records.
but it makes pagination for 10 records and shows all the records on the 1st-page. the plugin does not make pagination. Whether records are 100 or more than 100.
if i configure dataprovider with fake data, then it is working perfectly.
if anyone has idea about that please let me know solution.
Thanks
react-admin relies on Content-Range response header in order to build the pagination controls. Does your API return correct value like Content-Range: posts 0-9/100? Sorry I don't have enough reputation to post this as a comment.
I have a grid to which there are 2 features in my application regarding export.
Exporting "only the rows which are visible to the user". For example, there might be 50 rows on the DOM but only 20 rows might be visible to the user(remaining can be seen by scrolling). In this scenario, when clicking on this option, only 20 records should be exported.
Exporting n number of rows, by first fetching them from API and then "applying formatters" on them
Please note that I have formatters and transformers which should be applied on the rows before we export them.
The closest solution which I came up with, is to take the rows(either current displaying (or) after fetching from api) and creating a new grid below(with 'display:none' so that user won't see it). Now use api.exportDataAsCsv(params) on the new grid. But this does not seems to be a good approach.
Another point to be noted is that in the second feature, after fetching n number of rows, I don't want to add the fetched rows to my currently displaying grid(Or should I to achieve the functionality?). All I want is to fetch rows, apply formatters and export them into CSV/XLS.
Any suggestions/insights would be helpful.
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 have a database with 10,000 items, to which you can add and remove while the app is running.
I have a ListBox that displays at most 100 items, and supports paging.
You can filter and sort on the 10,000 items, which needs to be immediately reflected in the listbox.
I have a button that randomly selects an item as long as it passes the filters.
What is the best set of collections/views to use for this kind of operation?
So far, my first step will be to create an ObservableCollection of ALL items in the database which we will call MainOC.
Then create a List of all items that match the filter by parsing MainOC which we will call FilteredList.
Then create a ListCollectionView based on the above List that holds the first 100 items.
CONS:
You have to recreate the ListCollectionView every time a sort operation is applied.
You have to recreate the ListCollectionView every time you page.
You have to recreate the ListCollectionView every time a filter is changed.
You have to recreate the ListCollectionView every time an item is added or removed to MainOC.
Is there a better approach that I am missing?
For example, I see that you can apply filters to a ListCollectionView. Should I populate my ListCollectionView with all 10,000 items? But then how can I limit how many items my ListBox is displaying?
Should I be doing my filtering and sorting directly against the database? I could build FilteredList directly off the database and create my ListCollectionView based off that, but this still has all the cons listed above.
Looking for any input you can provide!
This is a problem which is easily solved using DynamicData . Dynamic data is based on rx so if you are not familiar with the wonderful Rx I suggest you start learning it. There is quite a bit of a learning curve but but the rewards are huge.
Anyway back to my answer, the starting point of dynamic data is to get some data into a cache which is constructed with a key as follows
var myCache = new SourceCache<MyObject, MyId>(myobject=>myobject.Id)
Obviously being a cache there are methods to add, update and remove so I will not show those here.
Dynamic data provides a load of extensions and some controllers to dynamically interrogate the data. For paging we need a few elements to solve this problem
//this is an extension of observable collection optimised for dynamic data
var collection = new ObservableCollectionExtended<MyObject>();
//these controllers enable dynamically changing filter, sort and page
var pageController = new PageController();
var filterController = new FilterController<T>();
var sortController = new SortController<T>();
Create a stream of data using these controllers and bind the result to the collection like this.
var mySubscription = myCache.Connect()
.Filter(filterController)
.Sort(sortController)
.Page(pageController)
.ObserveOnDispatcher() //ensure we are on the UI thread
.Bind(collection)
.Subscribe() //nothing happens until we subscribe.
At any time you can change the parameters of the controllers to filter, sort, page and bind the data like follows
//to change page
pageController.Change(new PageRequest(1,100));
//to change filter
filterController.Change(myobject=> //return a predicate);
//to change sort
sortController .Change( //return an IComparable<>);
And as if by magic the observable collection will self-maintain when any of the controller parameters change or when any of the data changes.
The only thing you now have to consider is the code you need for loading the database data into the cache.
In the near future I will create a working example of this functionality.
For more info on dynamic data see
Dynamic data on Github
Wpf demo app
Im new to extjs,I need to pass a xml(xml data thats loading grid),and start value,and limit.How can I do this in 'store.load'???
I actually need to display data in grid,with current pagenumber,and with limit.
Is there a way???plz help
You just need to setup a page size and then use store.loadPage() method.
Bear in mind there is a nice paging toolbar for data grid integrated in ExtJS