Skip to content

Instantly share code, notes, and snippets.

@kidino

kidino/teacher.html

Created April 19, 2019 03:00
Show Gist options
  • Save kidino/ab8e818cff2ac39ef66c524d2643bcf7 to your computer and use it in GitHub Desktop.
Save kidino/ab8e818cff2ac39ef66c524d2643bcf7 to your computer and use it in GitHub Desktop.
Download ZIP
Teacher Fusio Table
Raw
teacher.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Teacher</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/fusioTable.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 30px;">
<div class="col">
<button type="button" class="btn btn-secondary float-right">LOGOUT</button>
<h2>Teachers</h2>
</div>
</div>
<div class="row">
<div class="col">
<div id="fusio-table-wrapper"></div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="formal_title" class="col-sm-3 col-form-label">Salutation</label>
<div class="col-sm-9">
<select class="form-control form-control-md">
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss</option>
<option>Dr.</option>
<option>Ms.</option>
<option>Prof.</option>
<option>Rev.</option>
<option>Lady</option>
<option>Sir</option>
<option>Capt.</option>
<option>Major</option>
<option>Lt.-Col.</option>
<option>Col.</option>
<option>Lady</option>
<option>Lt.-Cmdr.</option>
<option>The Hon.</option>
<option>Cmdr.</option>
<option>Flt. Lt.</option>
<option>Brgdr.</option>
<option>Judge</option>
<option>Lord</option>
<option>The Hon. Mrs</option>
<option>Wng. Cmdr.</option>
<option>Group Capt.</option>
<option>Rt. Hon. Lord</option>
<option>Revd. Father</option>
<option>Revd Canon</option>
<option>Maj.-Gen.</option>
<option>Air Cdre.</option>
<option>Viscount</option>
<option>Dame</option>
<option>Rear Admrl.</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="name_first" class="col-sm-3 col-form-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name_first" placeholder="First Name">
</div>
</div>
<div class="form-group row">
<label for="name_last" class="col-sm-3 col-form-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name_last" placeholder="First Name">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="staticEmail" value="email@example.com">
</div>
</div>
</form> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#fusio-table-wrapper').fusioTable({
url : 'http://api.mylocal.test/school/teacher_a',
count : 10, // default 10
startIndex : 0, // default 0
columns : [ // default [] -- empty array
{ label : 'ID', name : 'teacher_id', sortable : true },
{ label : 'Salutation', name : 'formal_title', sortable : true },
{ label : 'First Name', name : 'name_first', sortable : true },
{ label : 'Last Name', name : 'name_last', sortable : true },
{ label : 'Email', name : 'email_address', sortable : true },
{ label : 'Action', // to add custom columns
custom: function(cols) {
if (cols == null) return;
return "<button data-id='"+cols.teacher_id+"' class='btn btn-sm btn-warning edit-teacher'>EDIT</button> "
+ "<button data-id='"+cols.teacher_id+"' class='btn btn-sm btn-danger delete-teacher'>DELETE</button>";
}
}
]
});
// sample for assigning event triggers to your buttons in custom column
$('#fusio-table-wrapper').on('click','.edit-teacher', function(){
var teacher_id = $(this).attr('data-id');
$('#exampleModal').modal('show');
console.log('edit teacher '+teacher_id);
});
$('#fusio-table-wrapper').on('click','.delete-teacher', function(){
var teacher_id = $(this).attr('data-id');
console.log('delete teacher '+teacher_id);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment