Angular-Datatables with Django rest-framework (Part 1) - AngularJS

Posted by: srinath 7 years, 7 months ago

(Comments)



Who is this tutorial for?

AngularJS is the hottest client-side technology out there. Its cool nifty features coupled with a plethora of pre-built libraries is the reason why. The same goes for Django as a backend and hence more than often we find AngularJS websites backed with Django as the backend.

This tutorial is for such developers who went with the angular-django option and want to implement a datatables plugin with server-side processing (of pagination, sorting, and filtering) with ajax.

NOTE: Also this tutorial assumes you have a basic understanding of AngularJS.



Setting Up

The method we are going to follow uses the following awesome library:
        angular-datatables


Install this using bower with the following command:


$ bower install angular-datatables

or download it manually from Github

Once the package is installed, we add the dependency in the module we are going to use the datatables in as follows:

//Javascript code
angular.module('myModule', ['datatables']);


Note: Also if you aren’t using gulp or grunt don’t forget to include the javascripts and stylesheets as follows:

<!-- HTML Code -->
<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular.min.js"></script> 
<script src="angular-datatables.min.js"></script>
<link rel="stylesheet" href="angular-datatables.css">



Controller

Now we work on our controller, there are multiple ways to do it, we will be using the Angular way, which is the most developer friendly. For other methods refer the angular-datatables documentation

The method we are going to follow is, where we code nothing in the html other than the root <table> element. There are other methods in which you specify the <thead> and columns in html too. But we are not following that method here in this example.

First of all, we inject DTOptionsBuilder and DTColumnBuilder into the controller as follows:

//Javascript Code
angular
    .module('myModule', ['datatables'])
    .controller('myController', myController);

function myController(DTOptionsBuilder, DTColumnBuilder){
}


Now set the Datatable Options and Datatable Columns using the above DTOptionsBuilder and DTColumnBuilder as follows: 

// Javascript Code
angular
    .module('myModule', ['datatables'])
    .controller('myController', myController);

function myController(DTOptionsBuilder, DTColumnBuilder){
    vm = this;

    vm.dtInstance = null; // this will be our variable in angular that is referenced to the datatable created (will be set in html)

    vm.dtOptions = getDtOptions();
    vm.dtColumns = getDtColumns();

    function getDtOptions(){
        var options = DTOptionsBuilder.newOptions();
        return options;
    }

    function getDtColumns(){
        var columns = [];
        return columns;
    }
}


Let's assume the rest api that is going to populate the datatable returns back the data as follows:

// JSON response
{
    'results': [
        {
            'id': 1,
            'name': 'ABC',
            'company': 'XYZ',
            'dept':{
                'id': 1,
                'name': 'Accounts'
            }
        },
        {
            'id': 2,
            'name': 'DEF',
            'company': 'UVW',
            'dept':{
                'id': 2,
                'name': 'IT'
            }
        }
    ]
}


Now to display the details in the datatables, we change the getDtColumns() as follows:

// Javascript Code
function getDtColumns(){
    var columns = [
        DTColumnBuilder.newColumn('name').withTitle('Name'),
        DTColumnBuilder.newColumn('company').withTitle('Company').notSortable(),
        DTColumnBuilder.newColumn('dept.name').withTitle('Department'),
    ];
    return columns;
}

The above code I feel is self explanatory and quite verbose so I am not going into details.

Now we set the options for Datatables for which we edit the getDtOptions() as follows:

// Javascript Code
function getDtOptions(){
    var options = DTOptionsBuilder.newOptions()
    .withOption('ajax', {  // this sets the api location for pulling the data to be populated in datatable
        url: 'your/url/here',
        type: 'GET',
        beforeSend: function (request)
        {
            request.setRequestHeader("<SOMEHEADER>", "<SOMEHEADERVALUE>");  // for setting header for xsrf protection or api key
        },
    })
    .withDataProp('results')  // the array element in the json that is to be populated (in our case 'results')
    .withOption('processing', true) // to set the processing at serverside
    .withOption('serverSide', true); // to set the processing at serverside

    return options;
}

For a detailed documentation of these functions and a full list of options check the official documentation



HTML

As mentioned earlier our HTML code is minimal with just the root <table> as follows:

<!-- HTML Code -->
<table class="dataTable row-border hover order-column" datatable="<SOME_IDENTIFIER>" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" dt-instance="vm.dtInstance"></table>

Yeah for real! That's it!

The attribute dt-instance="vm.dtInstance" is what sets the reference to the table in vm.dtInstance variable in the controller, which was initialized as null previously.



Coming up next

In the next tutorial we will implement sorting and searching capabilities into datatables using django-restframework

Comments

Recent Posts

Archive

2022
2021
2020
2019
2018
2017
2016
2015
2014

Tags

Authors

Feeds

RSS / Atom