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

Ways to determine cleanliness or filthiness in an Angular 5 modal form?

What is the best way to include a MongoDB match argument when it is received from the frontend, and to exclude it if it is not provided?

Unveiling the Power of AngularJS for Parsing JSON Data

Utilizing Queries Within Django Models

Inject a snippet of temporary code at the end of the CSS file using JavaScript or JQuery

Retrieve the current state of the toggle component by extracting its value from the HTML

"Tricky HTML table layout challenge: Margins, paddings, and borders causing

How about, "Enhance your website navigation with a sleek anchor

Using jQuery to locate and substitute specific text

Leverage access tokens in React.js frontend application

Switchable radio options

Having trouble displaying specific images on React Native, how can I resolve this issue?

Is there a way to trigger $q notify without initiating a $digest cycle?

Caution: Potential Unresolved Promise Rejection Detected (ID: 21) - Error: Undefined is not a valid object when trying to evaluate 'res.json'

What is the process of saving a model with @tensorflow/tfjs-node version 2?

The onclick handler fails to function following the injection of html using jquery AJAX

Tips for displaying the message "{"POWER":"ON"}" within the else if statement (this.responseText == ({"POWER":"ON"})) {

jQuery Ajax Redirect Form

Uploading photos to Firebase storage using React Native

Spring's MVC framework encountered a 400 Bad Request error when processing an