DataTables Prevent Sort

Present table sort on click of icon in header

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body>
<h3>
    Datatables Prevent Sort
  </h3>
<p>
  Prevent DataTables from sorting when icon in header is clicked.
</p>


<table id="example" class="table table-condensed table-striped" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name <i class="glyphicon glyphicon-question-sign column-lookup" data-toggle="popover" data-trigger="click" data-column-header="Name" data-column-description="Employee name"></i></th>
      <th>Position <i class="glyphicon glyphicon-question-sign column-lookup" data-toggle="popover" data-trigger="click" data-column-header="Position" data-column-description="Employee position"></i></th>
      <th>Office <i class="glyphicon glyphicon-question-sign column-lookup" data-toggle="popover" data-trigger="click" data-column-header="Office" data-column-description="Employee office"></i></th>
      <th>Age <i class="glyphicon glyphicon-question-sign column-lookup" data-toggle="popover" data-trigger="click" data-column-header="Age" data-column-description="Employee age"></i></th>
      <th>Start date <i class="glyphicon glyphicon-question-sign column-lookup" data-toggle="popover" data-trigger="click" data-column-header="Start date" data-column-description="Employee start date"></i></th>
      <th>Salary <i class="glyphicon glyphicon-question-sign column-lookup" data-toggle="popover" data-trigger="click" data-column-header="Salary" data-column-description="Employee start date"></i></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
     ...

CSS

.left { float: left; clear: both; }

JavaScript

$(document).ready(function() {
  // wire up popover
  $('i').popover({
    placement: 'top',
    trigger: 'hover',
    html: true,
    title: function() {
      return $(this).data('column-header');
    },
    content: function() {
      return $(this).data('column-description');
    },
    container: 'body'
  });

  // wire up dt
  $('#example').DataTable({
    scrollX: true,
    autoWidth: false,
    lengthMenu: [2, 5, 10, 100],
		dom: '<"left"l><"left"f>',
		fnPreDrawCallback: function(oSettings) {
                        if ($(event.target).data('toggle') === 'popover' && oSettings.bFiltered) {
      	// get current order
        oSettings.aaSorting = oSettings.aLastSort;
        return false;
      }
    },
    filter: function(oSettings) {
    	debugger;
    }
  });

/* 
hide popover on dt table scroll, cheap, 
but fixes absolute position issue with bootstrap popover
*/
$('div.dataTables_scrollBody').on('scroll', function(e) {
	if ($('div.popover').length) {
		$('[data-toggle="popover"]').popover('destroy')
	}
});


  
  
// end  
});