title: How to set fiter and order data to a DataTables cell
body: <p>I have a DataTable and I <a href="https://datatables.net/reference/api/cell().data()" rel="nofollow noreferrer">set a cells value through its object</a>.</p>
  
  <p>I don't want to set the cells values directly through jQuery because of <a href="https://stackoverflow.com/questions/43634080/how-to-refresh-datatables-sort-and-filter-info">other problems found here</a></p>
  
  <p>How can I set different values for the filtering and ordering of that cell like it can be achieved when you load <a href="https://datatables.net/examples/ajax/orthogonal-data.html" rel="nofollow noreferrer">orthogonal data</a> or when you use <a href="https://datatables.net/examples/advanced_init/html5-data-attributes.html" rel="nofollow noreferrer">HTML5 data-... attributes</a></p>
  
  <p>Here's a code snippet for better understanding the problem - click to sort by speed after running it</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>$(document).ready(function() {
    var dt = $('#example').DataTable({});
    
    //this is not enough as the change doesn't reflect on sorting and filtering
    dt.cell( $("#obj2_speed") ).data(9 + 'km/h') ;
    
    //this doesn't work like I would like to
    /*dt.cell( $("#obj1_speed") ).data({
      "_": 7 + 'km/h',
      "sort": 7,
      "filter": 'seven'
    });*/
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/&gt;
  
  &lt;table id="example" class="display" width="100%" cellspacing="0"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Object&lt;/th&gt;
        &lt;th&gt;Speed&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;object 1&lt;/td&gt;
        &lt;td id="obj1_speed" data-sort="80" data-filter="eighty"&gt;80km/h&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;object 2&lt;/td&gt;
        &lt;td id="obj2_speed" data-sort="8" data-filter="eight"&gt;8km/h&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;object 3&lt;/td&gt;
        &lt;td id="obj3_speed" data-sort="90" data-filter="ninety"&gt;90km/h&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My use case for the above sounds something like this:</p>
  
  <p>I initially load the DataTable from a database but then I have to do repeated ajax requests which need to update different portions of the DataTable, and those updates need to be reflected inside it.</p>
  
  <p>Say I keep my browser open on my page which displays my DataTable sorted by speed. After 5 seconds an ajax request/response comes in and updates the speed of a cell. I want that updated and the row moved upwards or downwards because I'm looking at it ordered by speed. I already achieved that but with small shortcomings given by the fact that "8km/h" is a string and won't get ordered correctly with "80km/h" and "90km/h"</p>