목록으로

소스에 있는 input 으로 입력받는 값을 그룹화 하여 select 항목 변경 채택완료

너유

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전 조회 2,284

답변 3

소스에 있는 input 으로 입력받는 값을 그룹화 하여 select 항목 변경 하고 싶습니다.

고수님들의 조언 좀 부탁 드립니다.

※ 도 | 시군 | 동명 | 분류1| 현재 input 키워드로 입력 받는 값을 그룹화 하여 select 항목으로 변경

input 키워드 -> select 박스 그룹화

Copy

<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>