I have a front end where I query my API where all my endpoints accept skip and take params for pagination. I am wondering how would I implement the pagination into my v-data-table component. The API returns total count of items in the response object. How can I dynamically make the pages appear in the footer so that its always total/take and when I click on another page at the bottom the data gets pulled from the API again with the selected page so I can do
take = v-data-table page size
skip = v-data-table current_page * page_size
?
What I do right now is to just display everything I get from the API and apply to the :items prop, I cant do that anymore as the data in the API grows fast and the JSON fetch takes longer and longer.
Related
Looking to rebuild account pages for users of a Laravel 8 based application using something like Inertia/Livewire, Vue/React to make just the account area an SPA. User accounts currently have many pages in which to manage their items and have a dashboard that summarises item data that link to item listing pages for managing.
Ideally the new dashboard will have component based widgets which would load the HTML with temporary place holders for the items whilst the data is being requested. Not sure what would make a better user experience, having the whole page show temporary place holders for dynamic data and then all populate at the same time or populate each component as and when the data is ready.
Would it be more efficient to have each component request its own data individually or should each component specify what data it needs to the parent component (dashboard) which then does one request for all widgets?
The widgets would link to item listing pages where users can manage items. The way the listing pages should work is very similar to that of Asana, when an item is selected it opens a panel to the right of the list which loads the data related to that item. Again, when the panel opens it has place holders until the data requested has been fetched.
With Inertia the data can be queried in the controller and then passed as props to the view that Inertia renders. Items would be passed in this way and then listed on a listing page component. The URL should update from /items to /item/123 when clicking an item so it would have its own dynamic route that passes the item id to the relevant action.
Would this have its own action separate from the one that gets the initial list of items?
The list still needs to be there and used to click between items so was thinking it could actually use the same action?
Items could be in the thousands and will have filtering options so pagination and throttling will be necessary.
Been looking at Inertia with Vue so far and it looks to meet requirements, can’t change from using Laravel 8, just wondering what approach would be most suitable or if there is another approach that should be considered. Interested to hear how others might go about it.
When using DataTables, how can I control page size on the server-side? I want to take advantage of bult-in navigation buttons (prev, next etc.), but don't want clients to be able to dictate page size.
The only option I see is pageLength which controls page size from client's end, which defeats the purpose in my case.
This is Laravel application and I'm using Yajra package (DataTables as a Service) implementation. Note that I can't use Eloquent's built-in pagination because then I'll have to manage navigation myself and will also need to disable DataTable's own navigation because that one depends on pageLength.
A good way is to remove the present page size in the datatable by adding paging to false on data table options.
Then u can do pagination by simply add laravel pagination class when dragging data from your models. E.g
$all_items = user model::paginate($page_size,['*'],'page_no');
The last variable of the paginate method is just indicating the parameter name of the page no. Useful when you have more than pagination in a page. It can be changed to whatever unique value u like.
I'm writing an infinite scrolling list. There is a data grid that displays the data and a controller and model that provides the data to this grid.
Right now, the view receives the list of data and displays it. For the sake of infinite scrolling, it throws an event which lets its parent know that it needs the next page of data. The parent requests the next page of data, and it's the controller that decides what is the next page of data (in terms of page number, page size, etc.)
I'd like to know where I should keep the page number and page size, or in general, using MVC, where are we supposed to keep the state ?
I have had 2 different display from a website that is shaped like a tab menu. For the first tab menu, data displayed does not require pagination, however for the second tab menu, data displayed requires pagination because the amount of data a lot.
How to display both of the data if the first tab menu did not need the presence of pagination and the second tab menu need pagination ??
Give me any suggestions step to resolve this.....
Either build pagination the normal way (with page refreshes, see the links in the comments to your question) and save a parameter to know that you're busy in the 2nd tab, or use ajax to load the paginated data in the 2nd tab. This requires you to build an api like functionality to obtain this paginated data as json and build the page with javascript. From the api you would call a method on your model that uses LIMIT and OFFSET to get the right data section.
I'd like to setup jquery pagination via ajax with the Pagination plugin. Unfortunately, I can't get the example to display more than one result (even after I change the items_per_page setting). How can I get this to work? Can downloaded from github.
It looks like the items_per_page setting is only used internally and doesn't affect how it displays the results
items_per_page
The number of items per page. The maximum number of pages is calculated by dividing the number of items by items_per_page (rounded up, minimum 1). Please note: This value is only for calculating the number of pages. The actual selection of the items correlating to the current page and number of items must be done by your code in your callback function! Default: 10
You will need to update this function if you want to increase the items per page using some kind of skip and take
function pageselectCallback(page_index, jq){
var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}
All this is doing is copying the element at the current page index i.e. 1-3.