8253


下記ソースには、column-Name、column-
Positionの検索入力欄があり、それぞれの入力欄はそれぞれの対象列(NameとPosition)に対して検索を掛け、一致した行のみを描画します。  
ここで、  
この2つの検索欄を1つにし、この１つの検索欄で2つの列(NameとPosition)に対する検索(or検索)が出来るようにしたいのですが方法が分かりません。  
ご教授をお願いします。

[code]

    function filterColumn ( i ) {
        $('#example').DataTable().column( i ).search(
            $('#col'+i+'_filter').val()
        ).draw();
    }
     
    $(document).ready(function() {
        $('#example').dataTable();
     
        $('input.column_filter').on( 'keyup click', function () {
            filterColumn( $(this).parents('tr').attr('data-column') );
        } );
    } );
[/code]

[code]

    <link href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css" rel="stylesheet"/>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
    
    <table style="width: 67%; margin: 0 auto 2em auto;" border="0" cellpadding="3" cellspacing="0">
            <thead>
                <tr>
                    <th>Target</th>
                    <th>Search text</th>
                </tr>
            </thead>
     
            <tbody>
                <tr id="filter_col1" data-column="0">
                    <td>Column - Name</td>
                    <td align="center"><input class="column_filter" id="col0_filter" type="text"></td>
                </tr>
                <tr id="filter_col2" data-column="1">
                    <td>Column - Position</td>
                    <td align="center"><input class="column_filter" id="col1_filter" type="text"></td>
                </tr>
            </tbody>
        </table>
        <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>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                </tr>
            </tbody>
        </table>
[/code]


CC BY-SA 3.0
2015-03-23T04:01:16.403
8246
2015-03-24T12:48:26.337
2015-03-24T12:48:26.337
7626
7626
question
javascript html css
1つの検索欄で、2つの列に検索を掛けたい


質問内容から読み取れない要素がいくつかあるので、ご提示のコードからできるだけ改変せずにやってみます。  
こんな感じでいけませんか？

[code]

    //検索欄作成時
    $('input.column_filter').on('keyup click', function () {
        filterColumn(1);
        filterColumn(2);
    });
    
[/code]


CC BY-SA 3.0
2015-03-23T05:28:09.640
8253
2015-03-23T05:28:09.640
8078
8246
answer