<script type="text/javascript">
	

	$(document).ready(function(){
		loadData()
	})


	
	function loadData() {
		$('#datatable').DataTable({
			"pageLength": 10,
			"serverSide": true,
			"processing": true,
			"scrollX": true,
			"order": [
				[0, "desc"]
			],
			"columnDefs": [
				{
					targets: [0,1,5],
					className: "text-center"
				},
				{
					orderable: false,
					targets: [2,3,4,5]
				},
				{
					width: '5%',
					targets: [0]
				},
				{
					width: '10%',
					targets: [1]
				},
				{
					width: '25%',
					targets: [2]
				},
				{
					width: '15%',
					targets: [3]
				},
				{
					width: '30%',
					targets: [4]
				},
				{
					width: '15%',
					targets: [5]
				}
			],
			"ajax": {
				url: baseUrl + 'user/get-all-data',
				type: 'POST',
				data: {
				},
			},
			"columns": [{
					data: "no"
				},
				{
					data: "role_name"
				},
				{
					data: "name"
				},
				{
					data: "phone"
				},
				{
					data: "address"
				},
				{
					data: "is_active"
				},
				{
					data: "option"
				},
			],
			"destroy": true,
			"initComplete": function () {

				    $('.dataTables_paginate').addClass('mt-3');

				    updatePaginationIcons();

		    },
		    "drawCallback": function(settings) {
	            // Panggil fungsi ini setiap kali tabel di-redraw
	            updatePaginationIcons();
	        }
		}); // End of DataTable
	}


	
	// Fungsi untuk mengupdate ikon pagination
	function updatePaginationIcons() {
	    $('.paginate_button.previous').empty()
	        .addClass('d-flex justify-content-center align-items-center')
	        .html("<i class='bx bx-chevron-left' style='font-size: 26px;'></i>");
	        
	    $('.paginate_button.next').empty()
	        .addClass('d-flex justify-content-center align-items-center')
	        .html("<i class='bx bx-chevron-right' style='font-size: 26px;'></i>");
	}


	$("#btn_add").on('click',function(e){
		e.preventDefault()
		
		$("#modal_add").modal('show')
		// loading
		$("#modal_add").find('.modal-content').load(baseUrl+'user/add')
	})

	$("#datatable").delegate(".datatable-edit", "click", function (e) {
		  var url = $(this).attr("data-link");
		  e.preventDefault()
			
			$("#modal_edit").modal('show')
			// loading
			$("#modal_edit").find('.modal-content').load(url)


	})

</script>