DataTable List Group CRUD

by Dominic Myers

HTML

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.0/bootstrap3-typeahead.min.js"></script>
<div 
  class="container">
    <table 
      id="actionTabDataTable" 
      class="table table-striped table-bordered" 
      cellspacing="0" 
      width="100%"></table>
</div>
<!-- Modal -->
<div 
  class="modal fade" 
  id="myModal" 
  tabindex="-1" 
  role="dialog" 
  aria-labelledby="myModalLabel">
    <div 
      class="modal-dialog" 
      role="document">
        <div 
          class="modal-content">
            <div 
              class="modal-header">
                <button 
                  type="button" 
                  class="close" 
                  data-dismiss="modal" 
                  aria-label="Close">
                    <span 
                      aria-hidden="true">
                        &times;
                    </span>
                </button>
                <h4 
                  class="modal-title" 
                  id="myModalLabel">
                    Please tell us about the job 
                    <span 
                      id="name"></span> 
                    has:
                </h4>
            </div>
            <div 
              class="modal-body">
                <form>
                    <div 
                      class="form-group">
                        <label 
                          for="job">
                            Job title
                        </label>
                        <input 
    ...

CSS

.list-group {
    text-align: left;
    margin-bottom:0;
}
.glyphicon {
    padding: 0 0 0 10px;
    cursor: pointer;
    float:right;
}

JavaScript

var data = [{
    "name": "John Smith",
    "jobs": [
        "Bottle Washer",
        "Bus Boy"
    ]
}, {
    "name": "Jane Smith",
    "jobs": [
        "Head Chef",
        "Barmaid"
    ]
}, {
    "name": "Barry Smith"
}];
$(function(){
    var table = $("#actionTabDataTable").DataTable({
        "data": data,
        "columns": [{
            "title": "Name",
            "data": "name"
        }, {
            "title": "Jobs",
            "orderable": false,
            "data": "jobs",
            "render": function(d) {
                if (d) {
                    return $("<ul></ul>", {
                        "class": "list-group"
                    }).append(function() {
                        var lis = [];
                        for (var i = 0; i < d.length; i++) {
                            lis.push($("<li></li>", {
                                "text": d[i],
                                "class": "list-group-item"
                            }).append($("<i></i>", {
                                "class": "glyphicon glyphicon-remove"
                            })).append($("<i></i>", {
                                "class": "glyphicon glyphicon-edit",
                                "data-toggle": "modal",
                                "data-target": "#myModal"
                            })));
                        }
                        return lis;
                    }).prop("outerHTML");
                } else {
                    return "No jobs";
                }
            }
        }, {
            "title": "Action",
            "orderable": false,
            "render": function() {
                return $("<button></button>", {
                    "class": "btn btn-primary",
                    "text": "Add",
                    "data-toggle": "modal",
                    "data-target": "#myModal"
                }).append($("<i></i>", {
                    "class": "glyphicon glyphicon-plus"
               ...