File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <button id="add">Add</button> | 
      <button id="delete">Delete</button> <input id="delete-name" value="Airi">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>
​
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
( function( window, document, $, undefined ) {
    $( document ).on('init.dt', function(e, dtSettings) {
        console.log('settings',dtSettings);
        var newFunction = function(row, data, dataIndex){
            $(row).css('display','none');
            $(row).fadeIn('slow');
        };
        
        dtSettings.oApi._fnCallbackReg(dtSettings, 'aoRowCreatedCallback', newFunction, 'user');
    });
})( window, document, jQuery );
( function( window, document, $, undefined ) {
    $( document ).on('init.dt', function(e, settings) {
        var _Api        = new $.fn.dataTable.Api( settings );
        
        _api_registerPlural = function ( pluralName, singularName, val ) {
            _Api.register( pluralName, val );
​
            _Api.register( singularName, function () {
                var ret = val.apply( this, arguments );
​
                if ( ret === this ) {
                    // Returned item is the API instance that was passed in, return it
                    return this;
                }
                else if ( ret instanceof _Api ) {
                    // New API instance returned, want the value from the first item
                    // in the returned array for the singular result.
                    return ret.length ?
                        $.isArray( ret[0] ) ?
                            new _Api( ret.context, ret[0] ) : // Array results are 'enhanced'
                            ret[0] :
                        undefined;
                }
​
                // Non-API return - just fire it back
                return ret;
            } );
        };
​
​
        _api_registerPlural( 'rows().remove()', 'row().remove()', function () {
            console.log('REMOVING');
            var that = this;
​
            this.iterator( 'row', function ( settings, row, thatIdx ) {
                var data = settings.aoData;
​
                data.splice( row, 1 );
​
                // Update the _DT_RowIndex parameter on all rows in the table
                for ( var i=0, ien=data.length ; i<ien ; i++ ) {
                    if ( data[i].nTr !== null ) {
                        data[i].nTr._DT_RowIndex = i;
                    }
                }
​
                // Delete from the display arrays
                settings.oApi._fnDeleteIndex( settings.aiDisplayMaster, row );
                settings.oApi._fnDeleteIndex( settings.aiDisplay, row );
                settings.oApi._fnDeleteIndex( that[ thatIdx ], row, false ); // maintain local indexes
​
                // Check for an 'overflow' they case for displaying the table
                settings.oApi._fnLengthOverflow( settings );
            } );
​
            this.iterator( 'table', function ( settings ) {
                for ( var i=0, ien=settings.aoData.length ; i<ien ; i++ ) {
                    settings.aoData[i].idx = i;
                }
            } );
​
            return this;
        } );
        
    });
})( window, document, jQuery );
​
​
​
var dataSrc = [
    {
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
    {
      "first_name": "Angelica",
      "last_name": "Ramos",
      "position": "Chief Executive Officer (CEO)",
      "office": "London",
      "start_date": "9th Oct 09",
      "salary": "$1,200,000"
    }
];
$(document).ready( function () {
  var table = $('#example').DataTable({
    data: dataSrc,
    rowId: 'first_name',
    columns: [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ],
    createdRow: function( row, data, dataIndex ) {
       $(row).css('display','none');
       $(row).fadeIn('slow');
    }
  });
 
  $('#delete-old').click(function(){
    var name = $('#delete-name').val();
    var row = table.row('#'+name);
    var $row = $(row.node());
    
    $row.css('background-color', '#ff0000');
    $row.fadeOut( "slow", function() {
      row.remove().draw();
    });
  });
  
    $('#delete').click(function(){
    var name = $('#delete-name').val();
    var row = table.row('#'+name);
    row.remove().draw();
  });
  
  $('#add').click(function(){
 table.row.add({
      "first_name": "Ashton",
      "last_name": "Cox",
      "position": "Junior Technical Author",
      "office": "San Francisco",
      "start_date": "12th Jan 09",
      "salary": "$86,000"
    }).draw();   
  });
 
} );
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers