Javascript Snippest

datatables-serversided-php.php

<!-- /* -------------------------------------------------------------------------- */
     /*                                  BASIC USE                                 */
     /* -------------------------------------------------------------------------- */ -->
<script>
    // siapkan data buat dikirim ke server
    var oke = 'oke';
    // Tabel HealthReport
    table = $('#report_healthCheckIn').DataTable({
        responsive: true,
        processing: true,
        language : { processing: '<div class="spinner-grow text-primary" role="status"><span class="sr-only">Loading...</span></div>'},
        pagingType: 'full_numbers',
        // serverSide: true,
        dom: 'Bfrtip',
        // custom length menu
        lengthMenu: [
            [ 10, 25, 50, 100, -1 ],
            [ '10 Rows', '25 Rows', '50 Rows', '100 Rows', 'All' ]
        ],
        // buttons
        buttons: [
            'pageLength', // place custom length menu when add buttons
            {
                extend: 'excel',
                text: '<i class="fas fa-file-excel" aria-hidden="true"></i> Export to EXCEL',
                title: '',
                filename: 'Health Report-<?= date("dmo-Hi"); ?>',
                exportOptions: {
                    modifier: {
                        //Datatables Core
                        order: 'index',
                        page: 'all',
                        search: 'none'
                    }
                    // ,columns: [0,1,2,3,4]
                }
            },
            {
                extend: 'csv',
                text: '<i class="fas fa-file-csv" aria-hidden="true"></i> Export to CSV',
                title: '',
                filename: 'Health Report-<?= date("dmo-Hi"); ?>',
                exportOptions: {
                    modifier: {
                        //Datatables Core
                        order: 'index',
                        page: 'all',
                        search: 'none'
                    }
                    // ,columns: [0,1,2,3,4]
                }
            }
        ],
        ajax: {
            url: '<?= base_url('healthReport/ajax_getReportData'); ?>',
            type: 'POST',
            data: function(data) {
                data.oke = oke // kirim data ke server
            }
        },
        columns: [
            {data: 'date'},
            {data: 'emp_name'},
            {data: 'detail_position.departement'},
            {data: 'detail_position.divisi'},
            {
                // classNmae: "",
                data: 'status',
                render: (data, type) => {
                    if(type === 'display'){
                        var status = '';
                        var cssClass = '';

                        switch(data) {
                            case '0':
                                status = 'Sick';
                                cssClass = 'text-danger';
                                break;
                            case '1':
                                status = "Healthy";
                                cssClass = 'text-success';
                                break;
                        }
                        return '<p class="m-0 font-weight-bold text-center '+cssClass+'">'+status+'</p>';
                    }
                    return data;
                }
            },
            {data: 'sickness'},
            {data: 'notes'}
        ]
        // ajax: '<?= base_url('healthReport/ajax_getReportData'); ?>'
    });

    $('#adsa').on('click', () => {
        table.ajax.reload(); // reload table
    });
</script>



<!-- /* -------------------------------------------------------------------------- */
     /*                                The next step                               */
     /* -------------------------------------------------------------------------- */ -->
<script>
    // Tabel HealthReport
    var table = $('#report_healthCheckIn').DataTable({
        responsive: true,
        processing: true,
        language : { 
            processing: '<div class="spinner-grow text-primary" role="status"><span class="sr-only">Loading...</span></div>',
            zeroRecords: '<p class="m-0 text-danger font-weight-bold">No Data.</p>'
        },
        pagingType: 'full_numbers',
        // serverSide: true,
        dom: 'Bfrtip',
        // custom length menu
        lengthMenu: [
            [ 10, 25, 50, 100, -1 ],
            [ '10 Rows', '25 Rows', '50 Rows', '100 Rows', 'All' ]
        ],
        // buttons
        buttons: [
            'pageLength', // place custom length menu when add buttons
            {
                extend: 'excel',
                text: '<i class="fas fa-file-excel" aria-hidden="true"></i> Export to EXCEL',
                title: '',
                filename: 'Health Report-<?= date("dmo-Hi"); ?>',
                exportOptions: {
                    modifier: {
                        //Datatables Core
                        order: 'index',
                        page: 'all',
                        search: 'none'
                    }
                    // ,columns: [0,1,2,3,4]
                }
            },
            {
                extend: 'csv',
                text: '<i class="fas fa-file-csv" aria-hidden="true"></i> Export to CSV',
                title: '',
                filename: 'Health Report-<?= date("dmo-Hi"); ?>',
                exportOptions: {
                    modifier: {
                        //Datatables Core
                        order: 'index',
                        page: 'all',
                        search: 'none'
                    }
                    // ,columns: [0,1,2,3,4]
                }
            }
        ],
        ajax: {
            url: '<?= base_url('healthReport/ajax_getReportData'); ?>',
            type: 'POST',
            data: function(data) {
                // kirim data ke server
                data.divisi = $('#divisi').val(),
                data.departemen = $('#departement').val(),
                data.daterange = $('input[name="daterange"]').val();
            },
            complete: (data) => { // run function when ajax complete
                table.columns.adjust();

                // // place to chart data variable
                // statushealth_chartData[0] = data.responseJSON.counter_sakit;
                // statushealth_chartData[1] = data.responseJSON.counter_sehat;

                // $.each( data.responseJSON.counter_kategori, function( key, value ) {
                //     // data chart
                //     kategorihealth_chartData[key] = value.counter
                //     kategorihealth_labelData[key] = value.name
                    
                //     // color for chart
                //     color = random_colors();
                //     kategorihealth_colorData[key] = color[1];
                //     kategorihealth_backgroundcolorData[key] = color[0];
                // });

                // refreshChart(); // refresh chart
            }
        },
        columns: [
            {data: 'date'},
            {data: 'emp_name'},
            {data: 'detail_position.departement'},
            {data: 'detail_position.divisi'},
            {
                // classNmae: "",
                // data: 'status',
                // render: (data, type) => {
                //     if(type === 'display'){
                //         var status = ''; // status name
                //         var cssClass = ''; // class name

                //         switch(data) {
                //             case '0':
                //                 status = 'Sick';
                //                 cssClass = 'text-danger';
                //                 break;
                //             case '1':
                //                 status = "Healthy";
                //                 cssClass = 'text-success';
                //                 break;
                //         }
                //         return '<p class="m-0 font-weight-bold text-center '+cssClass+'">'+status+'</p>';
                //         // return status;
                //     }
                //     return data;
                // }
                data: 'status'
            },
            {data: 'sickness'},
            {data: 'notes'}
        ]
    });
</script>

scrollTop.js

731923ad37202e52218943b3a6cec01d590e89fe

validation-checkbox.js

// looking for input type checkbox and serialize, then see it if length == 0

// Validator for Checkbox with different name

function onSubmit() {
	var fields = $("input[type='checkbox']").serializeArray(); 
	if (fields.length == 0) { 
		// tampilkan pesan error
		Swal.fire({
			icon: 'error',
			title: 'Error',
			text: 'Please choose your sick type!'
		});
		
		// cancel submit
		return false;
	} 
	// else 
	// { 
	//   alert(fields.length + " items selected"); 
	// }
}
// register event on form, not submit button
$('#checkInSick').submit(onSubmit);

// src: https://jsfiddle.net/p8y2e59c/