File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <table id="transactions-table" class="table table-hover table-in-card card-data-table">
          <thead>
            <tr>
              <th scope="col">Categoría</th>
              <th scope="col">Comentarios</th>
              <th scope="col" >Fecha de creación</th>
              <th scope="col">Creado por</th>
              <th scope="col" >Fecha de modificación</th>
              <th scope="col">Modificado por</th>
              <th scope="col">Acciones</th>
            </tr>
          </thead>
        </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
  var table = $("#transactions-table").DataTable({
    ajax: {
      type: "POST",
      headers: {
        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
      },
      url: source,//Laravel route that returns a json with all table content,
      data: {
        policy_id: "{{ $view_data['policy_model']->id }}"
      }
    },
    destroy: true,
    orderCellsTop: true,
    fixedHeader: true,
    scrollX: true,
    scrollCollapse: true,
    "columnDefs":[
      {
        "width": "5%",
        "orderable": true,
        "targets": [-1]
      },
      {
        "width": "auto",
        "targets": '_all'
      }
    ],
    fixedColumns: {
      leftColumns: 0,
      rightColumns: 1,
    },
    dom: 'Bfrtlip',
    select: {
      selector: 'td:not(:last-child)',
    },
    language: {
      url: '//cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json',
      buttons:{
        'export': 'Exportar',
        'clearAll': 'Limpiar selección',
        'selectAll': 'Seleccionar todos',
        'bulkActions': 'Acciones en lote',
      },
      select:{
        rows: {
          _: '%d registros seleccionados',
          0: 'Haga clic en un registro para seleccionarlo',
          1: '1 registro seleccionado',
        }
      }
    },
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    searching: true,
    order: [],
    rowsGroup: ($('#'+table_id+'.card-data-table').data('rowgroup') >= 0 ) ? [$('#'+table_id+'.card-data-table').data('rowgroup'), 0] : '',
   buttons:[],
    drawCallback: function( settings ){
      $('[data-toggle="tooltip"]').tooltip({
        container: 'body'
      });
​
      $('a[data-toggle="tab"].has-table').each(function(){
        var target  = $(this).attr('href');
        text     = $(target+'.show').find('.text-cut');
        text.each(function(){
          var item    = $(this);
          str     = item.text().substr(0, 75);
          count   = item.text().length;
          dots    = (count > 75) ? ' ...' : '';
          item.text(str+dots);
        });
      });
    },
    initComplete: function(){
​
​
      var dtSelectAll   = $('.dt-select-all');
      dtSelectAll.html('<i class="fas fa-check-square" data-toggle="tooltip" title="Seleccionar Todos"></i>');
​
      var dtSelectNone   = $('.dt-select-none');
      dtSelectNone.html('<i class="fas fa-eraser" data-toggle="tooltip" title="Limpiar Selección"></i>');
​
      var dtExport   = $('.dt-export');
      dtExport.html('<i class="fas fa-file-export" data-toggle="tooltip" title="Exportar"></i>');
​
      var dtBulkActions = '<div class="dropdown" data-toggle="tooltip" title="Acciones en Lote">'
      +'<button id="dropdown-actions" class="dt-button dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
      +'<i class="fas fa-layer-group"></i>'
      +'</button>'
      +'<div class="dropdown-menu" aria-labelledby="dropdown-actions">'
      +'<a class="dropdown-item" href="#">Eliminar</a>'
      +'<a class="dropdown-item" href="#">Editar</a>'
      +'</div>'
      +'</div>';
​
      $('.spur-card-action .buttons button:first-child').before($(dtBulkActions));
​
      $('.dataTables_length, .dataTables_info, .dataTables_paginate').wrapAll('<div class="dt-footer-wrapper d-flex align-items-center"></div>');
    }
  });
} );
​
8 warnings
Line 88: Bad line breaking before '+'.
Line 89: Bad line breaking before '+'.
Line 90: Bad line breaking before '+'.
Line 91: Bad line breaking before '+'.
Line 92: Bad line breaking before '+'.
Line 93: Bad line breaking before '+'.
Line 94: Bad line breaking before '+'.
Line 95: Bad line breaking before '+'.
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers