Django Pagination Server-Side Menggunakan DataTable

part.md

myapp/views.py

import json

from django.views.generic import View
from django.http import HttpResponse
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.db.models import Q
from django.core.serializers.json import DjangoJSONEncoder

# ================
# Inner app module
# ================
from .models import Invoice
from .models import TransactionDetail 
from .models import InvoiceCategory
from .models import InvoiceStatus


class AjaxInvoiceWebList(View):

	def post(self, request):
		# Ambil semua data invoice yang valid
		invoices = self._datatables(request)
		return HttpResponse(json.dumps(invoices, cls=DjangoJSONEncoder), content_type='application/json')
		
	def _datatables(self, request):
		datatables = request.POST
		# Ambil draw
		draw = int(datatables.get('draw'))
		# Ambil start
		start = int(datatables.get('start'))
		# Ambil length (limit)
		length = int(datatables.get('length'))
		# Ambil data search
		search = datatables.get('search[value]')
		# Set record total
		records_total = Invoice.objects.all().exclude(Q(transactiondetail=None)|Q(shipping=None)|Q(billing=None)).count()
		# Set records filtered
		records_filtered = records_total
		# Ambil semua invoice yang valid
		invoices = Invoice.objects.all().exclude(Q(transactiondetail=None)|Q(shipping=None)|Q(billing=None))

		if search:
			invoices = Invoice.objects.filter(
					Q(invoice_number__icontains=search)|
					Q(user__username__icontains=search)|
					Q(category__info__icontains=search)|
					Q(status__info__icontains=search)
				).exclude(Q(transactiondetail=None)|Q(shipping=None)|Q(billing=None))
			records_total = invoices.count()
			records_filtered = records_total

		# Atur paginator
		paginator = Paginator(invoices, length)

		try:
			object_list = paginator.page(draw).object_list
		except PageNotAnInteger:
			object_list = paginator.page(draw).object_list
		except EmptyPage:
			object_list = paginator.page(paginator.num_pages).object_list


		data = [
			{
				'user': inv.user.username,
				'invoice_number': inv.invoice_number,
				'date_transaction': inv.invoice_date,
				'total_price': inv.total,
				'category': inv.category.info,
				'status': inv.status.info
			} for inv in object_list
		]

		return {
			'draw': draw,
			'recordsTotal': records_total,
			'recordsFiltered': records_filtered,
			'data': data,
		}
		
def invoiceweb_list(request):
    data_context = {}
    return render(request, 
				  'myapp/invoice/invoiceweb_list.html', 
				  data_context)

myapp/urls.py

from django.conf.urls import url
from . import views


urlpatterns = [
	url(r'^invoice/web\.html$', 
		views.invoiceweb_list, 
		name='invoiceweb_list'),
	url(r'^ajax/invoice/web\.html$', 
		views.AjaxInvoiceWebList.as_view(), 
		name='ajax_invoice_web_list'),
]

project/urls.py

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
	# ....
    url(r'^transaction/', include('apltransaction.urls', namespace="apltransaction")),
]

myapp/templates/myapp/invoice/invoiceweb_list.html

{% extends "base.html" %}
{% load staticfiles %}
{% load widget_tweaks %}

{% block title %}Invoice In Web{% endblock %}

{% block heading %}Invoice In Web{% endblock %}

{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'bower_components/datatables/css/dataTables.bootstrap.min.css' %}">
{% endblock %}

{% block content %}
<table id="example" class="display table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>#</th>
            <th>User</th>
            <th>Invoice Number</th>
            <th>Date Transaction</th>
            <th>Total Price</th>
            <th>Category</th>
            <th>Status</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><input type="checkbox" name="checkbox"></th>
            <th>User</th>
            <th>Invoice Number</th>
            <th>Date Transaction</th>
            <th>Total Price</th>
            <th>Category</th>
            <th>Status</th>
        </tr>
    </tfoot>
</table>
{% endblock %}

{% block js %}
<script src="{% static 'bower_components/datatables/js/dataTables.bootstrap.min.js' %}"></script>
<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "url 'apltransaction:ajax_invoice_web_list'",
                "type": "POST"
            },
            "columns": [
                { "data": "user" },
                { "data": "user" },
                { "data": "invoice_number" },
                { "data": "date_transaction" },
                { "data": "total_price" },
                { "data": "category" },
                { "data": "status" }
            ]
        } );
    } );
</script>
{% endblock %}

It works!
🐥

However, it needs improvements