Exploring the power of pagination using Django and ExtJS

Question

Exploring the power of pagination using Django and ExtJS

Extjs offers a gridpanel with pagination functionality, but I believe that the pagination only works once all the data has been received from the server (please correct me if I am mistaken). In my situation, the total amount of data from the server is 20MB, which I do not want to load in one ajax call as it can cause browser performance issues. Here is what I am looking for:

Load approximately 1 MB of data at the initial page load
Implement extjs pagination within this loaded data
When the next button on the paging toolbar is clicked, make an ajax call to retrieve the next 1MB of data and display it in the grid
Continue using extjs pagination within each subsequent 1MB chunk of data
Repeat this process...

I would appreciate any suggestions on how I can achieve this, or if there are existing methods in EXTJS to handle this scenario. Thank you for your assistance.

PS: My backend server is Django

javascript ajax django extjs pagination

Answer 1

Answer №1

It appears that the pagination feature in this context operates only after receiving all data from the server.

What led you to this conclusion?

The ExtJS Grid Pagination mechanism functions by setting a specific page size (such as 100), prompting the store to request the initial 100 entries from the server. Upon clicking "next page", the subsequent 100 entries are fetched from the server, and so forth.

In order for the pagination to function correctly, the server API must comprehend the significance of startParam, pageParam, and limitParam.

Answer 2

It appears that the pagination feature in this context operates only after receiving all data from the server.

What led you to this conclusion?

The ExtJS Grid Pagination mechanism functions by setting a specific page size (such as 100), prompting the store to request the initial 100 entries from the server. Upon clicking "next page", the subsequent 100 entries are fetched from the server, and so forth.

In order for the pagination to function correctly, the server API must comprehend the significance of startParam, pageParam, and limitParam.

Answer 3

Answer №2

Although it may be late, I have a solution for those seeking to implement pagination with Django and ExtJS using the "start" and "limit" pagination parameters sent by ExtJS.

def retrieveRecords(self, params):
    
    totalEntries = 0
    pageNumber = 1
    records = []
    ids = []
    
    #Initialize query object
    query = Q()

    #If there are filter criteria parameters, add them here
    if(params.get("searchStartDate")):
         startDate = datetime.strptime(params.get("searchStartDate"), '%Y-%m-%d').date()
         query &= Q(date_created__gte=startDate)     
    if(params.get("searchEndDate")):
         endDate = datetime.strptime(params.get("searchEndDate"), '%Y-%m-%d').date()
         query &= Q(date_created__lte=endDate)     
    
    # Get the total count of entries
    totalEntries = YourModel.objects.filter(query).count()

    #Retrieve primary keys as fetching all objects can impact performance
    your_model_ids_list = YourModel.objects.filter(query).order_by("-id").only('id')

    #Calculate page number based on start and limit parameters
    if(int(params.get("start")) != 0 ):
        pageNumber = (int(params.get("start")) / int(params.get("limit"))) + 1

    #Instantiate paginator with primary keys list and limit        
    paginator = Paginator(your_model_ids_list, int(params.get("limit")))

    #Get record IDs for specified page number
    recordIds = paginator.page(pageNumber)

    #Collect record IDs in an array
    for recordId in recordIds.object_list:
        ids.append(recordId.id)


    #Fetch records from model based on collected IDs
    result = YourModel.objects.filter(Q(pk__in=ids)).order_by("-id")


    #Create response object and return data
    return {'totalEntries': totalEntries, 'records': result}

Answer 4

Although it may be late, I have a solution for those seeking to implement pagination with Django and ExtJS using the "start" and "limit" pagination parameters sent by ExtJS.

def retrieveRecords(self, params):
    
    totalEntries = 0
    pageNumber = 1
    records = []
    ids = []
    
    #Initialize query object
    query = Q()

    #If there are filter criteria parameters, add them here
    if(params.get("searchStartDate")):
         startDate = datetime.strptime(params.get("searchStartDate"), '%Y-%m-%d').date()
         query &= Q(date_created__gte=startDate)     
    if(params.get("searchEndDate")):
         endDate = datetime.strptime(params.get("searchEndDate"), '%Y-%m-%d').date()
         query &= Q(date_created__lte=endDate)     
    
    # Get the total count of entries
    totalEntries = YourModel.objects.filter(query).count()

    #Retrieve primary keys as fetching all objects can impact performance
    your_model_ids_list = YourModel.objects.filter(query).order_by("-id").only('id')

    #Calculate page number based on start and limit parameters
    if(int(params.get("start")) != 0 ):
        pageNumber = (int(params.get("start")) / int(params.get("limit"))) + 1

    #Instantiate paginator with primary keys list and limit        
    paginator = Paginator(your_model_ids_list, int(params.get("limit")))

    #Get record IDs for specified page number
    recordIds = paginator.page(pageNumber)

    #Collect record IDs in an array
    for recordId in recordIds.object_list:
        ids.append(recordId.id)


    #Fetch records from model based on collected IDs
    result = YourModel.objects.filter(Q(pk__in=ids)).order_by("-id")


    #Create response object and return data
    return {'totalEntries': totalEntries, 'records': result}

Exploring the power of pagination using Django and ExtJS

Answer №1

Answer №2

Similar questions

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Can I keep using ng-repeat multiple times in my code?

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

Encountering a 404 error when attempting to upload information to the database

Can you explain the concept of a factory function to me?

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

Can you guide me on utilizing filter in an Apps Script array to retrieve solely the row containing a particular user ID within the cell?

Managing MUI form fields using React

Monitoring the sharing of content on social media networks, rather than tracking individual

Ways to extract specific HTML from a jQuery element

Creating a constant in an AngularJS module: The definitive guide to defining module-specific constants

`Express.js Controllers: The Key to Context Binding`

Utilizing group by date feature in Angular ag-Grid

Adjusted position of the viewport if the DOM element containing the renderer is not located at the top of the display

Open the link and input the text into the text box?

Increase the quantity with animation

Node and browser compatible JavaScript logging library for effective logging experience across platforms

Refreshing HTML content using event delegation in JavaScript

Utilizing ASP.NET MVC Kendo Grid to invoke a controller method via JavaScript

What is the best way to connect a series of checkboxes within a form utilizing Angular?