html - bind modal to row click in datatable -
helo, have datatable contains data database. in each row there details button. want on button click open modal details of clicked rows. tried create instance of modals each row on page load slowing down website. there way populate modal according row id?
this table
<table id="tblmessagesdetail" class="table table table-hover table-striped table-condensed export-table" style="width: 100%;"> <thead> <tr> <th> @*@html.displaynamefor(model => model.smslist[0].smsmt.id)*@ @viewres.sharedstrings.smsid </th> <th> @*@html.displaynamefor(model => model.smslist[0].smsmt.account.project.customer.name)*@ @viewres.sharedstrings.customername </th> <th> @*@html.displaynamefor(model => model.smslist[0].smsmt.account.project.name)*@ @viewres.sharedstrings.projectname </th> <th> @*@html.displaynamefor(model => model.smslist[0].smsmt.account.login)*@ @viewres.sharedstrings.account </th> <th> @html.displaynamefor(model => model.smslist[0].msisdn) </th> <th> @*@html.displaynamefor(model => model.smslist[0].smsmt.smsstatus.value)*@ @viewres.sharedstrings.smsstatus </th> <th> @html.displaynamefor(model => model.smslist[0].smsmt.eventreason) </th> <th> @*@html.displaynamefor(model => model.smslist[0].senddate)*@ @viewres.sharedstrings.senddate </th> <th> @*@html.displaynamefor(model => model.smslist[0].smsmt.sentdate)*@ @viewres.sharedstrings.sentdate </th> <th> @html.displaynamefor(model => model.smslist[0].smsmt.ticket) </th> <th> @html.displaynamefor(model => model.smslist[0].extid) </th> <th> @html.displaynamefor(model => model.smslist[0].smsmtcontent.notificationlevel) </th> <th> @html.displaynamefor(model => model.smslist[0].smsmtcontent.oadc) </th> <th> @html.displaynamefor(model => model.smslist[0].smsmtcontent.message) </th> <th> </th> </tr> </thead> <tbody> @foreach (var item in model.smslist) { <tr> <td> @html.displayfor(modelitem => item.smsmt.id) </td> <td> @html.displayfor(modelitem => item.smsmt.account.project.customer.name) </td> <td> @html.displayfor(modelitem => item.smsmt.account.project.name) </td> <td> @html.displayfor(modelitem => item.smsmt.account.nmglogin) </td> <td> @html.displayfor(modelitem => item.msisdn) </td> <td> @html.displayfor(modelitem => item.smsmt.smsstatus.value) </td> <td> @html.displayfor(modelitem => item.smsmt.eventreason) </td> <td> @html.displayfor(modelitem => item.senddate) </td> <td> @html.displayfor(modelitem => item.smsmt.sentdate) </td> <td> @html.displayfor(modelitem => item.smsmt.ticket) </td> <td> @html.displayfor(modelitem => item.extid) </td> <td> @html.displayfor(modelitem => item.smsmtcontent.notificationlevel) </td> <td> @html.displayfor(modelitem => item.smsmtcontent.oadc) </td> <td> @html.displayfor(modelitem => item.smsmtcontent.message) </td> <!-- button trigger modal --> <td> @*@using (html.beginform("filldetailmodal", "statistics", formmethod.post)) {*@ <button id="btndetails" type="submit" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#mymodal-@item.smsmtid"> <i class="glyphicon glyphicon-th-list"></i> @viewres.sharedstrings.btndetails </button> </td> </tr> } </tbody> and modal
<div class="modal fade" draggable="true" id="mymodal-@item.smsmtid" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div id="modaldialog" draggable="true" class="modal-dialog" style="padding-bottom:0px"> <div class="modal-content"> <div class="modal-header" style="background-color: #428bca; color: white; "> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="mymodallabel"> message detail id: '@item.smsmtid' - ticket #@item.smsmt.ticket - project @item.smsmt.account.project.name </h4> </div> <div class="modal-body" style="padding: 0px;"> <table style="width:100%;" class="table table table-hover table-striped table-condensed export-table" border="0"> <tr> <td align="left"> <label>@viewres.sharedstrings.smsid</label> </td> <td> @html.displayfor(modelitem => item.smsmt.id) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.customername</label> </td> <td> @html.displayfor(modelitem => item.smsmt.account.project.customer.name) </td> </tr> <tr> <td align="left"> <label> @viewres.sharedstrings.projectname</label> </td> <td> @html.displayfor(modelitem => item.smsmt.account.project.name) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.account</label> </td> <td> @html.displayfor(modelitem => item.smsmt.account.nmglogin) </td> </tr> <tr> <td align="left"> <label> @html.displaynamefor(model => model.smslist[0].msisdn)</label> </td> <td> @html.displayfor(modelitem => item.msisdn) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.smsstatus</label> </td> <td> @html.displayfor(modelitem => item.smsmt.smsstatus.value) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.eventreason</label> </td> <td> @html.displayfor(modelitem => item.smsmt.eventreason) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.senddate</label> </td> <td> @html.displayfor(modelitem => item.senddate) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.sentdate</label> </td> <td> @html.displayfor(modelitem => item.smsmt.sentdate) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.ticketid</label> </td> <td> @html.displayfor(modelitem => item.smsmt.ticket) </td> </tr> <tr> <td align="left"> <label>@viewres.sharedstrings.externalid</label> </td> <td> @html.displayfor(modelitem => item.extid) </td> </tr> <tr> <td align="left"> <label style="width:160px;">@viewres.sharedstrings.notificationlevel</label> </td> <td> @html.displayfor(modelitem => item.smsmtcontent.notificationlevel) </td> </tr> <tr> <td align="left"> <label> @html.displaynamefor(model => model.smslist[0].smsmtcontent.oadc)</label> </td> <td> @html.displayfor(modelitem => item.smsmtcontent.oadc) </td> </tr> <tr> <td align="left"> <label>@html.displaynamefor(model => model.smslist[0].smsmtcontent.message)</label> </td> <td> @html.displayfor(modelitem => item.smsmtcontent.message) </td> </tr> <tr> <td align="left"> <label> @viewres.sharedstrings.binarymessage</label> </td> <td> @html.displayfor(modelitem => item.smsmtcontent.binary) </td> </tr> </table> </div> <div class="modal-footer" style="margin: 0px; padding: 9px 30px 10px;"> <button type="button" class="btn btn-default" data-dismiss="modal"> @viewres.sharedstrings.btnclose </button> </div> </div> </div> </div> how can pass value of row , link wuery on database extract appropriate data?
i appreciate can get
query data , put icons in last column using while loop. u can create table data , icons serve buttons view, delete or edit
while($row = $sql->fetch()){ $id = $row['id']; $company = $row['company_name']; $domain = $row['domain_name']; $industry = $row['industry_type']; $websitet = $row['website_type']; $websitep = $row['website_purpose']; $audience = $row['target_audience']; $web_pages = $row['web_pages']; $color = $row['color_scheme']; $style = $row['style']; $addons = $row['addons']; $url = $row['url_of_existing']; $like_dislike = $row['like_dislike_existing_website']; $sample = $row['sample_website']; echo '<tr><td>'.$id.'</td>'; echo '<td>'.$company.'</td>'; echo '<td>'.$domain.'</td>'; echo '<td>'.$industry.'</td>'; echo '<td><a href="#openmodal'.$id.'" data-toggle="modaldialog" data-target="#openmodal"><img src=img/view.png width=20px height=20px id="view"></a></td>'; echo '<td><a href="delete.php?id='.$id.'" onclick="return confirm(\'delete '.$id.'?\')"><img src="img/delete.png" width=20px height=20px name="delete"></a></td></tr>'; ?> the <a href...?id='.$id.'" part send id using method.. if dont know it.. pretty solve problem.
Comments
Post a Comment