Datatables in Laravel

Datatables in Laravel

layout.blade.php

/*add at closing of body tag*/
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
<script>
   $(document).ready(function(){
   function resizeTableColumns() {
           $($.fn.dataTable.tables(true)).DataTable()
               .columns.adjust();
           $('body').find('.dataTables_scrollBody').find('thead').find('tr').css({
               visibility: 'collapse'
           });
       }
   
       var table = $('#myTable').DataTable({
               responsive: true,
               scrollX: true,
               paging: true,
               language: {
                   "url": languageUrl,
               },
               scrollCollapse: true,
               sScrollX: "100%",
               sScrollXInner: "110%",
               initComplete: function(settings, json) {
                   resizeTableColumns();
               }
           });
   
           table.on('draw.dt', function() {
               resizeTableColumns();
           });
   
           table.on('responsive-resize', function(e, datatable, columns) {
               resizeTableColumns();
           });
   
   $(window).on('resize load', function() {
               resizeTableColumns();
           });
   });
</script>
/*add at closing of body tag*/
/*add css inside head tag*/
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/dt/dt-1.10.12/datatables.min.css" />
<style>
   div#myTable_wrapper {
   min-width: 1200px;
   }
   .dataTables_scrollBody thead tr[role="row"] {
   visibility: collapse !important;
   }
</style>
/*add css inside head tag*/

view.blade.php

/*inside a view blade template*/
<table id="myTable" class="table table-striped nowrap" style="width:100%;">
   <thead style="background: #edf7ff;border: none;">
      <tr>
         <th>S.no.</th>
         <th>Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>1</th>
         <th>Joe1</th>
      </tr>
      <tr>
         <th>2</th>
         <th>Joe2</th>
      </tr>
      <tr>
         <th>3</th>
         <th>Joe3</th>
      </tr>
      <tr>
         <th>4</th>
         <th>Joe4</th>
      </tr>
   </tbody>
</table>

click for more laravel codes, read in detail about datatables

2024 - RMC