//tile
<section class="tile">

  //tile header
  <h1><strong>Basic</strong> Datatable </h1>
  <span class="note">including: <strong class="italic">multi-column sorting and row select</strong></span>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
  // /tile header

  //tile body
  <div class="tile-body nopadding color greensea">
                    
    <div class="table-responsive">
      <table  class="table table-datatable table-bordered" id="basicDataTable">
        
        <thead>
          <tr>
            <th class="sort-alpha">Rendering engine</th>
            <th class="sort-alpha">Browser</th>
            <th class="sort-amount">Platform(s)</th>
            <th class="sort-numeric">Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>

        <tbody>
          <tr class="odd gradeX">
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="text-center"> 4</td>
            <td class="text-center">X</td>
          </tr>
          <tr class="even gradeC">
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="text-center">5</td>
            <td class="text-center">C</td>
          </tr>

          ...
          
        </tbody>

      </table>
    </div>

  </div>
  // /tile body

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

// Add custom class to pagination div
$.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

/*************************************************/
/**************** BASIC DATATABLE ****************/
/*************************************************/

/* Define two custom functions (asc and desc) for string sorting */
jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};
 
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

/* Add a click handler to the rows - this could be used as a callback */
$("#basicDataTable tbody tr").click( function( e ) {
  if ( $(this).hasClass('row_selected') ) {
    $(this).removeClass('row_selected');
  }
  else {
    oTable01.$('tr.row_selected').removeClass('row_selected');
    $(this).addClass('row_selected');
  }

  // FadeIn/Out delete rows button
  if ($('#basicDataTable tr.row_selected').length > 0) {
    $('#deleteRow').stop().fadeIn(300);
  } else {
    $('#deleteRow').stop().fadeOut(300);
  }
});

/* Build the DataTable with third column using our custom sort functions */
var oTable01 = $('#basicDataTable').dataTable({
  "aaSorting": [ [0,'asc'], [1,'asc'] ],
  "aoColumns": [
      null,
      null,
      { "sType": 'string-case' },
      null,
      null
  ]
});

// Append delete button to table
var deleteRowLink = '<a href="#" id="deleteRow" class="btn btn-red btn-xs delete-row">Delete selected row</a>'
$('#basicDataTable_wrapper').append(deleteRowLink);

/* Add a click handler for the delete row */
$('#deleteRow').click( function() {
  var anSelected = fnGetSelected(oTable01);
  if (anSelected.length !== 0 ) {
    oTable01.fnDeleteRow(anSelected[0]);
    $('#deleteRow').stop().fadeOut(300);
  }
});

/* Get the rows which are currently selected */
function fnGetSelected(oTable01Local){
  return oTable01Local.$('tr.row_selected');
};

//initialize chosen
$('.dataTables_length select').chosen({disable_search_threshold: 10});

//tile
<section class="tile cornered">

  //tile header
  <div class="tile-header transparent">
    <h1><strong>Inline Editing</strong> Datatable </h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile body
  <div class="tile-body nopadding">
                    
    <div class="table-responsive">
      <table  class="table table-datatable table-bordered" id="inlineEditDataTable">
        <thead>
          <tr>
            <th class="sort-alpha">Rendering engine</th>
            <th class="sort-alpha">Browser</th>
            <th class="sort-amount">Platform(s)</th>
            <th class="sort-numeric">Engine version</th>
            <th>CSS grade</th>
            <th class="no-sort">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd gradeX">
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="text-center"> 4</td>
            <td class="text-center">X</td>
            <td class="actions text-center"><a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a></td>
          </tr>
          <tr class="even gradeC">
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="text-center">5</td>
            <td class="text-center">C</td>
            <td class="actions text-center"><a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a></td>
          </tr>
          <tr class="odd gradeA">
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="text-center">5.5</td>
            <td class="text-center">A</td>
            <td class="actions text-center"><a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a></td>
          </tr>
          <tr class="even gradeA">
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="text-center">6</td>
            <td class="text-center">A</td>
            <td class="actions text-center"><a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a></td>
          </tr>
          <tr class="odd gradeA">
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td class="text-center">7</td>
            <td class="text-center">A</td>
            <td class="actions text-center"><a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a></td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
  // /tile body

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

// Add custom class to pagination div
$.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

/*******************************************************/
/**************** INLINE EDIT DATATABLE ****************/
/*******************************************************/

function restoreRow (oTable02, nRow){
  var aData = oTable02.fnGetData(nRow);
  var jqTds = $('>td', nRow);
  
  for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) {
    oTable02.fnUpdate( aData[i], nRow, i, false );
  }
  
  oTable02.fnDraw();
};

function editRow (oTable02, nRow){
  var aData = oTable02.fnGetData(nRow);
  var jqTds = $('>td', nRow);
  jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">';
  jqTds[1].innerHTML = '<input type="text" value="'+aData[1]+'">';
  jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'">';
  jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">';
  jqTds[4].innerHTML = '<input type="text" value="'+aData[4]+'">';
  jqTds[5].innerHTML = '<a class="edit save" href="#">Save</a><a class="delete" href="#">Delete</a>';
};

function saveRow (oTable02, nRow){
  var jqInputs = $('input', nRow);
  oTable02.fnUpdate( jqInputs[0].value, nRow, 0, false );
  oTable02.fnUpdate( jqInputs[1].value, nRow, 1, false );
  oTable02.fnUpdate( jqInputs[2].value, nRow, 2, false );
  oTable02.fnUpdate( jqInputs[3].value, nRow, 3, false );
  oTable02.fnUpdate( jqInputs[4].value, nRow, 4, false );
  oTable02.fnUpdate( '<a class="edit" href="#">Edit</a><a class="delete" href="#">Delete</a>', nRow, 5, false );
  oTable02.fnDraw();
};



var oTable02 = $('#inlineEditDataTable').dataTable({
  "aoColumnDefs": [
    { 'bSortable': false, 'aTargets': [ "no-sort" ] }
  ],
});

// Append add row button to table
var addRowLink = '<a href="#" id="addRow" class="btn btn-green btn-xs add-row">Add row</a>'
$('#inlineEditDataTable_wrapper').append(addRowLink);

var nEditing = null;

// Add row initialize
$('#addRow').click( function (e) {
  e.preventDefault();

  // Only allow a new row when not currently editing
  if ( nEditing !== null ) {
    return;
  }
  
  var aiNew = oTable02.fnAddData([ '', '', '', '', '', '<a class="edit" href="">Edit</a>', '<a class="delete" href="">Delete</a>' ]);
  var nRow = oTable02.fnGetNodes(aiNew[0]);
  editRow(oTable02, nRow);
  nEditing = nRow;

  $(nRow).find('td:last-child').addClass('actions text-center');
});

// Delete row initialize
$(document).on( "click", "#inlineEditDataTable a.delete", function(e) {
  e.preventDefault();
  
  var nRow = $(this).parents('tr')[0];
  oTable02.fnDeleteRow( nRow );
});

// Edit row initialize
$(document).on( "click", "#inlineEditDataTable a.edit", function(e) {
  e.preventDefault();
   
  /* Get the row as a parent of the link that was clicked on */
  var nRow = $(this).parents('tr')[0];
   
  if (nEditing !== null && nEditing != nRow){
    /* A different row is being edited - the edit should be cancelled and this row edited */
    restoreRow(oTable02, nEditing);
    editRow(oTable02, nRow);
    nEditing = nRow;
  }
  else if (nEditing == nRow && this.innerHTML == "Save") {
    /* This row is being edited and should be saved */
    saveRow(oTable02, nEditing);
    nEditing = null;
  }
  else {
    /* No row currently being edited */
    editRow(oTable02, nRow);
    nEditing = nRow;
  }
});

//initialize chosen
$('.dataTables_length select').chosen({disable_search_threshold: 10});

//tile
<section class="tile cornered">

  //tile header
  <div class="tile-header transparent">
    <h1><strong>Drill-down rows</strong> Datatable </h1>
    <span class="note">including: <strong class="italic">col reorder with resize</strong></span>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile body
  <div class="tile-body nopadding">
                    
    <div class="table-responsive">
      <table  class="table table-datatable table-bordered" id="drillDownDataTable">
        <thead>
          <tr>
            <th class="no-sort"></th>
            <th class="sort-alpha">Rendering engine</th>
            <th class="sort-alpha">Browser</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>

  </div>
  // /tile body

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

// Add custom class to pagination div
$.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

/******************************************************/
/**************** DRILL DOWN DATATABLE ****************/
/******************************************************/

var anOpen = [];

var oTable03 = $('#drillDownDataTable').dataTable({
  "sDom":
    "R<'row'<'col-xs-6'l><'col-xs-6'f>r>"+
    "t"+
    "<'row'<'col-xs-4'i><'col-xs-4'p><'col-xs-4'>>",
  "aoColumnDefs": [
    { 'bSortable': false, 'aTargets': [ "no-sort" ] }
  ],
  "aaSorting": [[ 1, "asc" ]],
  "bProcessing": true,
  "sAjaxSource": "js/plugins/datatables/ajax/sources/objects.txt",
  "aoColumns": [
    {
      "mDataProp": null,
      "sClass": "control text-center",
      "sDefaultContent": '<a href="#"><i class="fa fa-plus-square"></i></a>'
    },
    { "mDataProp": "engine" },
    { "mDataProp": "browser" },
    { "mDataProp": "grade" }
  ]
});

$(document).on( 'click', '#drillDownDataTable td.control', function () {
  var nTr = this.parentNode;
  var i = $.inArray( nTr, anOpen );

  $(anOpen).each( function () {
    if ( this !== nTr ) {
      $('td.control', this).click();
    }
  });
  
  if ( i === -1 ) {
    $('i', this).removeClass().addClass('fa fa-minus-square red-text');
    $(this).parent().addClass('drilled');
    var nDetailsRow = oTable03.fnOpen( nTr, fnFormatDetails(oTable03, nTr), 'details' );
    $('div.innerDetails', nDetailsRow).slideDown();
    anOpen.push( nTr );
  }
  else {
    $('i', this).removeClass().addClass('fa fa-plus-square');
    $(this).parent().removeClass('drilled');
    $('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
      oTable03.fnClose( nTr );
      anOpen.splice( i, 1 );
    } );
  }

  return false;
});
 
function fnFormatDetails( oTable03, nTr ){
  var oData = oTable03.fnGetData( nTr );
  var sOut =
    '<div class="innerDetails">'+
      '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr><td>Rendering engine:</td><td>'+oData.engine+'</td></tr>'+
        '<tr><td>Browser:</td><td>'+oData.browser+'</td></tr>'+
        '<tr><td>Platform:</td><td>'+oData.platform+'</td></tr>'+
        '<tr><td>Version:</td><td>'+oData.version+'</td></tr>'+
        '<tr><td>Grade:</td><td>'+oData.grade+'</td></tr>'+
      '</table>'+
    '</div>';
  return sOut;
};

//initialize chosen
$('.dataTables_length select').chosen({disable_search_threshold: 10});

//tile
<section class="tile cornered">

  //tile header
  <div class="tile-header transparent">
    <h1><strong>Advanced</strong> Datatable </h1>
    <span class="note">including: <strong class="italic">TableTools and ColVis</strong></span>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile body
  <div class="tile-body nopadding">
                    
    <div class="table-responsive">
      <table  class="table table-datatable table-bordered" id="advancedDataTable">
        <thead>
          <tr>
            <th class="sort-alpha">Rendering engine</th>
            <th class="sort-alpha">Browser</th>
            <th class="sort-amount">Platform(s)</th>
            <th class="sort-numeric">Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd gradeX">
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="text-center"> 4</td>
            <td class="text-center">X</td>
          </tr>
          <tr class="even gradeC">
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="text-center">5</td>
            <td class="text-center">C</td>
          </tr>
          <tr class="odd gradeA">
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="text-center">5.5</td>
            <td class="text-center">A</td>
          </tr>
          <tr class="even gradeA">
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="text-center">6</td>
            <td class="text-center">A</td>
          </tr>
          <tr class="odd gradeA">
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td class="text-center">7</td>
            <td class="text-center">A</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
  // /tile body

</section>
// /tile

//****************************//
//*********** jquery *********//
//****************************//

// Add custom class to pagination div
$.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custom';

/****************************************************/
/**************** ADVANCED DATATABLE ****************/
/****************************************************/

var oTable04 = $('#advancedDataTable').dataTable({
  "sDom":
    "<'row nobottompadding'<'col-xs-6'T><'col-xs-6'C>r>"+
    "<'row'<'col-xs-6'l><'col-xs-6'f>r>"+
    "t"+
    "<'row'<'col-xs-4'i><'col-xs-4'p><'col-xs-4'>>",
  "oTableTools": {
    "sSwfPath": "js/plugins/datatables/tabletools/swf/copy_csv_xls_pdf.swf",
    "aButtons": [
      "copy",
      "print",
      {
        "sExtends":    "collection",
        "sButtonText": 'Save <span class="caret" />',
        "aButtons":    [ "csv", "xls", "pdf" ]
      }
    ]
  }
});

$('.ColVis_MasterButton').on('click', function(){
  $('.ColVis_collection').addClass('dropdown-menu');
  $('.ColVis_collection>li>label').addClass('btn btn-default');
});

//initialize chosen
$('.dataTables_length select').chosen({disable_search_threshold: 10});