title: jQuery datatables mouseover over cell
body: <p>I have this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="tr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link href="http://127.0.0.1/HCAWebApp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
      &lt;title&gt;Binalar&lt;/title&gt;
  
          &lt;style type="text/css" title="currentStyle"&gt;
              /* Twitter Bootstrap temalı tablo için */
  
              div.dataTables_length label {
                  float: left;
                  text-align: left;
              }
  
              div.dataTables_length select {
                  width: 75px;
              }
  
              div.dataTables_filter label {
                  float: right;
              }
  
              div.dataTables_info {
                  padding-top: 8px;
              }
  
              div.dataTables_paginate {
                  float: right;
                  margin: 0;
              }
  
              table.table {
                  clear: both;
                  margin-bottom: 6px !important;
                  max-width: none !important;
              }
  
              table.table thead .sorting, table.table thead .sorting_asc, table.table thead .sorting_desc, table.table thead .sorting_asc_disabled, table.table thead .sorting_desc_disabled {
                  cursor: pointer;
                  *cursor: hand;
              }
  
              table.table thead .sorting {
                  background: url('../images/sort_both.png') no-repeat center right;
              }
              table.table thead .sorting_asc {
                  background: url('../images/sort_asc.png') no-repeat center right;
              }
              table.table thead .sorting_desc {
                  background: url('../images/sort_desc.png') no-repeat center right;
              }
  
              table.table thead .sorting_asc_disabled {
                  background: url('../images/sort_asc_disabled.png') no-repeat center right;
              }
              table.table thead .sorting_desc_disabled {
                  background: url('../images/sort_desc_disabled.png') no-repeat center right;
              }
  
              table.dataTable th:active {
                  outline: none;
              }
  
              /* Scrolling */
              div.dataTables_scrollHead table {
                  margin-bottom: 0 !important;
                  border-bottom-left-radius: 0;
                  border-bottom-right-radius: 0;
              }
  
              div.dataTables_scrollHead table thead tr:last-child th:first-child, div.dataTables_scrollHead table thead tr:last-child td:first-child {
                  border-bottom-left-radius: 0 !important;
                  border-bottom-right-radius: 0 !important;
              }
  
              div.dataTables_scrollBody table {
                  border-top: none;
                  margin-bottom: 0 !important;
              }
  
              div.dataTables_scrollBody tbody tr:first-child th, div.dataTables_scrollBody tbody tr:first-child td {
                  border-top: none;
              }
  
              div.dataTables_scrollFoot table {
                  border-top: none;
              }
  
              /*
               * TableTools styles
               */
              .table tbody tr.active td, .table tbody tr.active th {
                  background-color: #08C;
                  color: white;
              }
  
              .table tbody tr.active:hover td, .table tbody tr.active:hover th {
                  background-color: #0075b0 !important;
              }
  
              .table-striped tbody tr.active:nth-child(odd) td, .table-striped tbody tr.active:nth-child(odd) th {
                  background-color: #017ebc;
              }
  
              table.DTTT_selectable tbody tr {
                  cursor: pointer;
                  *cursor: hand;
              }
  
              div.DTTT .btn {
                  color: #333 !important;
                  font-size: 12px;
              }
  
              div.DTTT .btn:hover {
                  text-decoration: none !important;
              }
  
              ul.DTTT_dropdown.dropdown-menu a {
                  color: #333 !important; /* needed only when demo_page.css is included */
              }
  
              ul.DTTT_dropdown.dropdown-menu li:hover a {
                  background-color: #0088cc;
                  color: white !important;
              }
  
              /* TableTools information display */
              div.DTTT_print_info.modal {
                  height: 150px;
                  margin-top: -75px;
                  text-align: center;
              }
  
              div.DTTT_print_info h6 {
                  font-weight: normal;
                  font-size: 28px;
                  line-height: 28px;
                  margin: 1em;
              }
  
              div.DTTT_print_info p {
                  font-size: 14px;
                  line-height: 20px;
              }
  
              /*
               * FixedColumns styles
               */
              div.DTFC_LeftHeadWrapper table, div.DTFC_LeftFootWrapper table, table.DTFC_Cloned tr.even {
                  background-color: white;
              }
  
              div.DTFC_LeftHeadWrapper table {
                  margin-bottom: 0 !important;
                  border-top-right-radius: 0 !important;
                  border-bottom-left-radius: 0 !important;
                  border-bottom-right-radius: 0 !important;
              }
  
              div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child, div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
                  border-bottom-left-radius: 0 !important;
                  border-bottom-right-radius: 0 !important;
              }
  
              div.DTFC_LeftBodyWrapper table {
                  border-top: none;
                  margin-bottom: 0 !important;
              }
  
              div.DTFC_LeftBodyWrapper tbody tr:first-child th, div.DTFC_LeftBodyWrapper tbody tr:first-child td {
                  border-top: none;
              }
  
              div.DTFC_LeftFootWrapper table {
                  border-top: none;
              }
  
          &lt;/style&gt;
  
  
  
      &lt;script src="http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" language="javascript" src="http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
  
  
      &lt;style&gt;
          body {
              padding: 15px 30px;
          }
          .alignleft {
              float: left;
              vertical-align: text-bottom;
          }
          .alignright {
              float: right;
              vertical-align: text-bottom;
          }
          td {
              width: 25%
          }
      &lt;/style&gt;
  
  
          &lt;script type="text/javascript" charset="utf-8"&gt;
              /* Set the defaults for DataTables initialisation */
              $.extend(true, $.fn.dataTable.defaults, {
                  "sDom" : "&lt;'row-fluid'&lt;'span6'l&gt;&lt;'span6'f&gt;r&gt;t&lt;'row-fluid'&lt;'span6'i&gt;&lt;'span6'p&gt;&gt;",
                  "sPaginationType" : "bootstrap",
                  "oLanguage" : {
                      "sLengthMenu" : "_MENU_ records per page"
                  }
              });
  
              /* Default class modification */
              $.extend($.fn.dataTableExt.oStdClasses, {
                  "sWrapper" : "dataTables_wrapper form-inline"
              });
  
              /* API method to get paging information */
              $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings) {
                  return {
                      "iStart" : oSettings._iDisplayStart,
                      "iEnd" : oSettings.fnDisplayEnd(),
                      "iLength" : oSettings._iDisplayLength,
                      "iTotal" : oSettings.fnRecordsTotal(),
                      "iFilteredTotal" : oSettings.fnRecordsDisplay(),
                      "iPage" : oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
                      "iTotalPages" : oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
                  };
              };
  
              /* Bootstrap style pagination control */
              $.extend($.fn.dataTableExt.oPagination, {
                  "bootstrap" : {
                      "fnInit" : function(oSettings, nPaging, fnDraw) {
                          var oLang = oSettings.oLanguage.oPaginate;
                          var fnClickHandler = function(e) {
                              e.preventDefault();
                              if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
                                  fnDraw(oSettings);
                              }
                          };
  
                          $(nPaging).addClass('pagination').append('&lt;ul&gt;' + '&lt;li class="prev disabled"&gt;&lt;a href="#"&gt;&amp;larr; ' + oLang.sPrevious + '&lt;/a&gt;&lt;/li&gt;' + '&lt;li class="next disabled"&gt;&lt;a href="#"&gt;' + oLang.sNext + ' &amp;rarr; &lt;/a&gt;&lt;/li&gt;' + '&lt;/ul&gt;');
                          var els = $('a', nPaging);
                          $(els[0]).bind('click.DT', {
                              action : "previous"
                          }, fnClickHandler);
                          $(els[1]).bind('click.DT', {
                              action : "next"
                          }, fnClickHandler);
                      },
  
                      "fnUpdate" : function(oSettings, fnDraw) {
                          var iListLength = 5;
                          var oPaging = oSettings.oInstance.fnPagingInfo();
                          var an = oSettings.aanFeatures.p;
                          var i, ien, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
  
                          if (oPaging.iTotalPages &lt; iListLength) {
                              iStart = 1;
                              iEnd = oPaging.iTotalPages;
                          } else if (oPaging.iPage &lt;= iHalf) {
                              iStart = 1;
                              iEnd = iListLength;
                          } else if (oPaging.iPage &gt;= (oPaging.iTotalPages - iHalf)) {
                              iStart = oPaging.iTotalPages - iListLength + 1;
                              iEnd = oPaging.iTotalPages;
                          } else {
                              iStart = oPaging.iPage - iHalf + 1;
                              iEnd = iStart + iListLength - 1;
                          }
  
                          for ( i = 0, ien = an.length; i &lt; ien; i++) {
                              // Remove the middle elements
                              $('li:gt(0)', an[i]).filter(':not(:last)').remove();
  
                              // Add the new list items and their event handlers
                              for ( j = iStart; j &lt;= iEnd; j++) {
                                  sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                                  $('&lt;li ' + sClass + '&gt;&lt;a href="#"&gt;' + j + '&lt;/a&gt;&lt;/li&gt;').insertBefore($('li:last', an[i])[0]).bind('click', function(e) {
                                      e.preventDefault();
                                      oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
                                      fnDraw(oSettings);
                                  });
                              }
  
                              // Add / remove disabled classes from the static elements
                              if (oPaging.iPage === 0) {
                                  $('li:first', an[i]).addClass('disabled');
                              } else {
                                  $('li:first', an[i]).removeClass('disabled');
                              }
  
                              if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
                                  $('li:last', an[i]).addClass('disabled');
                              } else {
                                  $('li:last', an[i]).removeClass('disabled');
                              }
                          }
                      }
                  }
              });
  
              /*
               * TableTools Bootstrap compatibility
               * Required TableTools 2.1+
               */
              if ($.fn.DataTable.TableTools) {
                  // Set the classes that TableTools uses to something suitable for Bootstrap
                  $.extend(true, $.fn.DataTable.TableTools.classes, {
                      "container" : "DTTT btn-group",
                      "buttons" : {
                          "normal" : "btn",
                          "disabled" : "disabled"
                      },
                      "collection" : {
                          "container" : "DTTT_dropdown dropdown-menu",
                          "buttons" : {
                              "normal" : "",
                              "disabled" : "disabled"
                          }
                      },
                      "print" : {
                          "info" : "DTTT_print_info modal"
                      },
                      "select" : {
                          "row" : "active"
                      }
                  });
  
                  // Have the collection use a bootstrap compatible dropdown
                  $.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
                      "collection" : {
                          "container" : "ul",
                          "button" : "li",
                          "liner" : "a"
                      }
                  });
              }
  
              /* Table initialisation */
              var asInitVals = new Array();
              $(document).ready(function() {
                  var oTable = $('#binalar').dataTable({
                      "sDom" : "&lt;'row-fluid'&lt;'span6'l&gt;&lt;'span6'f&gt;r&gt;t&lt;'row-fluid'&lt;'span6'i&gt;&lt;'span6'p&gt;&gt;",
                      "sPaginationType" : "bootstrap",
                      "sAjaxSource" : "../index.php/getbuildings",
  
                      "aoColumnDefs" : [{
                          "sClass" : "ilhan",
                          "aTargets" : [1]
                      }],
  
                      "oLanguage" : {
                          "sLengthMenu" : "_MENU_ records per page",
                          "sSearch" : "Search all columns:"
                      },
  
                  });
  
                  $("tfoot input").keyup(function() {
                      /* Filter on the column (the index) of this element */
                      oTable.fnFilter(this.value, $("tfoot input").index(this));
                  });
  
                  /*
                   * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
                   * the footer
                   */
                  $("tfoot input").each(function(i) {
                      asInitVals[i] = this.value;
                  });
  
                  $("tfoot input").focus(function() {
                      if (this.className == "search_init") {
                          this.className = "";
                          this.value = "";
                      }
                  });
  
                  $("tfoot input").blur(function(i) {
                      if (this.value == "") {
                          this.className = "search_init";
                          this.value = asInitVals[$("tfoot input").index(this)];
                      }
                  });
  
              });
  
          &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
                     &lt;div class="navbar"&gt;
                &lt;div class="navbar-inner"&gt;
                  &lt;div class="container"&gt;
                    &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;div class="nav-collapse collapse navbar-responsive-collapse"&gt;
                      &lt;ul class="nav"&gt;
                      &lt;li class='active'&gt;&lt;a href="binalar"&gt;Binalar&lt;/a&gt;&lt;/li&gt;
                      &lt;li &gt;&lt;a href="cihazlar"&gt;Cihazlar&lt;/a&gt;&lt;/li&gt;
                      &lt;li &gt;&lt;a href="kullanicilar"&gt;Kullanıcılar&lt;/a&gt;&lt;/li&gt;
                      &lt;li &gt;&lt;a href="gruplar"&gt;Gruplar&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
                      &lt;ul class="nav pull-right"&gt;
                        &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;test &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Veritronik&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Seller&lt;/a&gt;&lt;/li&gt;
                            &lt;li class="divider"&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="kullanicilar/logout"&gt;Çıkış&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
                  &lt;/div&gt;
                &lt;/div&gt;&lt;!-- /navbar-inner --&gt;
              &lt;/div&gt;&lt;!-- /navbar --&gt;&lt;div class='fdfg'&gt;
      &lt;div id="baslik"&gt;
          &lt;h1 style="margin-bottom:-15px" class="alignleft"&gt;Binalar&lt;/h1&gt;
          &lt;h3 style="margin-bottom:-15px" class="alignright"&gt;+ Bina Ekleme&lt;/h3&gt;   &lt;/div&gt;
      &lt;div style="clear: both;"&gt;&lt;/div&gt;
      &lt;hr&gt;
  
      &lt;table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="binalar"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Adı&lt;/th&gt;
                  &lt;th&gt;Ölçüm Tipi&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" class="dataTables_empty"&gt;Veriler sunucudan yükleniyor.&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
  
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                  &lt;input type="text" name="search_engine" value="Search engines" class="search_init" /&gt;
                  &lt;/th&gt;
                  &lt;th&gt;
                  &lt;input type="text" name="search_browser" value="Search browsers" class="search_init" /&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
  
      &lt;/table&gt;
  
  &lt;/div&gt;
  
  &lt;script src="../bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And I have tried variety of things to print a text in a cell (on second column) where the class name is "ilhan" but I was unsuccessful. Simply onmouseover does not fire. I think it is because the tabe is created very late. I have tried to put the on mouse over within the on ready but it didn't work too. What I have to do now?</p>
  
  <p>I'm trying to add this code:</p>
  
  <pre><code>&lt;script&gt;
      $(".ilhan").hover(
          function () {
              $(this).append($("&lt;span style='font-size:80%;'&gt; &lt;a href='#'&gt;Edit&lt;/a&gt; | &lt;a href='#'&gt;Delete&lt;/a&gt;&lt;/span&gt;"));
          },
          function () {
              $(this).find("span:last").remove();
          }
      );
      //li with fade class
      $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
  &lt;/script&gt;
  </code></pre>