JSFiddle - React, Tailwind, and code Playground

by Hao Wu

HTML

<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script src="https://github.com/markcell/jquery-tabledit/raw/master/jquery.tabledit.min.js"></script>
<script src="https://github.com/jakerella/jquery-mockjax/raw/master/dist/jquery.mockjax.min.js"></script>
表1
<table id="attendReport" class="table table-striped">
    <thead>
        <tr>
            <th>人員姓名</th>
            <th>身分證統一編號</th>
            <th>日期時間</th>
            <th>簽到退</th>
        </tr>
    </thead>
</table>

<hr />
表2
<table id="myEngTable" class="table table-striped">
    <thead>
        <tr>
            <th>Idno</th>
            <th>Name</th>
            <th>Time</th>
            <th>AttendType</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>G333222111</td>
            <td>Hao</td>
            <td>104-01-01</td>
            <td>簽到</td>
        </tr>
    </tbody>
</table>

JavaScript

$.mockjax({
  url: "Report",
  contentType: "application/json",
  responseText: {	"draw": 1,
    "recordsTotal": 24,
    "recordsFiltered": 24,
	"data":[
		{"idno":"Z000000000","name":"測先生","datetime":"2015-04-27 23:14:49","io":"簽到"}
        ]
                }
});

$(document).ready(function() {
    $('#attendReport').dataTable({
                               
        'ajax': function (data, callback, settings) {
            callback(
              JSON.parse( localStorage.getItem('dataTablesData') )
            );
        },
        "columns": [
            {'data': 'idno'},
            {'data': 'name'},
            {'data': 'datetime'},
            {'data': 'io'}
        ]
    });

    $('#attendReport').Tabledit({
        url: 'example.php',
        columns: {
            identifier: [0, '人員姓名'],
            editable: [[2, 'time'], [3, 'type']]
        }
    });
    
    $('#myEngTable').dataTable({
    });
    
    $('#myEngTable').Tabledit({
        url: 'example.php',
        columns: {
            identifier: [0, 'Idno'],
            editable: [[2, 'Time'], [3, 'AttendType']]
        }
    });
});