title: X-editable and DataTables Issue
body: <p>I made a Jsfiddle of my issue but it doesn't reflect the problem i have properly so i will explain.</p>
  
  <p>I have 10 column table using datatables Version 1.10 with bootstrap3,
  X-editable with inline edit and onblur:'ignore'(for multiple edits)</p>
  
  <h2>X | Y Headers</h2>
  
  <p>a | b Cell values</p>
  
  <p>So if i click on both a &amp; b cells something like this will happen</p>
  
  <h2>X | Y</h2>
  
  <p>a(inline edit mode)
  b(inline edit mode)</p>
  
  <p>the cell b gets to the bottom of cell a in X column when clicked.</p>
  
  <p>I Solved this issue by using  tags inside  Tags.
  But then some of my datatable filters were not working,
  And if i remove span tags from all columns, Filters will work fine.</p>
  
  <p>Here is the Jsfiddle link : <a href="http://jsfiddle.net/xBB5x/4346/" rel="nofollow">http://jsfiddle.net/xBB5x/4346/</a></p>
  
  <pre><code> $.fn.editable.defaults.mode = 'inline';
  $('#users a').editable({
      type: 'text',
      name: 'username',
      url: '/post',
      title: 'Enter username'
  });
  $('.s').editable({
      type: 'text',
      name: 'username',
      url: '/post',
      title: 'Enter username'
  });
  //ajax emulation
  $.mockjax({
      url: '/post',
      responseTime: 200
  }); 
  </code></pre>
  
  <p>Actually i didn't know how to edit onblur option in code so it won't reflect my problem correctly.</p>
  
  <p>UPDATE : Following is the generated HTML</p>
  
  <p>Code for the select in datatables</p>
  
  <pre><code>   var table = $('#example').DataTable();
  
      $("#example thead td ").each( function ( i ) {
  
          if(i&gt;1)
           select = $('&lt;select class="form-control"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;')
              .appendTo( $(this).empty() )
              .on( 'change', function () {
                  table.column( i )
                      .search( $(this).val() )
                      .draw();
              }
                   );
  
  
          table.column( i ).data().unique().sort().each( function ( d, j ) {
          if(i&gt;1)
              select.append( '&lt;option value="'+d+'"&gt;'+d+'&lt;/option&gt;' )
  
          } );
      } );
  </code></pre>
  
  <p>This is my issue 
  So for column with number it works even when there is span tag in the value.</p>
  
  <pre><code>&lt;option value=""&gt;&lt;/option&gt;&lt;option value="&lt;span&gt;0&lt;/span&gt;"&gt;0&lt;/option&gt;&lt;option value="&lt;span&gt;10&lt;/span&gt;"&gt;10&lt;/option&gt;&lt;option value="&lt;span&gt;1&lt;/span&gt;"&gt;1&lt;/option&gt;&lt;option value="&lt;span&gt;2&lt;/span&gt;"&gt;2&lt;/option&gt;&lt;option value="&lt;span&gt;3&lt;/span&gt;"&gt;3&lt;/option&gt;&lt;option value="&lt;span&gt;4&lt;/span&gt;"&gt;4&lt;/option&gt;&lt;option value="&lt;span&gt;5&lt;/span&gt;"&gt;5&lt;/option&gt;&lt;option value="&lt;span&gt;8&lt;/span&gt;"&gt;8&lt;/option&gt;
  </code></pre>
  
  <p>But for columns with text in them it doesn't match.</p>
  
  <pre><code>&lt;select class="form-control"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;option value="&lt;span&gt;&lt;/span&gt;"&gt;&lt;/option&gt;&lt;option value="&lt;span&gt;TEAM1&lt;/span&gt;"&gt;TEAM1&lt;/option&gt;&lt;option value="&lt;span&gt;TEAM2&lt;/span&gt;"&gt;TEAM2&lt;/option&gt;&lt;option value="&lt;span&gt;TEAM3&lt;/span&gt;"&gt;TEAM3&lt;/option&gt;&lt;option value="&lt;span&gt;TEAM4&lt;/span&gt;"&gt;TEAM4&lt;/option&gt;&lt;option value="&lt;span&gt;UNASSIGNED&lt;/span&gt;"&gt;UNASSIGNED&lt;/option&gt;&lt;/select&gt;
  </code></pre>
  
  <p>So can anyone please tell me how can i remove the span tag in the value.</p>
  
  <p>Update I am close to the answer i know,</p>
  
  <p>I just have to change the <code>d</code> obj in the main jquery.datatables.js such as to select data inside <code>span</code> tag rather than <code>td</code>.</p>