E
E
EA-EKB2020-09-28 00:07:12
Angular
EA-EKB, 2020-09-28 00:07:12

How is page-by-page unloading of records from the database implemented correctly in the Laravel bundle (a kind of simple API is written) & Angular?

Greetings! I apologize in advance for the "footcloth", but I'm used to expressing it in detail in order to better describe the picture. Key questions are highlighted. Details below.

Just started learning Angular. Can you please tell me how to implement page-by-page unloading of records from the database in Angular? Google gives articles where the pagination of the full amount of data is described, and I need to receive data in portions through the semblance of my simple API, and switch pages using the ngb-pagination component.

I have a service that gets/adds and removes db records. The constructor receives data (the getItems method) and passes the following data to the API: the current page (1), the number of records per page (5), the field by which to sort (title) and the sort direction (ASC). In principle, it outputs correctly, except for the peculiarity of sorting records with a title in the "Record N" format, where N ∈ [1; ∞) (with ASC - 10 comes immediately after 1, not after 9, i.e. 1 - 10 - 2 - 3 - ... - 9. With DESC - 9 - 8 - 7 - ... - 2 - 1 - 10.

spoiler
Это не особо принципиально, но интересно было бы узнать как сделать натуральную сортировку прямо во время запроса из БД). Пробовал и через
->orderBy('LENGTH(title)', 'ASC')
->orderBy('title', 'ASC')
->get()
и через
->orderByRaw("CAST(title as UNSIGNED) ASC")
->get()
всё равно не удалось достичь нужного результата.

But there is only one page in the paginator (which is basically true, because the API returns only part of the data). To display all the pages I (in order to count the number of pages) do I need to additionally receive the total number of records when receiving data? And how to display it if getItems returns JSON? The second method to write, which will access another API address that returns the total number of records? Some kind of crutches stinks or not? But I don't see any other options yet.
After I display all the pages in the paginator, as I understand it, on a click on the page in the paginator, hang up the method for obtaining data (getItems) with the transfer of the number of the desired page to it? Or have I piled too much?

In addition to pagination, sorting is also needed, but according to it, I have such an idea: when changing the sorting parameters, simply switch to the first page with the records sorted by the new one. Or are there better options?

ADDITION:
In the component, I tried to load items received when switching the page of the record into the array. But the table, in which the records are displayed through ngFor, is simply cleared, when switching to the previous page, a list of records for the current one is briefly displayed. What's my mistake?

CLARIFICATIONS:
At the moment, it turned out to implement getting records for the selected page. But now, when switching pages, entries from a non-first page in the table are not displayed. Displayed for a moment in the process of switching pages to the previous one. I can’t understand the very principle of displaying records in Angular when receiving them in portions, and not all at once. I added them to the items: array , of course, the records were duplicated, but the page switching happened normally, with the necessary records displayed (well, the last ones displayed duplicates) / I changed it to foreach with a check for the existence of a record in the array:
this.items = [ ...this.items, ...data['items'] ];
let app = this;
data['items'].forEach(function(item) {
    if ( app.items.indexOf(item) === -1 ) {
         app.items.push(item);
    }
});
, but in this case, the records were again displayed only for a moment at the time of the page switch. I am sure that the crutch is terribly, but I have no experience in angular at all. Google does not know such cases (with data being received in batches), only ways where all the data has already been received. I only googled that angular does not notice array changes when records are added and therefore they are not displayed through ngFor.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question