데이터 필터 소스 문의 좀 드립니다.
본문
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
해당 사이트 처럼 구현 좀 하고 싶습니다.
근데 해당 사이트 소스에 있는 내용을 합쳐도 자료가 나오지 않네요 에휴
상기 사이트 소스 합치는 방법 좀 할수 있는까요? 자바스크립트 + html +css
부탁 좀 드립니다.
답변 6
소스 그대로 갔다 쓰시고
css 랑 js 를
<script src="//code.jquery.com/jquery.min.js"></script>
<script async src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script async src="//cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
이걸로 넣어보세요
https://lottogroup.kr/table.php
해보니 잘 나오네요
$(cell).html('<input type="text" placeholder="' + title + '" />');
이부분을
$(cell).html('<select .... ');
형태로 변경하시면 됩니다
넑은마인드님! 답변 정말 감사합니다.
근데 한가지 더 질문을 드리면 안될까요?
수정중인 소스인데 input 형식의 키워드를 select 항목으로 변경 좀 하고 싶은데
도대체 어디를 손 대어야 할지 에휴
소스
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Column filtering</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=94461d89946ef749b7a43d14685c725d1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css">
<style type="text/css" class="init">
thead input {
width: 100%;
}
</style>
<script type="text/javascript" src="/media/js/site.js?_=0c32e5cdbe9b575086edb0b907646184"></script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=extensions%2Ffixedheader%2Fexamples%2Foptions%2FcolumnFiltering.html" async></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Column filtering</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=94461d89946ef749b7a43d14685c725d1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css">
<style type="text/css" class="init">
thead input {
width: 100%;
}
</style>
<script type="text/javascript" src="/media/js/site.js?_=0c32e5cdbe9b575086edb0b907646184"></script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=extensions%2Ffixedheader%2Fexamples%2Foptions%2FcolumnFiltering.html" async></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
});
</script>
</head>
<table class="display"String id="example"String style="width: 100%;"String>
<thead>
<tr>
<th>도</th>
<th>시군</th>
<th>동명</th>
<th>마트명</th>
<th>과일종류</th>
<th>비용</th>
</tr>
</thead>
<tbody>
<tr>
<td>서울</td>
<td>서초구</td>
<td>서초1동</td>
<td>싸다마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
<tr>
<td>서울</td>
<td>서초구</td>
<td>서초2동</td>
<td>빠른마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
<tr>
<td>서울</td>
<td>동작구</td>
<td>동작2동</td>
<td>빠른마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
<tr>
<td>서울</td>
<td>동작구</td>
<td>동작1동</td>
<td>빠른마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통1동</td>
<td>빠른마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통2동</td>
<td>빠른마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통1동</td>
<td>싸다마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통1동</td>
<td>싸다마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
</table>
답변 감사드립니다.
아무리 해도 답을 못 찾아서요.. 에휴
select 문을
$(cell).html('<select name="title" > <OPTION > '+ title + '</OPTION></SELECT>');
이렇게 해 봐도 안되고 어디가 문제인지 조언 좀 부탁 드립니다.
해당 소스를 잠시 봤는데 위 테이블에서 필터링 부분(현재 textbox) 을 select 로 변경하기 위해서는
모든 데이터를 option 에 넣어야 되서 아주 비효율적이 됩니다.
따라서 필터링은 지금 처럼 textbox 에 입력하는 형태로 가야 되고요
왜 selectbox 로 해야 하는지에 대해서 생각해보시고다른 방향으로 처리를 해보시기 바랍니다.
감사합니다 다른방법으로 생각해 볼께요 다시함더감사 드립니다
채택
