title: Display data from database in datatable
body: <p>I have a table &quot;karyawans&quot; 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</p>
  <p>![datatable result][1]</p>
  <p>here is my data</p>
  <p>![my data][2]</p>
  <p>here is the view</p>
  <pre><code>    @extends('layout.main')
      @section('container')
        &lt;!-- page content --&gt;
        &lt;div class=&quot;right_col&quot; role=&quot;main&quot;&gt;
          &lt;div class=&quot;&quot;&gt;
            &lt;div class=&quot;page-title&quot;&gt;
              &lt;div class=&quot;title_left&quot;&gt;
                &lt;h3&gt;&lt;small&gt;Daftar karyawan yang telah ditambahkan&lt;/small&gt;&lt;/h3&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
  
            &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-md-12 col-sm-12 &quot;&gt;
                &lt;div class=&quot;x_panel&quot;&gt;
                  &lt;div class=&quot;x_title&quot;&gt;
                    &lt;h2&gt;Karyawan &lt;small&gt;Users&lt;/small&gt;&lt;/h2&gt;
                    &lt;ul class=&quot;nav navbar-right panel_toolbox&quot;&gt;
                      &lt;li&gt;&lt;a class=&quot;collapse-link&quot;&gt;&lt;i class=&quot;fa fa-chevron-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;dropdown&quot;&gt;
                        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; role=&quot;button&quot;
                          aria-expanded=&quot;false&quot;&gt;&lt;i class=&quot;fa fa-wrench&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                        &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
                          &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Settings 1&lt;/a&gt;
                        &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;close-link&quot;&gt;&lt;i class=&quot;fa fa-close&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;x_content&quot;&gt;
                    &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-sm-12&quot;&gt;
                        &lt;div class=&quot;card-box table-responsive&quot;&gt;
                          &lt;table id=&quot;datatable&quot; class=&quot;table table-striped table-bordered&quot;
                            style=&quot;width:100%&quot;&gt;
                            &lt;thead&gt;
                              &lt;tr&gt;
                                &lt;th&gt;NIK&lt;/th&gt;
                                &lt;th&gt;Nama&lt;/th&gt;
                                &lt;th&gt;Username&lt;/th&gt;
                                &lt;th&gt;Email&lt;/th&gt;
                                &lt;th&gt;Unit&lt;/th&gt;
                                &lt;th&gt;Jabatan&lt;/th&gt;
                                &lt;th&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                              @foreach ($karyawans as $karyawan)
                                &lt;tr&gt;
                                  &lt;td&gt;{{ $karyawan-&gt;nik }}&lt;/td&gt;
                                  &lt;td&gt;{{ $karyawan-&gt;nama }}&lt;/td&gt;
                                  &lt;td&gt;{{ $karyawan-&gt;username }}&lt;/td&gt;
                                  &lt;td&gt;{{ $karyawan-&gt;email }}&lt;/td&gt;
                                  &lt;td&gt;{{ $karyawan-&gt;unit }}&lt;/td&gt;
                                  &lt;td&gt;{{ $karyawan-&gt;jabatan }}&lt;/td&gt;
                                  &lt;td&gt;
                                    &lt;div class=&quot;row d-flex justify-content-center&quot;&gt;
                                      &lt;a href=&quot;&quot; class=&quot;btn btn-sm btn-warning&quot;&gt; Ubah&lt;/a&gt;
                                      &lt;a href=&quot;&quot; class=&quot;btn btn-sm btn-danger&quot;&gt; Hapus&lt;/a&gt;
                                    &lt;/div&gt;
                                  &lt;/td&gt;
                                &lt;/tr&gt;
                              @endforeach
                            &lt;/tbody&gt;
                          &lt;/table&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;/table&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      @endsection
  </code></pre>
  <p>and here is where I store the css and js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;!-- Meta, title, CSS, favicons, etc. --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" href="{{ asset('images/rs.png') }}" type="image/png" /&gt;
  
    &lt;title&gt;Sistem Manajemen Pekerjaan &lt;/title&gt;
  
    &lt;!-- Bootstrap --&gt;
    &lt;link href="{{ asset('../vendors/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css"
      rel="stylesheet"&gt;
    &lt;!-- Font Awesome --&gt;
    &lt;link href="{{ asset('../vendors/font-awesome/css/font-awesome.min.css') }}" type="text/css"
      rel="stylesheet"&gt;
    &lt;!-- NProgress --&gt;
    &lt;link href="{{ asset('../vendors/nprogress/nprogress.css') }}" type="text/css" rel="stylesheet"&gt;
    &lt;!-- iCheck --&gt;
    &lt;link href="{{ asset('../vendors/iCheck/skins/flat/green.css') }}" rel="stylesheet"&gt;
  
    &lt;!-- bootstrap-progressbar --&gt;
    &lt;link
      href="{{ asset('../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css') }}"
      type="text/css" rel="stylesheet"&gt;
    &lt;!-- JQVMap --&gt;
    &lt;link href="{{ asset('../vendors/jqvmap/dist/jqvmap.min.css') }}" rel="stylesheet" /&gt;
    &lt;!-- bootstrap-daterangepicker --&gt;
    &lt;link href="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.css') }}"
      type="text/css" rel="stylesheet"&gt;
  
    &lt;!-- Custom Theme Style --&gt;
    &lt;link href="{{ asset('../build/css/custom.min.css') }}" type="text/css" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" type="text/css"
      href="{{ asset('//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css') }}"&gt;
    {{-- &lt;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') }}"&gt; --}}
  
  
  
  &lt;/head&gt;
  
  &lt;body class="nav-md"&gt;
    &lt;div class="container body"&gt;
      &lt;div class="main_container"&gt;
        @include('partial.nav_bar')
  
        &lt;!-- top navigation --&gt;
        @include('partial.top_nav')
        &lt;!-- /top navigation --&gt;
  
        &lt;!-- page content --&gt;
        &lt;div class="container"&gt;
          @yield('container')
        &lt;/div&gt;
        &lt;!-- /page content --&gt;
  
        &lt;!-- footer content --&gt;
        @include('partial.footer')
        &lt;!-- /footer content --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- jQuery --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/jquery/dist/jquery.min.js') }}"&gt;
    &lt;/script&gt;
    &lt;!-- Bootstrap --&gt;
    &lt;script type="text/javascript"
      src="{{ asset('../vendors/bootstrap/dist/js/bootstrap.bundle.min.js') }}"&gt;&lt;/script&gt;
    &lt;!-- FastClick --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/fastclick/lib/fastclick.js') }}"&gt;
    &lt;/script&gt;
    &lt;!-- NProgress --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/nprogress/nprogress.js') }}"&gt;&lt;/script&gt;
    &lt;!-- Chart.js --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/Chart.js/dist/Chart.min.js') }}"&gt;
    &lt;/script&gt;
    &lt;!-- gauge.js --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/gauge.js/dist/gauge.min.js') }}"&gt;
    &lt;/script&gt;
    &lt;!-- bootstrap-progressbar --&gt;
    &lt;script type="text/javascript"
      src="{{ asset('../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js') }}"&gt;&lt;/script&gt;
    &lt;!-- iCheck --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/iCheck/icheck.min.js') }}"&gt;&lt;/script&gt;
    &lt;!-- Skycons --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/skycons/skycons.js') }}"&gt;&lt;/script&gt;
    &lt;!-- Flot --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.pie.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.time.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.stack.js') }}"&gt;
    &lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/Flot/jquery.flot.resize.js') }}"&gt;
    &lt;/script&gt;
    &lt;!-- Flot plugins --&gt;
    &lt;script type="text/javascript"
      src="{{ asset('../vendors/flot.orderbars/js/jquery.flot.orderBars.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"
      src="{{ asset('../vendors/flot-spline/js/jquery.flot.spline.min.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/flot.curvedlines/curvedLines.js') }}"&gt;
    &lt;/script&gt;
    &lt;!-- DateJS --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/DateJS/build/date.js') }}"&gt;&lt;/script&gt;
    &lt;!-- JQVMap --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/jqvmap/dist/jquery.vmap.js') }}"&gt;
    &lt;/script&gt;
    &lt;script type="text/javascript"
      src="{{ asset('../vendors/jqvmap/dist/maps/jquery.vmap.world.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"
      src="{{ asset('../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js') }}"&gt;&lt;/script&gt;
    &lt;!-- bootstrap-daterangepicker --&gt;
    &lt;script type="text/javascript" src="{{ asset('../vendors/moment/min/moment.min.js') }}"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"
      src="{{ asset('../vendors/bootstrap-daterangepicker/daterangepicker.js') }}"&gt;&lt;/script&gt;
  
    &lt;!-- Custom Theme Scripts --&gt;
    &lt;script type="text/javascript" src="{{ asset('../build/js/custom.min.js') }}"&gt;&lt;/script&gt;
  
    &lt;!-- dataTables --&gt;
    &lt;script type="text/javascript"
      src="{{ asset('//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js') }}"&gt;
      $(document).ready(function() {
        $('#datatable').DataTable();
      });
    &lt;/script&gt;
  
    {{-- &lt;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') }}"&gt;
    &lt;/script&gt; --}}
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>here is the KaryawanController</p>
  <pre><code>    public function daftar_karyawan()
          {
              return view('karyawans', [
                  &quot;karyawans&quot; =&gt; Karyawan::first()-&gt;filter(request(['cari']))-&gt;orderBy('id', 'asc')
                  -&gt;paginate(10)-&gt;withQueryString()
              ]);
          }
  </code></pre>
  <p>FYI, I try to use the manual paginaton and searching before i know the 'datatables'</p>
  <p>and this is the route</p>
  <pre><code>    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.stack.imgur.com/GGQID.png
    [2]: https://i.stack.imgur.com/R2X22.png
  </code></pre>