의 jQuery datatables 세포

<!doctype html> 
<html lang="tr"> 
<head> 
    <meta charset="utf-8"> 
    <link href="http://127.0.0.1/HCAWebApp/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <title>Binalar</title> 

     <style type="text/css" title="currentStyle"> 
      /* 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; 
      } 

     </style> 



    <script src="http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/js/jquery.js"></script> 
    <script type="text/javascript" language="javascript" src="http://127.0.0.1/HCAWebApp/DataTables-1.9.4/media/js/jquery.dataTables.js"></script> 



    <style> 
     body { 
      padding: 15px 30px; 
     } 
     .alignleft { 
      float: left; 
      vertical-align: text-bottom; 
     } 
     .alignright { 
      float: right; 
      vertical-align: text-bottom; 
     } 
     td { 
      width: 25% 
     } 
    </style> 


     <script type="text/javascript" charset="utf-8"> 
      /* Set the defaults for DataTables initialisation */ 
      $.extend(true, $.fn.dataTable.defaults, { 
       "sDom" : "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
       "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('<ul>' + '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' + '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' + '</ul>'); 
         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 < iListLength) { 
          iStart = 1; 
          iEnd = oPaging.iTotalPages; 
         } else if (oPaging.iPage <= iHalf) { 
          iStart = 1; 
          iEnd = iListLength; 
         } else if (oPaging.iPage >= (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 < 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 <= iEnd; j++) { 
           sClass = (j == oPaging.iPage + 1) ? 'class="active"' : ''; 
           $('<li ' + sClass + '><a href="#">' + j + '</a></li>').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" : "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
        "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)]; 
        } 
       }); 

      }); 

     </script> 
</head> 
<body> 
        <div class="navbar"> 
       <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </a> 
        <div class="nav-collapse collapse navbar-responsive-collapse"> 
        <ul class="nav"> 
        <li class='active'><a href="binalar">Binalar</a></li> 
        <li ><a href="cihazlar">Cihazlar</a></li> 
        <li ><a href="kullanicilar">Kullanıcılar</a></li> 
        <li ><a href="gruplar">Gruplar</a></li> 

        </ul> 
        <ul class="nav pull-right"> 
         <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">test <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Veritronik</a></li> 
          <li><a href="#">Seller</a></li> 
          <li class="divider"></li> 
          <li><a href="kullanicilar/logout">Çıkış</a></li> 
         </ul> 
         </li> 
        </ul> 
        </div><!-- /.nav-collapse --> 
       </div> 
       </div><!-- /navbar-inner --> 
      </div><!-- /navbar --><div class='fdfg'> 
    <div id="baslik"> 
     <h1 style="margin-bottom:-15px" class="alignleft">Binalar</h1> 
     <h3 style="margin-bottom:-15px" class="alignright">+ Bina Ekleme</h3> </div> 
    <div style="clear: both;"></div> 
    <hr> 

    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="binalar"> 
     <thead> 
      <tr> 
       <th>Adı</th> 
       <th>Ölçüm Tipi</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td colspan="2" class="dataTables_empty">Veriler sunucudan yükleniyor.</td> 
      </tr> 
     </tbody> 

     <tfoot> 
      <tr> 
       <th> 
       <input type="text" name="search_engine" value="Search engines" class="search_init" /> 
       </th> 
       <th> 
       <input type="text" name="search_browser" value="Search browsers" class="search_init" /> 
       </th> 
      </tr> 
     </tfoot> 

    </table> 

</div> 

<script src="../bootstrap/js/bootstrap.min.js"></script> 
</body> 
</html>

내가 클래스 이름이 "일한"하지만 난이 실패한 경우 (두 번째 열에서) 셀에 텍스트를 인쇄 할 일들의 다양한 시도 . onmouseover는 단순히 작동하지 않습니다. 나는 그것이 매우 늦게 만들어지기 때문이라고 생각합니다. 나는 위에 마우스를 올려 놓으려고 노력했지만 준비가 끝났습니다. 내가 지금해야 할 일은?

<script> 
    $(".ilhan").hover(
     function() { 
      $(this).append($("<span style='font-size:80%;'> <a href='#'>Edit</a> | <a href='#'>Delete</a></span>")); 
     }, 
     function() { 
      $(this).find("span:last").remove(); 
     } 
    ); 
    //li with fade class 
    $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);}); 
</script>

출처

2013-02-04 ilhan

비슷한 문제가 stackoverflow : jQuery DataTables mouseover issue인데, 이는 매우 유용 할 수 있습니다.

출처

2013-02-05 08:28:56

몇 분 전에 발견했지만 버그가 있습니다. – ilhan

당신이 jQuery의 on() 기능을 사용하여 시도 유무 :

는이 코드를 추가하기 위해 노력하고있어? 나는 그것이 당신이 찾고있는 것이 긍정적이지는 않지만, 페이지가로드 된 후에 생성 된 요소에 리스너를 첨부 할 수 있도록합니다.

가 여기에 문서에서 코드 샘플입니다 :

$("#dataTable tbody").on("click", "tr", function(event){ 
    alert($(this).text()); 
});

문서 : 당신이 jQuery를의 이전 버전을 사용하는 경우에는 bind(), delegate() 사용하려는거야 http://api.jquery.com/on/

를 적어 두십시오, 또는 live() 기능.

출처

2013-02-04 16:27:10

슬프게도 작동하지 않았습니다. – ilhan

의 jQuery datatables 세포

답변

관련 문제