Q:

Datatables with modals for editing.  Is it possible? 

I have an DataTable (fetches the data from remote server), and in each cell I have mouse-over link which can pop-up a modal (all the links are same).  The problem is that I cannot pass the row's unique ID and the cell's data.  Is there any method where my code can understand at what row I'm clicking? 
<! 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: 6%
        }
        input {
            width: 80px;
        }
    </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" : "binaadi",
                        "aTargets" : [0]
                    }, {
                        "sClass" : "cihazlar",
                        "aTargets" : [2]
                    }, {
                        "sClass" : "veriyukle",
                        "aTargets" : [3]
                    }, {
                        "sClass" : "goruntule",
                        "aTargets" : [4]
                    }],

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

<script>
    jQuery(document).ready(function() {
        jQuery('#binalar').on('mouseenter', '.binaadi', function() {
            $(this).append($("<span style='font-size:80%;'> <a data-toggle='modal' data-id='001122' title='Add this item' class='open-AddBookDialog' href='#addBookDialog'>Düzenle</a> | <a href='#'>Sil</a></span>"));
        });
        jQuery('#binalar').on('mouseleave', '.binaadi', function() {
            $(this).find("span:last").remove();
        });
        jQuery('#binalar').on('mouseenter', '.cihazlar', function() {
            $(this).append($("<span style='font-size:80%;'> <a href='#'>Cihazlar</a></span>"));
        });
        jQuery('#binalar').on('mouseleave', '.cihazlar', function() {
            $(this).find("span:last").remove();
        });
        jQuery('#binalar').on('mouseenter', '.veriyukle', function() {
            $(this).append($("<span style='font-size:80%;'> <a href='#'>Veri Yükle</a></span>"));
        });
        jQuery('#binalar').on('mouseleave', '.veriyukle', function() {
            $(this).find("span:last").remove();
        });
        jQuery('#binalar').on('mouseenter', '.goruntule', function() {
            $(this).append($("<span style='font-size:80%;'> <a href='#'>Görüntüle</a></span>"));
        });
        jQuery('#binalar').on('mouseleave', '.goruntule', function() {
            $(this).find("span:last").remove();
        });
    }); 
</script>

<script>
    // modallar için

    jQuery(document).ready(function() {
        jQuery(document).on("click", ".open-AddBookDialog", function() {
            var myBookId = $(this).data('id');
            $(".modal-body #bookId").val(myBookId);
            $('#addBookDialog').modal('show');
        });

    }); 
</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>
        <!--  @formatter:on -->
                <h3 style="margin-bottom:-15px" class="alignright">+ Bina Ekleme</h3>       <!--  @formatter:off -->
    </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>Bina Yetkilisi</th>
                <th>Ölçüm Tipi</th>
                <th>Faturalama Periyodu</th>
                <th>Şehir</th>
                <th>Bölge</th>
                <th>Bina ID</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="7" class="dataTables_empty">Veriler sunucudan yükleniyor.</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <th>
                <input type="text" name="search_engine" value="Adı" class="search_init" />
                </th>
                <th>
                <input type="text" name="search_browser" value="Bina Yetkilisi" class="search_init" />
                </th>
                <th>
                <input type="text" name="search_engine" value="Ölçüm Tipi" class="search_init" />
                </th>
                <th>
                <input type="text" name="search_engine" value="Faturalama Periyodu" class="search_init" />
                </th>
                <th>
                <input type="text" name="search_engine" value="Şehir" class="search_init" />
                </th>
                <th>
                <input type="text" name="search_engine" value="Bölge" class="search_init" />
                </th>
                <th>
                <input type="text" name="search_engine" value="Bina ID" class="search_init" />
                </th>
            </tr>
        </tfoot>

    </table>

</div>

<div class="modal hide" id="addBookDialog">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">
            ×
        </button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>
            some content
        </p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

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

A:

If you run the mouseover links as onclick function calls rather than straight links, you can use $(this) inside the function to grab the object that alerted the click handler and then use that to populate fields in the modal and/or jquery/javascript variables.   It's not necessarily the most elegant answer in the world, but it should let you access/persist the information you need.