根据所选项目搜索输入,其中选择框具有=或<等

时间:2018-02-03 06:25:15

标签: javascript jquery datatable jquery-plugins datatables

我正在使用一个dataTable,它有一个搜索框,用于列"年龄"从表中搜索数据及其工作正常,但我添加了一个" Drop Down"上面输入搜索框,现在我想要的是当我选择" ="如果列中的类型值匹配,搜索框应显示记录"年龄"如果我选择" < "如果列"搜索框应该显示记录年龄"项目的数量小于搜索框中输入的值,与select"相同> "或" Cantains"。

搜索框应根据所选项目工作。



<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>                


// <!-- data table default jason -->

function filterGlobal() {
  $('#example').DataTable().search(
    $('#global_filter').val(),
    $('#global_regex').prop('checked'),
    $('#global_smart').prop('checked')
  ).draw();
}

function filterColumn(i) {
  $('#example').DataTable().column(i).search(
    $('#col' + i + '_filter').val(),
    $('#col' + i + '_regex').prop('checked'),
    $('#col' + i + '_smart').prop('checked')
  ).draw();
}

$(document).ready(function () {
  //store the datatable object
  globDataTable = $('#example').DataTable();

  $('input.global_filter').on('keyup click', function () {
    filterGlobal();
  });

  $('input.column_filter').on('keyup click', function () {
    filterColumn($(this).parents('tr').attr('data-column'));
  });
});

// <!-- data table default jason end -->
&#13;
    <!-- search less than or greater than inputs -->
    <table>
        <tbody>
            <tr>
                <td>
                    Select to search:
                    <select id="selectAge">
                        <option value="1"> = </option>
                        <option value="1"> < </option>
                        <option value="1"> > </option>
                        <option value="1"> Contains </option>
                    </select>
                </td>
            </tr>
            <tr id="filter_col4" data-column="3">
                <td align="center" class="formcss" id="6">
                    input based on select :
                    <input type="text" class="column_filter" id="col3_filter">
                </td>
            </tr>
        </tbody>
    </table>
    <!-- search less than or greater than inputs -->

    <!-- table  -->
    <table id="example" class="display dataTableShow" border="1" 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>
        <tbody>

            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>50</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>80</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>20</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>10</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>60</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>30</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>10</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>20</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>30</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>40</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>50</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>60</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>70</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>80</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>90</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>100</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>

        </tbody>
    </table>  
&#13;
&#13;
&#13;

0 个答案:

没有答案