JQuery控制DataTable搜索框

11-08 DEVOPS,PYTHON Eric Winn 3 views

JQuery控制DataTable搜索框

11-08 3 views

DataTable是个非常不错的插件，一个搜索框可以搜所有，有时也会想要多条件匹配

引入css,js

<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/plugins/datatables/datatables.min.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery-2.1.1.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/plugins/datatables/datatables.min.js' %}"></script>

在原有的datatable上再定义一个table,做为其它条件的搜索框

<div class="form-horizontal" id="a-search" style="display: none;">
    <div class="dataTables_filter">
        <table id="asset_search_table" style="width: 90%; margin: 0 auto 2em auto;" cellspacing="0"
               cellpadding="3" border="0">
            <tr>
                <td id="filter_colapt" data-column="apt">
                    <div class="form-group" style="margin-bottom: 0px;">
                        <div class="col-md-6" style="width: 100%;"><input
                                class="form-control column_filter"
                                placeholder="{% trans 'application' %}"
                                id="colapt_filter"
                                type="text">

                        </div>
                    </div>
                </td>
                <td width="10%"></td>
                <td id="filter_col6" data-column="6">
                    <div class="form-group" style="margin-bottom: 0px;">
                        <div class="col-md-6" style="width: 100%;">
                            <select class="select2 form-control column_filter" id="col6_filter">
                                <option value="">{% trans 'Select Environment' %}</option>
                                {% for e in env_list %}
                                    <option value="{{ e.code }}" {% if e == env %}
                                            selected {% endif %}>{{ e }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr style="height: 15px">
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="filter_col2" data-column="2">
                    <div class="form-group" style="margin-bottom: 0px;">
                        <div class="col-md-6" style="width: 100%;">
                            <select class="select2 form-control column_filter" id="col2_filter">
                                <option value="">{% trans 'Select Asset Type' %}</option>
                                {% for at in asset_type_list %}
                                    <option value="{{ at.code }}" {% if at == asset_type %}
                                            selected {% endif %}>{{ at }}</option>
                                {% endfor %}
                            </select>

                        </div>
                    </div>
                </td>
                <td width="10%"></td>
                <td>
                    <div class="form-group" style="margin-bottom: 0px;">
                        <div class="col-md-6" style="width: 100%;"><input name="toggle_search"
                                                                          class="form-control global_filter"
                                                                          placeholder="{% trans 'Search' %}"
                                                                          id="global_filter"
                                                                          type="text">

                        </div>
                    </div>
                </td>
            </tr>
            <tr style="height: 15px">
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>

<table id="asset_search_table" style="width: 90%; margin: 0 auto 2em auto;" cellspacing="0"

cellpadding="3" border="0">

<tr>

<div class="col-md-6" style="width: 100%;"><input

class="form-control column_filter"

placeholder="{% trans 'application' %}"

id="colapt_filter"

type="text">

</div>

</td>

<option value="">{% trans 'Select Environment' %}</option>

{% for e in env_list %}

<option value="{{ e.code }}" {% if e == env %}

selected {% endif %}>{{ e }}</option>

{% endfor %}

</select>

</div>

</td>

</tr>

</tr>

<tr>

<option value="">{% trans 'Select Asset Type' %}</option>

{% for at in asset_type_list %}

<option value="{{ at.code }}" {% if at == asset_type %}

selected {% endif %}>{{ at }}</option>

{% endfor %}

</select>

</div>

</td>

<td>

<div class="col-md-6" style="width: 100%;"><input name="toggle_search"

class="form-control global_filter"

placeholder="{% trans 'Search' %}"

id="global_filter"

type="text">

</div>

</td>

</tr>

</tr>

</table>

</div>

效果如下：

然后在底部JS部分添加对新定义的table 搜索框的操作

function filterGlobal() {
            $('#asset_list_table').DataTable().search(
                $('#global_filter').val()
            ).draw();
        }

        function filterColumn(i) {

            $('#asset_list_table').DataTable().column(i).search(
                $('#col' + i + '_filter').val()
            ).draw();

        }

        function toggle() {
            if (show === 1) {
                $("#a-search").show(500, function () {
                    $("#asset_list_table_filter").hide(500);
                    $("#toggle-icon").attr("class", "fa fa-angle-up fa-xs");
                    $('#global_filter').val("");
                });
                show = 0;
            } else {
                $("#a-search").hide(500, function () {
                    $("#toggle-icon").attr("class", "fa fa-angle-down fa-xs");
                    $("#asset_list_table_filter").show(500);

                    $('#col6_filter').val("");
                    $('#col2_filter').val("");
                    $('#colapt_filter').val("");
                    $('#global_filter').val("");


                });
                show = 1;
            }
        }

        $(document).ready(function () {
            initTable();
            $('#asset_list_table').DataTable();

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