title: Eliminating duplicate rows in DataTables.net
body: <p>Context: I have a web worker that "subscribes" to data updates from the back end via a websocket, which are then published to a view rendered via DataTables.net To increase efficiency, added data is pushed down the websocket as a partial record (ie. one row only).</p>
  
  <p>Since the data is decoupled from the DataTable (ie. it's not using the Ajax API; it's basically a JavaScript source), I cannot just add the row and render the table. In the event that two pushes of the same row are triggered, I end up with duplicate rows.</p>
  
  <p>So, I whipped up a little plugin:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>$.fn.dataTable.Api.register('deDupe', function (dataSet, idColumn) {
    idColumn = idColumn || 0;
    var columnData = this.columns().data()[idColumn];
  
    for(var i=0; i &lt; dataSet.length; i++) {
      var thisId = dataSet[i].id;
      var matchedIndex = columnData.indexOf(thisId);
      if(matchedIndex &gt; -1) {
        var matchedRow = $(this.rows().nodes()[matchedIndex]);
        this.row(matchedRow).remove();
      }
    }
  
    // return "this" for chaining
    return this;
  });
  </code></pre>
  
  <p>(Don't laugh at me for taking comfort in old fashioned "for" loops!)</p>
  
  <p>And then in usage, I do this:</p>
  
  <pre><code>myTable.deDupe(dataSet).rows.add(dataSet).draw();
  </code></pre>
  
  <p>The method that receives the data and then updates the table already has the incoming row, which is contained in "dataSet", and then I pass a COLUMN index for the column which is meant to contain the unique ID for de-duping purposes. Note that in code execution, rather than dropping an incoming duplicate, I am removing the previous row, then adding the incoming one. There are cases where the row contains updated data, and I really only care about de-duping at the ID level, not the contents level... always just blindly use the latest data.</p>
  
  <p>So a few questions:</p>
  
  <ol>
  <li><p>Is there a better way of doing this? I would've loved to see a core option, but I didn't come across one. It seems like relatively common functionality. Am I crazy here, re-inventing the wheel? (in other words, an initialization option?)</p></li>
  <li><p>In the conditional checking if there's a match, you see this line: <code>var matchedRow = $(this.rows().nodes()[matchedIndex]);</code> This strikes me as wacky, but I couldn't get my head around the other ways of identifying a row to be used in the <code>.remove()</code> chain. In my mind, I already know the index of the row, so I thought something like <code>matchedRow = this.rows(matchedIndex)</code> would work, but I can't find that or something similar. So not only am I digging into <code>rows().nodes()</code> but then the whole thing is wrapped up in jQuery before then being passed into <code>.row(matchedRow)</code>'. It seems so heavily nested and wrapped for something I feel like I should already have direct access to.</p></li>
  </ol>
  
  <p>Don't get me wrong; the code "works" and fixing it is probably a micro-optimization. But it strikes me as awfully convoluted and gives me some code smell, which I want to avoid for the sake of maintenance developers.</p>