title: How to use the jQuery DataTables order listener
body: <p>I am using the DataTable jQuery plugin (<a href="http://datatables.net/" rel="nofollow">http://datatables.net/</a>) and I would like to disable the default ordering of each column when you click on the TH element and instead specify another element for ordering (which will be a child of each TH).</p>
  
  <p>I have this in JS</p>
  
  <pre><code>var table = $('.table-striped').DataTable({
      "ordering": false
      });
  table.order.listener( $('#sort'), 1);
  </code></pre>
  
  <p>And this in HTML</p>
  
  <pre><code>&lt;table class="table table-striped" cellspacing="0" width="100%"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;span id="sort"&gt;Col 1&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;Col 2&lt;/th&gt;
              &lt;th&gt;Col 3&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;span&gt;2&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span&gt;CHARLIE&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span&gt;DELTA&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;span&gt;1&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span&gt;ALPHA&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;&lt;span&gt;BETA&lt;/span&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="http://jsfiddle.net/isherwood/d20djg91/" rel="nofollow"><strong>Fiddle</strong></a></p>
  
  <p>So I believe that when clicking on the SPAN with ID of 'sort', the table should be sorted by column 1- however it does not :( Any ideas??</p>
  
  <p>BTW, jQuery &amp; DataTables are all initalised correctly and I can get other DataTable functionality like pagination working :)</p>