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="#">← ' + oLang.sPrevious + '</a></li>' + '<li class="next disabled"><a href="#">' + oLang.sNext + ' → </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>
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.