Sort and Search html table's data using DataTable.js in SharePoint

Sort and Search html table's data using DataTable.js

Features of DataTable.js

There are many features and advantage of Datatable.js. You can use it anywhere, using simple jQuery. If you are using DataTable.js, you can apply these features, which are given below.

• Inline Sorting.
• Sorting on each column.
• Pagination.
• Filter.
• Filter on each column.
• Global Search.
• Stylist Look .
• Dynamic column binding.
• Bind Json data.
• Language Independent.

 Step 1. Create a SharePoint Page and add Script Editor Web Part to it.

 Step 2. Paste the following Code and Save the page-

 <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" type="text/css" media="all"/>

<script type="text/javascript">
var listName = "EmployeeList";

$(document).ready(function() {
 GetEmployeeDetails();

} );

function GetEmployeeDetails() { 
        $.ajax({
            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items?$Select=Title,Email,City,Designation,Age",
            type: "GET",
            headers: { "Accept": "application/json;odata=verbose" }, // return data format
            success: function (data) {       

                var table = $("#MyTable");
                var html = "<thead><th>EmployeeName</th><th>Email</th><th>Designation</th><th>Age</th></tr></thead>";                 
    $.each(data.d.results, function (key, value) {
                     html += "<tr><td>" + value.Title + "</td><td>" + value.Email + "</td><td>" + value.Designation + "</td><td>" + value.Age + "</td></tr>";           
       });
                table.html(html);
         
               sortdata();

            },
            error: function (error) {
                alert(JSON.stringify(error));
            }
        }); 
    }

function sortdata()
{

   $('#MyTable').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                //to select and search from grid
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
}
</script>
<table id="MyTable" class="display" cellspacing="0" width="100%">
</table>

<style>
.display{
 width: 100%;
 border-collapse: collapse;
}
.display td, .dataTbl th {
    border: 1px solid #0072c6;
    padding: 8px;
}
.display th {
    color: #fff;
    background-color: rgb(66, 139, 202);
    font-weight: normal;
    padding: 10px;
    font-size:14px;
}

</style>

Step 3. Output-