jquery - jQueryデータテーブルマウスオーバーセル

Question

私はこれを持っています：

<!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>

そして、クラス名が「ilhan」であるセル（2列目）にテキストを印刷するためにさまざまなことを試みましたが、失敗しました。単に 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>

score 0 · Accepted Answer

jQueryのon()機能を使ってみましたか？あなたが探しているものであるとは確信していませんが、ページが読み込まれた後に作成された要素にリスナーをアタッチできます。

ドキュメントのコードサンプルは次のとおりです。

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

ドキュメント: http://api.jquery.com/on/

bind()古いバージョンの jQuery を使用している場合は、、、delegate()またはlive()関数を使用する必要があることに注意してください。

jquery - jQueryデータテーブルマウスオーバーセル

1 に答える 1

Related

Reference