魁！小野の塾　小さな管理機能を作ってみようの巻　第３２話

[javascript highlight=””] $(function(){
/* ログインチェック */
isSignin();

/* Users.phpを実行するためにprocessにはUsersを指定します */
$process(‘Users’);

var table = $(‘#users’).DataTable({
ajax: {
url: ‘./api/’,
type: ‘POST’,
data: {‘process’: ‘Users’, ‘method’: ‘list’}, // Users.phpのlistを呼び出します
dataSrc: ‘list.rs’ // 戻り値のjsonからlist.rs部分がデータの対象として設定します
},
columnDefs: [{
targets : 5,
data: null,
defaultContent: [
‘<button class="btn btn-primary btn-sm me-3 act-update"><i class="fas fa-edit"></i> 編集</button>’,
‘<button class="btn btn-outline-danger btn-sm act-delete" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="far fa-trash-alt"></i> 削除</button>’
].join(”)
}],
columns: [
{data: "user_id"},
{data: "name"},
{data: "mail"},
{data: "tel"},
{data: "dept_name"}
],
dom: ‘Btp’,
buttons: [
{
extend: ‘copy’,
text: ‘<i class="fas fa-clipboard"></i> Copy’
},
{
extend: ‘csv’,
text: ‘<i class="fas fa-file-alt"></i> Csv’
},
{
extend: ‘excel’,
text: ‘<i class="fas fa-file-excel"></i> Excel’
},
{
extend: ‘pdfHtml5’,
text: ‘<i class="fas fa-file-pdf"></i> PDF’,
customize: function(doc){
doc.defaultStyle.font= ‘GenShin’;
}
}
] });
table.buttons().container().appendTo(‘.buttons’);
});
[/javascript]

[javascript highlight=”4-8″] /* Users.phpを実行するためにprocessにはUsersを指定します */
$process(‘Users’);

/* 新規作成 */
$(‘.btn-success’).on(‘click’, function(){
/* そのまま編集画面へ遷移します */
location.href = ‘usersEdit.html’;
});
[/javascript]

[javascript highlight=”7-17″] /* 新規作成 */
$(‘.btn-success’).on(‘click’, function(){
/* そのまま編集画面へ遷移します */
location.href = ‘usersEdit.html’;
});

/* 削除実行 */
$(‘.act-exec-delete’).on(‘click’, function(e){
/* Users.php#deleteを呼び出します */
$method(‘delete’);
/* Validationチェックは行わないで、非同期通信します */
$xhrNoValidate([{name: ‘user_id’, value: $(‘.act-exec-delete’).data(‘id’)}], function(data, status, xhr){
location.href = ‘users.html’;
});
/* ボタン押下時のイベントを通知しない為、falseを返します */
return false;
});
[/javascript]

[javascript highlight=”3-20″] /* ダウンロードなどのボタンを描画します */
table.buttons().container().appendTo(‘.buttons’);
/* Datatablesのデータ部分の描画終了時に、コールバックされます */
table.on(‘draw’, function(){
/* 更新 */
$(‘.act-update’).on(‘click’, function(e){
var tr = $(this).closest(‘tr’);
/* localStorageにuser_idをセットします */
localStorage.setItem(‘user_id’, $(‘td:first’, tr).text());
/* 編集画面へ遷移 */
location.href = ‘usersEdit.html’;
});

/* 削除確認 */
$(‘.act-delete’).on(‘click’, function(e){
var tr = $(this).closest(‘tr’);
/* モーダルを表示する際に削除するidをモーダル側へ設定します */
$(‘.act-exec-delete’).data(‘id’, $(‘td:first’, tr).text());
});
});
[/javascript]

[javascript highlight=”4-5″] /* ログインチェック */
isSignin();

/* 連携用ID削除 */
localStorage.removeItem(‘user_id’);

/* Users.phpを実行するためにprocessにはUsersを指定します */
$process(‘Users’);

[/javascript]