jquery - Datatables with modals for editing. Is it possible? -
jquery - Datatables with modals for editing. Is it possible? -
i have datatable (fetches info remote server), , in each cell have mouse-over link can pop-up modal (all links same). problem cannot pass row's unique id , cell's data. there method code can understand @ 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 { color: #333 !important; /* needed when demo_page.css included */ } ul.dttt_dropdown.dropdown-menu li:hover { background-color: #0088cc; color: white !important; } /* tabletools info 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 defaults 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 paging info */ $.fn.datatableext.oapi.fnpaginginfo = function(osettings) { homecoming { "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 command */ $.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 = 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; } ( = 0, ien = an.length; < ien; i++) { // remove middle elements $('li:gt(0)', an[i]).filter(':not(:last)').remove(); // add together new list items , event handlers ( 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 together / remove disabled classes 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 classes tabletools uses suitable 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 collection utilize 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 columns:" }, }); $("tfoot input").keyup(function() { /* filter on column (the index) of element */ otable.fnfilter(this.value, $("tfoot input").index(this)); }); /* * back upwards functions provide little bit of 'user friendlyness' textboxes in * 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 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> content </p> <input type="text" name="bookid" id="bookid" value=""/> </div> </div> <script src="../bootstrap/js/bootstrap.min.js"></script> </body> </html>
if run mouseover links onclick function calls rather straight links, can utilize $(this) within function grab object alerted click handler , utilize populate fields in modal and/or jquery/javascript variables. it's not elegant reply in world, should allow access/persist info need.
jquery twitter-bootstrap datatables modal-dialog
Comments
Post a Comment