title: Can't get scrollTop() to work with datatables .draw()
body: <p>I am using the datatables plug-in to display content that is being retrieved from a server. I am using dropdowns to display the content that the user can select from. When a user makes the first select, I am taking the input from the select using the .change(function(e) {}. Then in order to populate the second dropdown with related options, I am deleting the row using .fnDeleteRow(), and drawing a new row that displays the first selection as a read only string and has a second column that is populated with dropdowns based off of the first selection. </p>
  
  <p>First off, this is working fine and I do not need any help displaying the correct content in each row. The problem is coming when I make a selection on any of the dropdowns, the page refreshes and jumps to the top. I have created a function that I think should solve the jumping to the top issue, but for some reason it doesnt do anything. I am wondering if anyone has had any experience with keeping the scrollTop() the same while using datatables and specifically the .draw() function.</p>
  
  <p>My function I have created looks like this:</p>
  
  <pre><code>function saveScrollPosition() {
      var scrollPosition = $('#tblLineItems').scrollTop();
  }
  
  function setScrollPosition() {
      $('#tblLineItems').scrollTop(scrollPosition);
  }
  </code></pre>
  
  <p>I don't know what is missing because I am saving the scroll position and then setting it after each .draw() that I use.</p>
  
  <p>Also I am initializing datatables like so:</p>
  
  <pre><code>$(document).ready(function() {
      myTable = $('#tblLineItems').dataTable({
      //some stuff
      })
  });
  </code></pre>
  
  <p>Here is where I am calling saveScrollPosition() and setScrollPosition():</p>
  
  <pre><code>function addSelectCriteria() 
  
  newSelectCriteriaCtr++;
  
  saveScrollPosition();
  
  var lineId = "newSelectCriteria_"+newSelectCriteriaCtr;
  var addData = [];
  
  addData.push('&lt;td&gt;&lt;input type="checkbox" id="'+lineId+'"/&gt;&lt;/td&gt;');
  addData.push("&lt;select style='width:150px' value='1' name='selectMfg' id='"+lineId+"_mfg'&gt;"+selectMfgs+"&lt;/select&gt;");
  addData.push("&lt;select style='width:150px'&lt;/select&gt;");
  addData.push("&lt;select style='width:150px'&lt;/select&gt;");
  addData.push("&lt;td&gt;&lt;a href='' class='btn btn-blue'&gt;&lt;img src='../img/btn/btn-blue-med-icn-forward.png' alt='Print'&gt;Print Barcode&lt;/a&gt;&lt;/td&gt;");
  addData.push("&lt;td class='controls'&gt;&lt;a class='delete' id='deleteIcon_"+lineId+"'&gt;Delete&lt;/a&gt;&lt;input type='hidden' id='deleteHiddenInput_"+lineId+"' value='false'&gt;&lt;/td&gt;");
  
  myTableAPI.row.add(addData).draw();
  
  setScrollPosition();
  
  console.log(newSelectCriteriaCtr);
  
  $("select[name='selectMfg']").change(function(e) {  
  
      saveScrollPosition();
  
      var mfg = $("select[name='selectMfg']").val();
      var addData = [];
  
      myTable.fnDeleteRow(newSelectCriteriaCtr);
  
      addData.push('&lt;td&gt;&lt;input type="checkbox" id="'+lineId+'"/&gt;&lt;/td&gt;');
      addData.push("&lt;td&gt;"+mfg+"&lt;/td&gt;");
      addData.push("&lt;select style='width:150px' value='2' name='selectBldg' id='"+lineId+"_bldg'&gt;"+selectBldgs+"&lt;/select&gt;");
      addData.push("&lt;select style='width:150px'&lt;/select&gt;");
      addData.push("&lt;td&gt;&lt;a href='' class='btn btn-blue'&gt;&lt;img src='../img/btn/btn-blue-med-icn-forward.png' alt='Print'&gt;Print Barcode&lt;/a&gt;&lt;/td&gt;");
      addData.push("&lt;td class='controls'&gt;&lt;a class='delete' id='deleteIcon_"+lineId+"'&gt;Delete&lt;/a&gt;&lt;input type='hidden' id='deleteHiddenInput_"+lineId+"' value='false'&gt;&lt;/td&gt;");
  
      myTableAPI.row.add(addData).draw();
  
      setScrollPosition();
  
      console.log(newSelectCriteriaCtr);      
  </code></pre>