DataTables test

by Jennifer Lyon

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <!--<div class="col-md-12">
      <button class="btn btn-info" id="myTaskList" name="myTaskList" onclick="showTaskList()">
        My Task List
      </button>
    </div>-->
  </div>
  <div class="row" style="margin-top:2em">
    <div class="col-md-10" id="myTaskListTable">
      <table class="table display" id="example">
        <thead>
          <tr>
            <th></th>
            <th>Order Number</th>
            <th>Order Type</th>
            <th>Year</th>
            <th>Account</th>
            <th>Ordered ($)</th>
            <th>Closed ($)</th>
            <th>Buyer</th>
            <th>Delivered</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>2000</td>
            <td>abcde</td>
            <td>100</td>
            <td>50</td>
            <td>John Doe</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td></td>
            <td>bbbbb</td>
            <td>bbbbb</td>
            <td>2001</td>
            <td>abcde</td>
            <td>50</td>
           ...

JavaScript

function showTaskList() {
  $('#myTaskListTable').show();
}

function format(d) {
  return '<table class="table">' +
    '<tr>' +
    '<td>Buyer</td>' +
    '<td>' + d.buyer + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Delivered</td>' +
    '<td>' + d.delivered + '</td>' +
    '</tr>' +
    '</table>';
}

$(document).ready(function() {
  var table = $('#example').DataTable({
    "responsive": true,
    "columns": [{
      'className': '',
      'orderable': false,
      'data': null,
      'visible': true,
      'defaultContent': ''
    }, {
      'data': 'docNum'
    }, {
      'data': 'docType'
    }, {
      'data': 'year'
    }, {
      'data': 'account'
    }, {
      'data': 'ordered'
    }, {
      'data': 'closed'
    }, {
      'data': 'buyer',
      'visible': false
    }, {
      'data': 'delivered',
      'visible': false
    }]
  });

  $('#example tbody').on('click', 'td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    if (row.child.isShown()) {
      row.child.hide();
      tr.removeClass('shown');
    } else {
      row.child(format(row.data())).show();
      tr.addClass('shown');
    }

  });
});