0
내 Datatable에서 검색하려고하지만 respetive 검색 상자를 특정 위치에 배치하고 싶습니다. 나는 약간의 코드를 발견했다. 그래서 나는 그것을 바꿨다 (당신은 피들 벨로우즈에서 그것을 확인할 수있다). 기본적으로 나는 테이블 밖에 위치하는 4 개의 div를 가지며 각각은 특정 열을 검색하기위한 것입니다. 그러나, 나는 그것을 힘들게하려고 노력하고있다.데이터 테이블 검색 상자
도움이 필요하시면 대단히 감사하겠습니다.
여기는 JSFiddle입니다.
그리고 코드
:<div>
<label>Name:</label>
<input id="Name" type="text">
</div>
<div>
<label>Position:</label>
<input id="Position" type="text">
</div>
<div>
<label>Office:</label>
<input id="Office" type="text">
</div>
<div>
<label>Age:</label>
<input id="Age" type="text">
</div>
<br/>
<br/>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
자바 스크립트 :
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if(that.search() !== this.value) {
that.search(this.value).draw();
}
});
});
});
CSS :
이tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}