Jquery Datatable Simple Initialization

Here is the require CSS and Javascript that you need to put in header of HTML to acquire functionality of DataTable JS

/******Script Require ****/

<script src="../../DT/jquery.js" type="text/javascript"></script>
<script src="../../DT/jquery.dataTables.js" type="text/javascript"></script>
<script src="../../Script.js" type="text/javascript"></script>


@* Datatable Css *@
 <link href="../../DT/demo_table.css" rel="stylesheet" type="text/css" />
 <link href="../../DT/demo_page.css" rel="stylesheet" type="text/css" />

You need to write following script to initialize data table.

 $(document).ready(function () {

var myURL = "/List";
                    $.ajax({
                        type: 'POST',
                        url: myURL,
                        contentType: 'application/json; charset=UTF-8',
                        dataType: 'json',
                        beforeSend: function () {
                        },
                        success: function (data) {
                              var objlist = JSON.parse(data);
                            if (objlist.toString() != '') {
                                rwAll = CreateDynamicTable(objlist);
                                //Create HTML Table in  DIV
                                $("#bind").html(rwAll);

                                $('#example').dataTable({
                                    "sPaginationType": "full_numbers",
                                    "fnDrawCallback": function () {
                                        oTable = $('#example').dataTable();
                                    },
                                    "fnStateLoaded": function (oSettings, oData) {

                                    },
                                    "fnInitComplete": function (oSettings, json) {
                                    },
                                });

                            }
                            else {
                                //if no data
                            }
                        },
                        error: function (result) {
                            alert('Please try after some time !');
                        }
                    }).always(function () {

                    });
    });
------------------------------------------

function CreateDynamicTable(objArray) {
    //var array = JSON.parse(objArray);
    var array = objArray;
    var str = '<table class="display" cellpadding="0" cellspacing="0" border="0" id="example">';
    str += '<thead><tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr></thead>';
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="gradeA">' : '<tr class="gradeA">';
        for (var index in array[i]) {
            if (index == "Date") {

                str += '<td>' + array[i][index] + '</td>';
            }
            else {
                str += '<td>' + array[i][index] + '</td>';
            }
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '<tfoot><tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr></tfoot>';
    str += '</table>';
    return str;
}