title: How to sort on a numeric column in jQuery DataTables
body: <p>(Looked at a bunch of answers on this topic, none of which applies to this question.)</p>
  <p>The DataTables have the feature of letting the user click on each column's Up/Down triangle icons to sort in Ascending or Descending order.  I have loaded the data as follows</p>
  <pre><code>        oTable.fnAddData( [&quot;Bogus data&quot;,&quot;1,541,512&quot;,&quot;12.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;3,541,512&quot;,&quot;2.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;541,512&quot;,&quot;1.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;2,541,512&quot;,&quot;32.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;741,512&quot;,&quot;3.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;A Bogus data&quot;,&quot;41,512&quot;,&quot;1.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;2,541,512&quot;,&quot;12.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Z Bogus data&quot;,&quot;1,541,512&quot;,&quot;12.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;3,541,512&quot;,&quot;2.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;La Bogus data&quot;,&quot;541,512&quot;,&quot;1.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;The Bogus data&quot;,&quot;2,541,512&quot;,&quot;32.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;741,512&quot;,&quot;3.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;41,512&quot;,&quot;1.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;2,541,512&quot;,&quot;12.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;1,541,512&quot;,&quot;12.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;3,541,512&quot;,&quot;2.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;541,512&quot;,&quot;1.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;2,541,512&quot;,&quot;32.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;741,512&quot;,&quot;3.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
          oTable.fnAddData( [&quot;Bogus data&quot;,&quot;41,512&quot;,&quot;1.5%&quot;,&quot;0&quot;,&quot;0&quot;,&quot;0&quot;]);
  </code></pre>
  <p>In column number 2 the numeric values are processed alphabetically when I click on the Up/Down triangles.  How can I adjust it so that the second column Up/Down arrows will trigger the proper way, treating the characters as numbers.  I tried using the following initialization:</p>
  <pre><code>oTable = $('.utable').dataTable( {
  &quot;aoColumns&quot;: [{ sWidth: '60%' },{sWidth: '30%', &quot;sType&quot;: &quot;numeric&quot;},{ sWidth: '10%' }],
  &quot;sDom&quot;: 'rt',
  &quot;sScrollY&quot;:&quot;200px&quot;,
  &quot;bPaginate&quot;:false,
  &quot;bFilter&quot;:false,
  &quot;bInfo&quot;: false});  
  </code></pre>
  <p>All this does is to lock the colum and the Up/Down icons will not work in the header of that column.</p>