Python – Django AJAX Pagination with Search and Sort

In this tutorial, we are going to build a simple AJAX Pagination with search and sort using Python with Django framework. This tutorial assumes that you already have an existing Module built using the latest Django framework. What you see in the above picture is exactly what we are going to build out. So let’s get started.

Requirements :

  1. Download and install the latest version of python (version 3+) from here: https://www.python.org/downloads/
    • For Mac users: Python version 2.7+ is installed by default, so to use python version 3, you will have to use these commands:
      • python3 <command>
      • pip3 <command>
  2. Install django using pip:

Integrating the AJAX Pagination with Search and Sort :

Create the base template mymodule/templates/mymodule/base.html with the following contents:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MyDjangoApp</title>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  	<link rel="stylesheet" href="{% static 'ecommerce/css/styles.css' %}" />
</head>
<body class="override">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/mymodule/">Django Pagination</a>
            </div>
        </div>
    </nav>
    
    <div class="container">
        <div class="row">
            {% block content %}{% endblock %}
        </div>
    </div>
  	<script src="{% static 'mymodule/js/app.js' %}"></script>
</body>
</html>

Then create the products template: mymodule/templates/mymodule/products.html and include the code bellow:

{% extends "mymodule/base.html" %}
 
{% block content %}
	<div class="container products-view-user">
		{% csrf_token %}
		<form class = "post-list">
			<input type = "hidden" value = "" />
		</form>
		
		<article class="navbar-form navbar-left p-0 m-0 ml-b">
			<div class="form-group">
				<label>Per Page: </label>
				<select class="form-control post_max">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>
				<label>Search Keyword: </label>
				<input type="text" class="form-control post_search_text" placeholder="Enter a keyword">
			</div>
			<input type = "submit" value = "Filter" class = "btn btn-primary post_search_submit" />
		</article>
		
		<a href="user-products-add.php" class="btn btn-success pull-right">Add New</a>
		
		<br class = "clear" />
		
		<div class = "wave-box-wrapper">
			<div class = "wave-box"></div>
			<table class = "table table-striped table-post-list no-margin">
				<thead>
					<tr>
						<th>Image</th>
						<th id = "name" class = "active"><a href = "#">Name</a></th>
						<th id = "price"><a href = "#">Price</a></th>
						<th id = "status"><a href = "#">Status</a></th>
						<th id = "date"><a href = "#">Date</a></th>
						<th id = "quantity"><a href = "#">Quantity</a></th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody class = "pagination-container"></tbody>
			</table>
			
			<div class = "pagination-nav"></div>
		</div>
	</div>
{% endblock %}

Create the controller that will handle both GET and POST methods to the products page. The code bellow goes to your mymodule/views.py ….

Click here to download the FULL tutorial

 

 



Do you need help with a project? or have a new project in mind that you need help with?

Contact Me