title: How to sort numbers and text in the same column Javascript
body: <p>I have a table that uses DataTables. The table consists of 4 columns and has text in some and numbers in some as well. Within the numbers column if there is no number then 'null' is shown in the td. How can I still sort the numbers correctly and give the null value a 0 or some number to help sort better? </p>
  
  <p>Right now when you sort through the list it's not sorting more than one digit. So '10' comes before '3'. Also, do you notice the 1440 comes before 180.</p>
  
  <p>You can view my <a href="http://codepen.io/tetonhiker/pen/dOBeqY" rel="nofollow noreferrer">http://codepen.io/tetonhiker/pen/dOBeqY</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $('#dataTable').DataTable({
      "paging": false,
      "info": false
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  &lt;link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.getmdl.io/1.3.0/material.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
  
  &lt;table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp dataTable"&gt;
    &lt;thead&gt;
      &lt;tr role="row"&gt;
        &lt;th class="mdl-data-table__cell--non-numeric"&gt;Shape Name&lt;/th&gt;
        &lt;th class="numeric-cell"&gt;Number Edges&lt;/th&gt;
        &lt;th class="numeric-cell"&gt;Sum of Interior Angles&lt;/th&gt;
        &lt;th class="mdl-data-table__cell--non-numeric"&gt;Deleted?&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="rowEditData odd" value="7924" role="row" title=""&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;Hexagon&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;6&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd deleted" value="7930" role="row" title=""&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;3&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;180&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7931" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;4&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;360&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7932" role="row" title=""&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;5&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;540&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7933" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;6&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;120&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7934" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;null hello&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;10&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;1440&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7925" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;Octagon sample&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;8&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7922" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;pentagon&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even deleted" value="7926" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;Pentagon&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData odd" value="7920" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;square-test&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;4&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="rowEditData even" value="7927" role="row"&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;Square&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="numeric-cell"&gt;null&lt;/td&gt;
        &lt;td class="mdl-data-table__cell--non-numeric"&gt;No&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>