Datatable inline editing without editor plugin (Squeaky small)

http://stackoverflow.com/questions/31856961/datatable-inline-editing-without-editor-plugin

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>
<div class="container">
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Brielle Williamson</td>
       ...

CSS

#example_filter .form-control {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="spyglass" viewBox="0 0 22 22" height="22" width="22"><path d="m 10.011718,5.0898489 c -2.7000005,0 -4.9003915,2.2004 -4.9003915,4.9003996 0,2.6999995 2.200391,4.8983995 4.9003915,4.8983995 1.154374,0 2.204251,-0.4184 3.042969,-1.0898 l 3.207031,3.1113 0.626953,-0.6465 -3.185547,-3.0879 c 0.743242,-0.8594 1.208984,-1.964 1.208984,-3.1854995 0,-2.6999996 -2.20039,-4.9003996 -4.90039,-4.9003996 z m 0,1 c 2.2,0 3.90039,1.7004 3.90039,3.9003996 0,2.1999995 -1.70039,3.8983995 -3.90039,3.8983995 -2.2000005,0 -3.9003915,-1.6984 -3.9003915,-3.8983995 0,-2.1999996 1.700391,-3.9003996 3.9003915,-3.9003996 z" style="fill:#808080"/></svg>');
        background-repeat: no-repeat;
        background-color: #fff;
        background-position: 0px 3px !important;
        padding-left: 22px;
    }

JavaScript

var Positions = [],
    Locations = [],
    table = $('#example').DataTable({
        columnDefs: [{
            targets: [0],
            visible: false
        }, {
            targets: [2],
            "className": "position"
        }, {
            targets: [3],
            "className": "location"
        }],
        initComplete: function() {
            this.api().column(2).data().unique().sort().each(function(d, j) {
                Positions.push(d);
            });
            this.api().column(3).data().unique().sort().each(function(d, j) {
                Locations.push(d);
            });
        }
    });

$('#example tbody').on('click', '.position', function() {
    if (!$('#example').hasClass("editing")) {
        $('#example').addClass("editing");
        var thisCell = table.cell(this);
        thisCell.data($("<select></select>", {
            "class": "changePosition"
        }).append(Positions.map(v => $("<option></option>", {
            "text": v,
            "value": v,
            "selected": (v === thisCell.data())
        }))).prop("outerHTML"));
    }
});
$('#example tbody').on('click', '.location', function() {
    if (!$('#example').hasClass("editing")) {
        $('#example').addClass("editing");
        var thisCell = table.cell(this);
        thisCell.data($("<select></select>", {
            "class": "changeLocation"
        }).append(Locations.map(v => $("<option></option>", {
            "text": v,
            "value": v,
            "selected": (v === thisCell.data())
        }))).prop("outerHTML"));
    }
});
$('#example tbody').on("change", ".changePosition", () => {
    table.cell($(".changePosition").parents('td')).data($(".changePosition").val());
    $('#example').removeClass("editing");
});
$('#example tbody').on("change", ".changeLocation", () => {
    table.cell($(".changeLocation").parents('td')).data($(".changeLocation").val());
    $('#example').removeClass("editing");
});