데이터 필터 소스 문의 좀 드립니다.

데이터 필터 소스 문의 좀 드립니다.

QA

데이터 필터 소스 문의 좀 드립니다.

본문

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

 

해보니 잘 나오네요

 넑은마인드님!  답변  정말 감사합니다.  

 

근데  한가지 더 질문을 드리면 안될까요?    

 

수정중인 소스인데   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 로 해야 하는지에 대해서 생각해보시고다른 방향으로 처리를 해보시기 바랍니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 10,639
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT