I want to create a list using Angular, where the data (say like over 1000 items) is retrieved from the server using JSON call. In my plan, the list will only show x amount of items in the list, and will load x more items into it when the user pull up the list.
So my question here is, how to write the expression for the ng-repeat so that
It will only show x amount of items when first loading the list
It will only load x amount of items when user pulled up the list
I think i read somewhere about ngRepeat being able to do this kind of feature, to limit and control the amount of items shown or loaded onto the list, but i forgot where i read it.
But someone told me that better way of doing this is by limiting the amount of data retrieved when using JSON call rather than letting Angular do it.
So i'm kind of confuse in here.
Take a look at ngInfiniteScroll http://binarymuse.github.io/ngInfiniteScroll/.
Last fall, i want to use a similar solution and ended up there.
Related
Mouse Click anywhere on the page, even blank spot, the data array on the page just resort itself.
I know that click might trigger view change if impure pipe is set but I didn't use any.
So I am really baffled because my development testing is OK. Only the production build has this weird behavior.
I use angular 8. The data on the page is array down from rest endpoint. I simply for loop it like all other pages does. This page is just having a big object as the response and containing 3 big arrays. And I make 3 different list on the page. Each list is also a input for a sub component. Display after sorting.
I know JS sort does not copy. But why only on production build?
I fixed it by removing the pipe which is used to filter the lists. That's it.
But I couldn't explain the cause of it.
The pipe is doing a filter. It filters the list based on some ids which belongs to the data.
A checkbox will trigger the filtering which is *ngIf on the tables row in the template.
I'm working on a project wherein I am using a news api to show the contents of a specified user typed topic,for eg "technology" , but the problem is sometimes i get thousands of results and all are displayed on a single page,but i want the number of pages of the search result to change dynamically with the typed topic,
for example tech may have 100 pages while sports may have 500 pages.
How do i do this for my website?
Any sources,links,source code might help me a lot.
Thanks.
Use Aggregate paginate module (https://www.npmjs.com/package/mongoose-aggregate-paginate) for pagination and it will take page number and limit as an input and will provide you with that limit of results.
It will also help you to store how many pages are there with the limit decided.
I think you should look into 'pagination'. Basically, you set a number of items per page to return, divide the total number based on the items set per page, and pass in the starting and last index for fetching the data (like the first 2 parameters in a Array.slice method).
I have searched far and wide, I have a long history with Angular and am sorta new to the world of React. I am looking to retrieve a single item at a time from my json file. The data is synced and it loops into render flawlessly. This would be .map(), however I do not wish to display all items in the json at once. I would like to show 1 item, then click through with navigation I have set up to show each one individually. In Angular this is done by doing something like this data[0].item index item displays.
Any ideas? Thank You
Surprised this question hasn't been asked before, at least I haven't been able to find it.
I have multiple lists or elements that are all connected together using jQuery UI sortable. Its all working as the docs say it should, however I would like to make the lists force sort. For example, when each list is loaded in, the items are ordered by date. When you move an item from list 1 into list two, you can place that item anywhere in the list, regardless of its date. Similarly you can move items within the same list so they are out of date order.
Is there a way to make it calculate the date ordering and render the items in the correct order once an item has been moved?
Once an item is moved from one list to another it performs an ajax request to save that item to that list, a possible solution would be for that request to return that list in a sorted order and then re-render that list, however that doesnt seem like a particularly clean approach as you already have all the data.
Any easier/better ways of doing this? If its also possible to prevent reordering within the same list that would be ideal.
thanks.
JQuery Sortable does not handle the behavior you are trying to achieve. You have to do it your self. I think the receive eventHandler is a good starting point. you can use ui.item.prev() and ui.item.next() to retrieve the previous and the next elements then check if the insertion point matches your requirements and insert the element to that position or turn the element back to it's old list/position ( $(ui.sender).sortable("cancel"); )
here is the problem. I have no right to create a database and I receive a csv that countain MASSIVE amount of data each day. (More than 200 000 rows)
Data that I must make accessible for everybody on the intranet. So I created a simple html/php page that extract all the rows and display those informations in a table with a filter on every column with a simple fgetcsv.
Problem is that the web browser is not suited to display that much informations at the same time so it makes it crash or freeze for a while, and you can't do anything for a while.
I wanted to know if anyone knew a way to say to the page "load only the first 100 rows for exemple, then automatically create a next page that will load and display the next 100 rows etc."
I manages to DISPLAY only the first x rows and then when you clicked a button the table would expand with the next x rows, but they are still all loaded at once. The y remaining are just hidden, so the browser still dies or freeze.
Any idea ?
Thanks
It's a generic pagination question really. It doesn't matter if your data is stored in database or in a CSV file.
Just pass some offset argument to your PHP script via query string or URL rewriting and use it to select only part of your CSV list.
Like this: /big-table.php?page=3.
// Getting passed argument.
$pageNumber = (int) $_GET['page'];
// Items per page default.
$itemsPerPage = 100;
// Calculating offset.
$offset = ($pageNumber - 1) * $itemsPerPage;
Then use the $offset and $itemsPerPage to retrieve only part of your CSV file by limiting scope of your CSV parsing loop.
You can also pass items per page value as an argument to your script in order to control this value from your web interface. For example, if you want to create a dropdown menu with ability to select 10, 50, 100 items per page, etc.
And if you want it - you could always use AJAX to fetch more items dynamically, it doesn't really affect your pagination implementation server-side, only an output format (JSON instead of HTML).
Of course database implementation will work faster and I would recommend to opt for it instead if possible. And/Or you can use some caching layer to speed things up.
You could use the jquery Datatables plugin http://datatables.net/
It's quite simple to do what you want using that.
Refer to either this example: http://datatables.net/examples/data_sources/ajax.html or http://datatables.net/examples/data_sources/server_side.html
The most sensible thing is to demand database access. Right now, you're told to build a car but without using wheels and an engine.
Right now, you could use PHP to split the big csv in multiple smaller files of n rows long. You have to do this only once, or once a day/hour if the big csv is updated. Then you load each of these files only when you need them, either by navigating to another page or dynamically using Javascript.