First off i wanted to mention that this is in no way the only or even best way to perform the task of creating a multi parameter search form with pagination. Django has its built in libraries and ways of doing this but my need for customization sparked form the desire to build without ANY limitations and to make this data available via API calls so i can use in the front end of my choosing such as React or angular.
So without further ado let me describe what i set out to accomplish.
I wanted to build something that would require minimum work in the template and view. My software needed required many searchable tables and i didn’t want to have the complex functionality in the template where it can get messy and i would have to rebuild each time.
How to use in our Template
Lets start with the template. In our sample project all we need is a Form, a Table with only the header rows and columns and a Empty Div which will be populated with ajax calls like the rows in our empty table.
We will be using Jquery so dont forget to past in the ajax script if you are following step by step. Here is what our code looks like so far.
- page number variable
- Load Customers Function
- Call the load customer function on original load.
- Load Pages function
- page Click function
- Form submission event
These six components will give us the searchable pagination affect i set out to build.
Lets start with loading in data when the page is first loaded.
Our function takes an input of data but will not be required until we click on a page to load or submit a form. We do want this call to load only the first page an not all data on first load so on line 46 we pass in our page variable in our get request.
In our “response” we will get a list of serialized customers which you can access by using “response.customers” and a list of pages which will include the appropriate pages to display along with “First”,”Pev”, “Next” and “Last” optoions for easier navigation.
We will append the customers to our table and call the loadPagiantion function wich we will get to next.
Lastly this function gets called on line 76 with “window.onload”
In our loadCustomers function we passed in a list of pages to our loadPaginatin function. This list contains page objects with the attributes of “Name” & “Value”. So in our function we just loop through this list and pappend them as buttons to the empty div we build for pagination. I will explain what the “pageClick” function is next.
The pageClick function simple sets the value of our page value to the value of the page that was clicked. Then it grabs any data from our form and calls the loadCustomers function to load in new data.
No that we have loaded in data and pagination lets give our form some functionality. On form submission we simply pass in any form data into the loadCustomer data wich will load data limited to what we provided in the form.
Any time we add search parameters we will always want to reset the page varible to one to give us a fresh set of data. Forgeting this step will load our data but may not allow us to read it propely if the previouse value we set at a number that may be out of range.
Our View & URL Paths
In our view we simply call the getCustomers() function that we built/will build. This function takes in two arguments. First we need a the serializer relevant to the set of data we want returned and then we want to turn this get request into a python dictionary and pass it in as kwargs so we so we are not limited not required to send data we do not which to provide.
Dynamic Search /Paginate Queryset
This next piece we will build in its own file called paginated_querys.py. We want to build universal pagination and filters that will work on any dataset. The only things we will have to build each time we want to add this filter/pagination to our project is a custom function.
I wont go into explaining this part so i will just provide images.