DataTables.Net

using DataTables.Net

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<div id="exampleDiv">hello</div>
<button id="btn">Load table two</button>
<table width="100%" class="display" id="example">
  <thead>
    <tr>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
    </tr>
  </thead>

</table>

CSS

body {
  font-family: "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

JavaScript

$(document).ready(function() {
  var arr = [];
  for (var i = 0; i < 25; i++) {
    var item = {};
    item["c1"] = "a" + i;
    item["c2"] = "b" + i;
    item["c3"] = i;
    arr.push(item);
  };

  var dataSet = arr;
  console.log(dataSet);
  $('#example').DataTable({
    "bProcessing": true,
    "data": dataSet, // <-- your array of objects
    "columns": 
    	[
    		{"data": "c1"}, // <-- which values to use inside object
      	{"data": "c2"},
        {"data": "c3"}
    	]
  });
});