Datatables를 사용하여 테이블 데이터와 함께 각 셀의 팝업을 표시하는 방법은 무엇입니까?
아래 스크립트 스크립트에서 각 셀에서 팝업을 표시하기 위해 경고와 함께 datatables 플러그인을 사용했지만 적절한 출력을 얻지 못합니까? 각 셀 내부에서 마우스 클릭이 완료되면 팝업 창에 각 셀 데이터를 표시하도록 스크립트를 어떻게 수정할 수 있습니까?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
</head>
<table border="1" align="center" id="example" class="display" width="100%">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>7</td>
<td>12</td>
</tr>
</tbody>
<script>
$(document).ready(function()
{
$('#example tbody').click( function () {
alert("test") ;
});
});
</script>
</table>
</html>중요 참고 사항 : 코드를 추가하기 전에 js && css를 페이지에 포함 시키십시오. js는 fiddle External Resources 섹션을 사용합니다.
클릭 기능을 클릭 기능으로 개선하십시오.
자바 스크립트 :
$(document).ready(function () {
var companyTable= $('#jobs').DataTable();
$('#jobs').on('click', 'tr', function () {
$("#company-full-name").val(companyTable.row(this).data()[1]);
$("#company-short-name").val(companyTable.row(this).data()[2]);
$('#DescModal').modal("show");
});
});
HTML :
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">On click row popup will get open </h3>
</div>
<table id="jobs" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Job Title</th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<!--Made it easier, so no more redundant copypasta in other pages-->
<tr>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>2</td>
<td>Administrative</td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>
<tr>
<td>3</td>
<td>Database Admini</td>
<td>Dynazzy</td>
<td>36.72</td>
<td>5082 Butterfield Ter</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>4</td>
<td>Quality Control</td>
<td>Realmix</td>
<td>23.48</td>
<td>598 Independence Cir</td>
<td>2015-02-19</td>
</tr>
<tr>
<td>5</td>
<td>Health Coach II</td>
<td>Linkbuzz</td>
<td>17.11</td>
<td>18 Donald Plaza</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>6</td>
<td>Biostatistician</td>
<td>Roomm</td>
<td>36.37</td>
<td>3 Almo Terrace</td>
<td>2015-02-16</td>
</tr>
<tr>
<td>7</td>
<td>Assistant Profe</td>
<td>Shufflester</td>
<td>29.43</td>
<td>640 Towne Terrace</td>
<td>2015-02-13</td>
</tr>
<tr>
<td>8</td>
<td>Analog Circuit</td>
<td>Tagcat</td>
<td>25.66</td>
<td>316 Claremont Road</td>
<td>2015-02-21</td>
</tr>
<tr>
<td>9</td>
<td>Structural Engi</td>
<td>Tagchat</td>
<td>35.55</td>
<td>809 Butterfield Park</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>10</td>
<td>Senior Develope</td>
<td>Browsecat</td>
<td>21.62</td>
<td>5 Sachs Court</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>11</td>
<td>Human Resources</td>
<td>Jaxbean</td>
<td>32.00</td>
<td>6 Corscot Street</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>12</td>
<td>Analyst Program</td>
<td>Jetpulse</td>
<td>28.13</td>
<td>30 Eggendart Place</td>
<td>2015-02-20</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="DescModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
<h3 class="modal-title">Job Requirements & Description</h3>
</div>
<div class="modal-body">
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">job title</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="50" id="company-full-name" name="companyFullName">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Company</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="30" id="company-short-name" name="companyShortName">
</div>
</div>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
CSS :
<style type="text/css" class="init"> body {
font-size: 140%;
}
</style>
데모 : https://jsfiddle.net/dipakthoke07/t53cyutt/42/
감사.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다