listadmin.php
<script>
$(function () {
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"responsive": true,
"autoWidth": false
});
});
</script>
<script type="text/javascript">
$(document).ready(function (){
$(".open_modal").click(function (e){
var m = $(this).attr("username");
$.ajax({
url: "user_edit.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show',{backdrop: 'true'});
}
});
});
});
$(document).ready(function (){
$(".open_delete").click(function (e){
var m = $(this).attr("username");
$.ajax({
url: "user_delete.php",
type: "GET",
data : {username: m,},
success: function (ajaxData){
$("#ModalDelete").html(ajaxData);
$("#ModalDelete").modal('show',{backdrop: 'true'});
}
});
});
});
$(document).ready(function() {
$('#form-save')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitButtons: 'button[type="submit"]',
fields: {
username: {
message: 'Username tidak valid',
validators: {
notEmpty: {
message: 'Username tidak boleh kosong'
},
stringLength: {
min: 5,
max: 30,
message: 'Panjang minimal 5 karakter dan panjang maksismu 30 karakter'
}
}
},
nama_lengkap: {
message: 'Nama Lengkap tidak valid',
validators: {
notEmpty: {
message: 'Nama Lengkap tidak boleh kosong'
},
stringLength: {
max: 50,
message: 'Panjang maksimal 50 karakter'
}
}
},
password: {
message: 'Password tidak valid',
validators: {
notEmpty: {
message: 'Password tidak boleh kosong'
}
}
},
level: {
message: 'Level tidak valid',
validators: {
notEmpty: {
message: 'Level belum dipilih'
}
}
},
}
});
});
</script><!DOCTYPE html>
<html>
<head>
<title>List Admin</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="assets/plugins/datatables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="assets/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="assets/dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="content">
<div class="row">
<div class="col-xs-12">
<!-- /.box -->
<div class="box">
<div class="box-header">
<h3 class="box-title">List User</h3>
</div>
<div class="box-body">
<a href="#" data-toggle="modal" data-target="#tambah" class="btn btn-info"><i class="glyphicon glyphicon-plus"></i> Tambah User</a>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Nomor</th>
<th>Username</th>
<th>Nama Lengkap</th>
<th>Password</th>
<th>Level</th>
<th>Action</th>
</tr>
</thead>
<?php
include "connection.php";
$query_mysql = mysqli_query($connection,"SELECT * FROM master_user where status='0'")or die(mysqli_error());
$nomor = 1;
while($data = mysqli_fetch_array($query_mysql)){
?>
<tbody>
<tr>
<td><?php echo $nomor++; ?></td>
<td><?php echo $data['username']; ?></td>
<td><?php echo $data['nama_lengkap']; ?></td>
<td><?php echo $data['password']; ?></td>
<td><?php echo $data['level']; ?></td>
<td>
<a href="#" class='btn btn-primary open_modal' username='<?php echo $data['username']; ?>'><span class="glyphicon glyphicon-pencil" style="padding-right: 2px"></span>Edit</a> |
<a href="#" class='btn btn-danger open_delete' username='<?php echo $data['username']; ?>'><span class="glyphicon glyphicon-trash" style="padding-right: 2px"></span>Hapus</a>
</td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
</div>
</div>
</div>
</section>
<div class="example-modal">
<div class="modal fade" id="tambah" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">Tambah User</h4>
</div>
<div class="modal-body form">
<form action="user_save.php" id="form-save" class="form-horizontal" method="POST">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username</label>
<div class="col-md-9">
<input name="username" placeholder="Username" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Nama Lengkap</label>
<div class="col-md-9">
<input name="nama_lengkap" placeholder="Nama Lengkap" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password</label>
<div class="col-md-9">
<input name="password" placeholder="Password" class="form-control" type="password">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Level</label>
<div class="col-md-9">
<select name="level" class="form-control">
<option value="">--Select--</option>
<option value="1">Owner</option>
<option value="2">Manajer</option>
<option value="3">Bendahara</option>
<option value="4">Administrator</option>
</select>
<span class="help-block"></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" name="submit"><span class="glyphicon glyphicon-floppy-saved" style="padding-right: 2px"></span>Simpan</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-remove" style="padding-right: 2px"></span>Batal</button>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<!-- UNTUK EDIT DAN HAPUS -->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<div id="ModalDelete" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
<!-- jQuery 2.2.3 -->
<script src="assets/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="assets/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="assets/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="assets/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="assets/dist/js/demo.js"></script>
<!-- page script -->
</body>
</html>
user_save.php
<?php
if(isset($_POST['username']) && isset($_POST['password']) && isset($_POST['nama_lengkap']) && isset($_POST['level']))
{
include ("connection.php");
//ambil data
$username = $_POST['username'];
$nama_lengkap = $_POST['nama_lengkap'];
$password = $_POST['password'];
$level = $_POST['level'];
$query = "insert into master_user (username, password, level, nama_lengkap, status) values ('$username', md5('$password'),'$level', '$nama_lengkap', '0')";
if (!$result = mysqli_query($connection, $query)) {
exit(mysqli_error($connection));
}
header('location:listadmin.php');
}
?>
答案 0 :(得分：0)
DataTable文档有一个如何创建模态编辑器的示例。如果你不知道自己在做什么，我建议尽量密切关注他们的例子。
（https://editor.datatables.net/examples/bubble-editing/simple.html）