DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="https://oneuproar.com/assets/css/datatables.min.css">
<link rel="stylesheet" href="https://oneuproar.com/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://oneuproar.com/assets/css/style.css">
<link rel="stylesheet" href="https://oneuproar.com/assets/css/print.css">
<script src="https://oneuproar.com/assets/js/bootstrap.min.js"></script>
<script src="https://oneuproar.com/assets/js/datatables.min.js"></script>
<table id="datatable" class="table table-sm table-bordered table-responsive-sm table-responsive-lg" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>#</th>
      <th>Client Name</th>
      <th>Username</th>
      <th>Phone</th>
      <th>Plan</th>
      <th>Status</th>
      <th>Due</th>
    </tr>
  </thead>


  <tbody>
    <tr>

      <td></td>
      <td>Akti Bari Akti Khamar</td>
      <td>abakh</td>
      <td>8801</td>
      <td>4 Mbps</td>
      <td>Active</td>
      <td class="text-right">1000.00</td>
    </tr>
    <tr>

      <td></td>
      <td>Md Adib</td>
      <td>adib</td>
      <td>8801756962187</td>
      <td>4 Mbps</td>
      <td>Active</td>
      <td class="text-right">1000.00</td>
    </tr>
    <tr>

      <td></td>
      <td>Md Altaf</td>
      <td>altaf</td>
      <td>8801</td>
      <td>2 Mbps</td>
      <td>Active</td>
      <td class="text-right">700.00</td>
    </tr>
    <tr>

      <td></td>
      <td>Arafat</td>
      <td>arafat</td>
      <td>8801713627210</td>
      <td>2 Mbps</td>
      <td>Active</td>
      <td class="text-right">700.00</td>
    </tr>
    <tr>

      <td></td>
      <td>Md Shimanto</td>
      <td>arian</td>
      <td>8801688012723</td>
      <td>4 Mbps</td>
      <td>Active</td>
      <td class="text-right">1000.00</td>
    </tr>
    <tr>

      <td></td>
      <td>Md Arif</td>
      <td>arif</td>
      <td>8801711137095</td>
      <td>-512 Kbps + YT</td>
      <td>Active</td>
      <td class="text-right">800.00</td>
    </tr>
    <tr>

      <td></td>
     ...

JavaScript

var table = $('#datatable').DataTable({
  "footerCallback": function(row, data, start, end, display) {
    var api = this.api(),
      data;

    // Remove the formatting to get integer data for summation
    var intVal = function(i) {
      return typeof i === 'string' ?
        i.replace(/[\$,]/g, '') * 1 :
        typeof i === 'number' ?
        i : 0;
    };
    // Total over this page
    pageTotal = api
      .column(6, {
        page: 'current'
      })
      .data()
      .reduce(function(a, b) {
        return intVal(a) + intVal(b);
      }, 0);
    Total = api
      .column(6)
      .data()
      .reduce(function(a, b) {
        return intVal(a) + intVal(b);
      }, 0);

    // Update footer
    $(api.column(6).footer()).html(
      '' + pageTotal.toFixed(2) + '<br>(Total: ' + Total.toFixed(2) + ')' + ''
    );
  },
  select: {
    style: 'single'
  },
  order: [
    [2, 'asc']
  ],

  dom: 'Bfrtip',
  "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    //debugger;
    var index = iDisplayIndexFull + 1;
    $("td:first", nRow).html(index);
    return nRow;
  },

  "pageLength": 20,
  "lengthMenu": [
    [20, 30, 50, -1],
    [20, 30, 50, "All"]
  ],
  buttons: ['pageLength',
    {
      extend: 'print',
      text: 'Print All',
      autoPrint: true,
      exportOptions: {
        columns: [':not(.hidden-print)'],
        modifier: {
          page: 'all'
        },
      },
      messageTop: function() {
        return '<h2 class="text-center"></h2>'
      },
      messageBottom: 'Print: 01-May-2019',
      customize: function(win) {

        $(win.document.body).find('h1').css('text-align', 'center');
        $(win.document.body).find('table')
          .removeClass('table-striped table-responsive-sm table-responsive-lg dataTable')
          .addClass('compact')
          .css('font-size', 'inherit', 'color', '#000');

      },
      footer: true
    },

  ]
})