Using Datatable JS For Showing List/ Table Data With Action (Edit/ Delete) Buttons

Using Datatable JS for showing list/table data with action (Edit/Delete) buttons.

What is DataTable JS?

 

Datatable is a plug-in for the jQuery JavaScript library. It is a highly flexible tool using which we can present our data in a table with features such as pagination, instant search, and multi-column ordering, exporting, etc.

 

In this blog, I am going to demonstrate how to show list data in a table with action (edit and delete) buttons using Datatables JS. Since it will be based on JavaScript, it can be used over multiple platforms like SharePoint Online, Project Online, ASP.NET Applications, and other platforms like Java, PHP, etc. I hope this will be helpful. Let’s get to the topic.

 

Required Libraries

 

First, we need to get the required libraries. We can download these libraries from jQuery CDN, Datatables CDN. To build this, we will be using jQuery 1.12.4 and Datatables 1.10.13. 

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

Markups (HTML)

 

The Datatable plugin uses table to render the array/object. Thus we will be using <table> tag for this. 

<div class="conBox">
    <table id="myTable" width="100%"></table>
</div>

The table should have an ID, so that we can manipulate it with data and the Datatables plugin. Assign a desirable width to the table. It could be done with CSS class as well as table width property that is shown above the snippet.

 

JavaScript Code

 

Dataset

 

We need to prepare the data set for the Datatables as shown below. We have to collect the data from the SP List, Database table, or any other source we are collecting from and keep it in the following JavaScript array format. We can pass this array to Datatables as a dataset or create row dynamically from the array and add it to the table.

 

Here, I am going to use second approach because we have to add action (edit/delete) to each row so that we can perform some action on it. 

// This is the dataset format. you have to collect all your data from db table or sp list
// and then put the collected data in following js array format.
var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "1" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "2" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "3" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "4" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5" ],
    [ "Brielle Williamson", "Integration Specialist", "New York","6" ],
    [ "Herrod Chandler", "Sales Assistant", "San Francisco","7" ],
    [ "Rhona Davidson", "Integration Specialist", "Tokyo","8" ],
    [ "Colleen Hurst", "Javascript Developer", "San Francisco","9" ],
    [ "Sonya Frost", "Software Engineer", "Edinburgh","10" ],
    [ "Jena Gaines", "Office Manager", "London","11" ],
    [ "Quinn Flynn", "Support Lead", "Edinburgh","12" ],
    [ "Charde Marshall", "Regional Director", "San Francisco","13" ],
    [ "Haley Kennedy", "Senior Marketing Designer", "London", "14" ],
    [ "Tatyana Fitzpatrick", "Regional Director", "London","15" ],
    [ "Michael Silva", "Marketing Designer", "London", "16" ],
    [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "17" ]
];

Create rows dynamically for the table

 

Here, I have created a <tbody> element. Loop through the array, created row from the array, and bind it to the table. In this, we can dynamically create our rows for the table from JavaScript array/object.

var tblId = document.getElementById("myTable");
// Create tbody element.
var bodyOfTable = document.createElement("tbody");
// create rows from the array.
var dataRow = '';
$.each(dataSet,function(index,value){
    dataRow += '<tr>'+
            '<td>'+value[0]+'</td>'+
            '<td>'+value[1]+'</td>'+
            '<td>'+value[2]+'</td>'+
            '<td>'+
                '<a href="DatatableJSDemo.html?id='+value[3]+'">Edit</a> | '+
                '<a href="DatatableJSDemo.html?did='+value[3]+'">Delete</a>'+
            '</td>'+
        '</tr>';
});
// bind the rows to the table body.
var addBody = bodyOfTable.innerHTML = dataRow;
// bind the table body to the table.
tblId.innerHTML = addBody;

Render the table

 

So far, all we have is a table with rows, but to get the advantage of Datatables plugin such as pagination, search and others, we need to pass the table id to Datatables.

$(document).ready(function(){
    $('#myTable').DataTable({
        // required for showing number of rows
        "aLengthMenu": [[8, 16, 30, 50, 75, 100, -1], [8, 16, 30, 50, 75, 100, "All"]],
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Action" }
        ],
        // Required for sorting a specific column by it's column index.
        order: [[ 0, 'asc' ]]
    });
});

Here, I have called DataTable() in document.ready() method and passed the table id. Datatable is highly configurable, and these reference can be found in the Datatable doumentation.

 

I hope, this will help you. Please leave a comment if you face any issue in the above procedure.

 

For reference, find the attached zip file. It contains working code including CSS (not mentioned in blog to avoid too much content). In my forthcoming blog, I will describe how to use REST API, JSOM in SharePoint / Project Online and create our BI using JS libraries like ChartJS, Datatables JS. So stay tuned...

 

Happy coding!