I have a table "karyawans" which contains 104 data and i want to display it all in a datatable. i have done all manual from datatable and here is the result
![datatable result][1]
here is my data
![my data][2]
here is the view
@extends('layout.main')
@section('container')
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3><small>Daftar karyawan yang telah ditambahkan</small></h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Karyawan <small>Users</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a>
</div>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="row">
<div class="col-sm-12">
<div class="card-box table-responsive">
<table id="datatable" class="table table-striped table-bordered"
style="width:100%">
<thead>
<tr>
<th>NIK</th>
<th>Nama</th>
<th>Username</th>
<th>Email</th>
<th>Unit</th>
<th>Jabatan</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($karyawans as $karyawan)
<tr>
<td>{{ $karyawan->nik }}</td>
<td>{{ $karyawan->nama }}</td>
<td>{{ $karyawan->username }}</td>
<td>{{ $karyawan->email }}</td>
<td>{{ $karyawan->unit }}</td>
<td>{{ $karyawan->jabatan }}</td>
<td>
<div class="row d-flex justify-content-center">
<a href="" class="btn btn-sm btn-warning"> Ubah</a>
<a href="" class="btn btn-sm btn-danger"> Hapus</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
and here is where I store the css and js
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ asset('images/rs.png') }}" type="image/png" />
<title>Sistem Manajemen Pekerjaan </title>
<!-- Bootstrap -->
<link href="{{ asset('../vendors/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css"
rel="stylesheet">
<!-- Font Awesome -->
<link href="{{ asset('../vendors/font-awesome/css/font-awesome.min.css') }}" type="text/css"
rel="stylesheet">
<!-- NProgress -->
<link href="{{ asset('../vendors/nprogress/nprogress.css') }}" type="text/css" rel="stylesheet">
<!-- iCheck -->
<link href="{{ asset('../vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link
href="{{ asset('../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}"
type="text/css" rel="stylesheet">
<!-- JQVMap -->
<link href="{{ asset('../vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link href="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.css') }}"
type="text/css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{{ asset('../build/css/custom.min.css') }}" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="{{ asset('//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css') }}">
{{-- <link rel="stylesheet" type="text/css"
href="{{ asset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css') }}"> --}}
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
@include('partial.nav_bar')
<!-- top navigation -->
@include('partial.top_nav')
<!-- /top navigation -->
<!-- page content -->
<div class="container">
@yield('container')
</div>
<!-- /page content -->
<!-- footer content -->
@include('partial.footer')
<!-- /footer content -->
</div>
</div>
<!-- jQuery -->
<script type="text/javascript" src="{{ asset('../vendors/jquery/dist/jquery.min.js') }}">
</script>
<!-- Bootstrap -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<!-- FastClick -->
<script type="text/javascript" src="{{ asset('../vendors/fastclick/lib/fastclick.js') }}">
</script>
<!-- NProgress -->
<script type="text/javascript" src="{{ asset('../vendors/nprogress/nprogress.js') }}"></script>
<!-- Chart.js -->
<script type="text/javascript" src="{{ asset('../vendors/Chart.js/dist/Chart.min.js') }}">
</script>
<!-- gauge.js -->
<script type="text/javascript" src="{{ asset('../vendors/gauge.js/dist/gauge.min.js') }}">
</script>
<!-- bootstrap-progressbar -->
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"></script>
<!-- iCheck -->
<script type="text/javascript" src="{{ asset('../vendors/iCheck/icheck.min.js') }}"></script>
<!-- Skycons -->
<script type="text/javascript" src="{{ asset('../vendors/skycons/skycons.js') }}"></script>
<!-- Flot -->
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.pie.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.time.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.stack.js') }}">
</script>
<script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.resize.js') }}">
</script>
<!-- Flot plugins -->
<script type="text/javascript"
src="{{ asset('../vendors/flot.orderbars/js/jquery.flot.orderBars.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/flot-spline/js/jquery.flot.spline.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('../vendors/flot.curvedlines/curvedLines.js') }}">
</script>
<!-- DateJS -->
<script type="text/javascript" src="{{ asset('../vendors/DateJS/build/date.js') }}"></script>
<!-- JQVMap -->
<script type="text/javascript" src="{{ asset('../vendors/jqvmap/dist/jquery.vmap.js') }}">
</script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/dist/maps/jquery.vmap.world.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js') }}"></script>
<!-- bootstrap-daterangepicker -->
<script type="text/javascript" src="{{ asset('../vendors/moment/min/moment.min.js') }}"></script>
<script type="text/javascript"
src="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<!-- Custom Theme Scripts -->
<script type="text/javascript" src="{{ asset('../build/js/custom.min.js') }}"></script>
<!-- dataTables -->
<script type="text/javascript"
src="{{ asset('//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js') }}">
$(document).ready(function() {
$('#datatable').DataTable();
});
</script>
{{-- <script type="text/javascript"
src="{{ assset('https://cdn.datatables.net/v/bs5/dt-1.11.3/af-2.3.7/b-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js') }}">
</script> --}}
</body>
</html>here is the KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->paginate(10)->withQueryString()
]);
}
FYI, I try to use the manual paginaton and searching before i know the 'datatables'
and this is the route
Route::get('/daftar_karyawan', [KaryawanController::class, 'daftar_karyawan']);
``
Sorry if there is an mistake in writing my question, because I am new to this forum and this is my first question, thank you
[1]: https://i.sstatic.net/GGQID.png
[2]: https://i.sstatic.net/R2X22.png
Remove Paginate(10) and replace with get() in KaryawanController
public function daftar_karyawan()
{
return view('karyawans', [
"karyawans" => Karyawan::first()->filter(request(['cari']))->orderBy('id', 'asc')
->get()
]);
}
You can't use Paginate() for the datatable because it will limit to 10 :) Just use get() and datatable will auto paginate !
ps: If retrieving more than 1000 rows then there is a high chances system will load slow. Recommended to use AJAX to prevent this issue :)