Datatables Pagination

by jamesjw007

HTML

<script src="https://cdn.datatables.net/t/dt/dt-1.10.11,b-1.1.2,b-colvis-1.1.2,r-2.0.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/dt-1.10.11,b-1.1.2,b-colvis-1.1.2,r-2.0.2/datatables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.min.css">
<table class="table table-striped">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th class="noleftpadding">Program</th>
      <th class="noleftpadding">Term</th>
      <th class="noleftpadding">Mileage</th>
      <th class="noleftpadding">Deductible</th>
      <th class="noleftpadding">Cost</th>
      <th style="max-width: 113px;" class="noleftpadding">
        Markup
        <span class="popovers" data-trigger="hover" data-html="true" data-container="body" data-toggle="popover" data-placement="top" data-content="You can assign a single markup value to every markup input box below.  Simply double click the input box that contains the value you want copied to every other markup input box."
        data-original-title="Did you know?" title="Did you know?">
                                    <i class="icon icon-info-sign"></i>
                                </span>
      </th>
      <th style="max-width: 113px;" class="noleftpadding">Retail</th>
      <th class="noleftpadding">Compare</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden</td>
      <td>Hidden</td>
      <td>
        Program 1
      </td>
      <td>
        60
      </td>
      <td>
        50000
      </td>
      <td>
    ...

JavaScript

//create table
var table = $('.table').dataTable({
  //dom: "<'row'<'col-md-8'B<<'pull-right ctoolbar'>>><'col-md-4'<'pull-right'l>>>frtip", // custom toolbar buggy in smaller displays
  dom: "<'row'<'col-md-8'B><'col-md-4'<'pull-right'l>>>frtip",
  buttons: [{
    extend: 'colvisGroup',
    text: 'Condense Info',
    show: [2, 3, 4, 5, 8],
    hide: [6, 7]
  }, {
    extend: 'colvisGroup',
    text: 'Show all',
    show: [6, 7]
  }],
  "columnDefs": [{
    "targets": [0, 1],
    "visible": false
  }],
  "paging": true,
  "ordering": false,
  "info": true,
  "language": {
    "emptyTable": "Sorry it appears no plans are available for the vehicle.",
    "info": "Showing _START_ to _END_ of _TOTAL_ Plan Options",
    "lengthMenu": "Show _MENU_ Plan Options"
  }
});

// Global Markup double click
table.on('dblclick', '[name="markupControl"]', function() {
  var value = parseFloat($(this).val()).toFixed(2);

  table.api().column(7).nodes().to$().find('input').val(value).change();

});

//  Markup Control Input Boxes
//  The markup boxes need to update the retail boxes.
table.on('change', '[name="markupControl"]', function() {
  // Get the rate id from this element
  var rateid = $(this).data('rateid');

  // Pricing variables
  var cost = parseFloat($('div[name="costControl"][data-rateid="' + rateid + '"]').text().replace("$", '').replace(",", ''));
  var markup = parseFloat($(this).val());

  // Update the Retail price for the correct plan retail box
  var retailControl = $('input[name="retailControl"][data-rateid="' + rateid + '"]');
  var newRetail = parseFloat(cost + markup).toFixed(2);
  retailControl.val(newRetail);

  // Force this control to go back to 2 decimals
  $(this).val(markup.toFixed(2));

  // Needed for later so we can call the change event on the retail control
  retailControl.change();
});

// Retail Control Input Boxes
// When the retail box is changed we need to re-adjust the markup box
// We also need to grab the correct pricing container and...