api row manipulation

jircas

I create a html file:

   <button id="addRow">Add new row</button>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
</table>

and a javascript file:

 $(document).ready(function() {
  var t = $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
         'csv', 'excel'
    ]
 });

 var counter = 1;

 $('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3'
    ] ).draw( false );
    counter++;
 } );

     $('#t tbody').on( 'click', 'tr', function () {
          t.row( this ).remove().draw();
      } );

} );

"add new row" works well, and exported (CSV/Execl) content is also correct. but when I click any added row, nothing happens and no row is removed.

When I open page souce code by "view -> source" (I use IE brower to test above files) and found no added rows in this source code. However, the browser displays the added rows. Why dose source code not match the browser display?

If removing a specific row can be done by clicking that row (like above js code), after row is deleted, does "CSV/Excel export" can correctly export table? (does exported content include deleted rows?)

glenderson

Your #t should be #example.

$('#example tbody').on( 'click', 'tr', function () {
         t.row( $(this) ).remove().draw();
     } );

When using IE development tools, don't view source, rather, inspect element to locate the item in the dom.