DataTables Example

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link data-require="datatables@*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
   
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="table table-striped table-bordered" id="example">
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
          <th>User Name</th>
          <th>EMail</th>
          <th>Phone</th>
          <th>Website</th>
        </tr>
      </thead>
    </table>
  </body>

</html>

        $(document)
            .ready(function() {
                $.ajax({
                    url: 'https://jsonplaceholder.typicode.com/users',
                    method: 'get',
                    dataType: 'json',
                    success: function(data) {
                        var exampleTable = $('#example')
                            .DataTable({
                                data: data,
                                'aaSorting': [[1, 'asc']],
                                dom: "<'row'<'col-md-6 text-left'T><'col-md-6 text-right'f>>" +
                                    "<'row'<'col-md-12't>>" +
                                    "<'row'<'col-md-6'i><'col-md-6'p>>",
                                'columnDefs': [
                                    { 'width': '25px', 'targets': [0] },
                                    { 'sortable': false, 'targets': [0] }
                                ],
                                'columns': [
                                    {
                                        'data': 'id',
                                        'render': function(data, type, full, meta) {
                                            return '<button class="btn btn-primary btn-xs" id="btnOne"><i class="fa fa-edit"></i></button>';
                                        }
                                    },
                                    { 'data': 'name' },
                                    { 'data': 'username' },
                                    {
                                        //'data': 'email',
                                        'render': function(data, type, full, meta) {
                                            return '<a href="mailto:' + full.email + '?">E-Mail</a>';
                                        }
                                    },
                                    { 'data': 'phone' },
                                    {
                                        //'data': 'email',
                                        'render': function(data, type, full, meta) {
                                            return '<a href="http://' + full.website + '"target=_blank">Website</a>';
                                        }
                                    },
                                ]
                            });
                    }
                });
            });

/* Put your css in here */

h1 {
  color: red;
}