Daj Się Poznać - Attendees

by gutek

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap4.min.js"></script>
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
  <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
 <a class="navbar-brand" href="#">Daj Się Poznać</a>
  <div id="navbar">
    <form class="pull-xs-right">
      <input type="text" class="form-control" id="search" placeholder="Search...">
    </form>
  </div>
</nav>

<div class="container">
  <table id="example" class="table table-striped table-bordered">
  <thead>
    <tr style="display: none"><th></th></tr>
  </thead>
  </table>
</div>

CSS

.navbar-fixed-top {
  border: 0;
}

.form-control {
  width: 300px;
}

.container {
  margin-top: 70px;
}

JavaScript

if (!String.prototype.format) {
  String.prototype.format = function () {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function (match, number) {
      return typeof args[number] != 'undefined'
        ? args[number]
      : match
      ;
    });
  };
}
$('#search').keyup(function (evt) {
  var text = this.value;
  $('#example').DataTable().search(text).draw();
});

$('#example').DataTable( {
	dom:"",
	paging: false,
  searching: true,
  info: false,
  ordering: false,
  ajax: {
        url: 'https://raw.githubusercontent.com/Gutek/dsp2106/master/src/attendees.json',
        dataSrc: ''
  },
  columns: [
    { 
    	data: 'FirstName',
      render: function (data, type, full, meta) {
      	var header = '<h4><span class="dsp_first_name">{0}</span> <span class="dsp_last_name">{1}</span> - <i><span class="dsp_prj_name">{2}</span></i> (<span class="dsp_tech">{3}</span>)</h4>'.format(full.FirstName, full.LastName, full.Project, full.Technologies.join(', '));
        var body = '<p><span class="dsp_prj_desc">{0}</span></p><p><strong>Blog</strong>: <a href="{1}" target="_blank" class="dsp_blog_url">{1}</a> | <strong>Kod</strong>: <a href="{2}" target="_blank" class="dsp_src_url">{2}</a></p>'.format(full.Description, full.Blog, full.Source);
        
        return header + body;
      }
		}
  ]
} );