datatable ajax dengan laravel. untuk keterangan lebih lanjut silahkan akses https://youtu.be/T-7PCbV-e8A

inisialisasi datatable di js

const table = $('#table').DataTable({
		"pageLength": 100,
	    "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
	    "bLengthChange": true,
	    "bFilter": true,
	    "bInfo": true,
	    "processing":true,
	    "bServerSide": true,
		ajax:{
	        url: "{{u()}}/dashboard/template/data",
	        type: "POST",
	        data: function(d){
	        	return $.extend( {}, d, {
	        		"diajukan": {{$diajukan?1:0}},
	                "filter-status": $('.filter[data-filter="status"]').val(),
	                "filter-pembuat": $('.filter[data-filter="pembuat"]').val()
	             });
	        }
	    },
	    columnDefs: [
	      { targets: '_all', visible: true },
	      {
	        "targets": 0,
	        "class":"text-nowrap",
	        "render": function(data, type, row, meta){
	        	list_template[row.id] = row;
	        	return row.id;
	        }
	      },
	      {
	        "targets": 1,
	        "class":"text-nowrap",
	        "render": function(data, type, row, meta){
	        	return row.judul;
	        }
	      },
	      {
	        "targets": 2,
	        "class":"",
	        "render": function(data, type, row, meta){
	        	return row.deskripsi.length>100?row.deskripsi.substr(0,100):row.deskripsi;
	        }
	      },
	      {
	        "targets": 3,
	        "class":"text-nowrap",
	        "render": function(data, type, row, meta){
	          	return `<a href="{{u()}}/dashboard/users/${row.id_user}">${row.nama_user}</a>`;
	        }
	      },
	      {
	        "targets": 4,
	        "class":"text-nowrap",
	        "render": function(data, type, row, meta){
	        	let tampilan;
	        	if(row.status=='draft'){
	        		tampilan = `<span class="kt-badge kt-badge--unified-warning kt-badge--lg kt-badge--rounded kt-badge--bold">${row.status}</span>`;
	        	}else if(row.status=='publish'){
	        		tampilan = `<span class="kt-badge kt-badge--unified-success kt-badge--lg kt-badge--rounded kt-badge--bold">${row.status}</span>`;
	        	}else{
	        		tampilan = `<span class="kt-badge kt-badge--unified-info kt-badge--lg kt-badge--rounded kt-badge--bold">${row.status}</span>`;
	        	}
	        	return tampilan;
	        }
	      },
	      {
	        "targets": 5,
	        "class":"center",
	        "render": function(data, type, row, meta){
	        	let tampilan = '';
	        	@if(Auth::user()->role!='superadmin')
	        	if(!row.nasional){
	        		if(row.diajukan){
	        			tampilan+=`<button type="button" onclick="ajukan('${row.id}')" class="btn btn-danger btn-sm mb-7">Batalkan Pengajuan</button>`
	        		}else{
	        			tampilan+=`<button type="button" onclick="ajukan('${row.id}')" class="btn btn-warning btn-sm mb-7">Ajukan Ke Nasional</button>`
	        		}
	        	}
	        	@endif
	        	if(row.status=='draft'){
	        		tampilan += `
	        		<button class="btn btn-secondary btn-sm dropdown-toggle mb-7" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	        		Opsi
	        		</button>
	        		<div class="dropdown-menu" style="">
						<span class="dropdown-item" onclick="setStatus('publish','${row.id}')">Set Publish</span>
						<span class="dropdown-item" onclick="setStatus('arsip','${row.id}')">Arsipkan</span>
						<a class="dropdown-item" href="{{u()}}/dashboard/template/pratinjau/${row.id}">Pratinjau</a>
					</div>
	        		`
	        	}else if(row.status=='publish'){
	        		tampilan += `<button type="button" class="btn btn-dark btn-sm mb-7" onclick="setStatus('arsip','${row.id}')">Arsipkan</button><div style="width:0.5rem;display:inline-block;"></div>`;
	        	}else{
	        		tampilan += `<button class="btn btn-brand btn-sm mb-7" onclick="setStatus('publish','${row.id}')">Publish</button><div style="width:0.5rem;display:inline-block;"></div>`;
	        	}
	        	tampilan += `<a class="btn btn-secondary btn-sm mb-7" href="{{u()}}/dashboard/template/${row.id}"><i class="la la-file-text"></i> Ke Form</a>`;
	        	if(row.status=='publish' || row.status=='arsip'){
	        		tampilan+=`<div style="width:0.5rem;display:inline-block;"></div><a class="btn btn-primary btn-sm" target="_blank" href="{{u()}}/dashboard/template/hasil/${row.id}"><i class="la la-bar-chart"></i> Hasil</a>`;
	        	}
	          	return tampilan;
	        }
	      },
	    ]
	});