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

$(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');
});

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

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

	/* 新規作成 */
	$('.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;
	});

	/* ダウンロードなどのボタンを描画します */
	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());
		});
	});

	/* ログインチェック */
	isSignin();

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

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