每列

时间:2017-05-05 14:36:18

标签: javascript jquery python datatables

我想修改DataTable中现有的“搜索”字段,以便按列进行搜索。 我找到了代码,其中搜索字段具有选择字段的下拉列表或每列搜索。

<div class="container">
	<div class="row">
		<div class="col-md-12">
            <div class="input-group" id="adv-search">
                <input type="text" class="form-control" placeholder="Search for snippets" />
                <div class="input-group-btn">
                    <div class="btn-group" role="group">
                        <div class="dropdown dropdown-lg">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                            <div class="dropdown-menu dropdown-menu-right" role="menu">
                                <form class="form-horizontal" role="form">
                                  <div class="form-group">
                                    <label for="filter">Filter by</label>
                                    <select class="form-control">
                                        <option value="0" selected>All Snippets</option>
                                        <option value="1">Column #1</option>
                                        <option value="2">Column #2</option>
                                        <option value="3">Column #3</option>
                                        <option value="4">Column #4</option>
                                    </select>
                                  </div>
                                  <div class="form-group">
                                    <label for="contain">Author</label>
                                    <input class="form-control" type="text" />
                                  </div>
                                  <div class="form-group">
                                    <label for="contain">Contains the words</label>
                                    <input class="form-control" type="text" />
                                  </div>
                                  <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                                </form>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                    </div>
                </div>
            </div>
          </div>
        </div>
	</div>
</div>

http://bootsnipp.com/snippets/featured/advanced-dropdown-search

但我不知道如何发送值,后端有什么可以保存过滤器

data.py

def data():
    datatables_request = parse_datatables_request(request.values)

    datatables_request_search = datatables_request.get("search", {})

    if datatables_request_search.strip():
        search_value = datatables_request_search["value"].strip()
        search_endpoints = set(normalize_endpoint(search_value))
    else:
        search_value = None
        search_endpoints = None

    base_query = InstallationSource.query.join(Workflow).outerjoin(RemoteRequest).filter(
        (Workflow.project_id == current_project.id) &
        (InstallationSource.vendor_name.isnot(None))
    )

    if search_value:
        base_search_condition = ((InstallationSource.software_name.ilike('%{}%'.format(search_value))) |
                                 (InstallationSource.vendor_name.ilike('%{}%'.format(search_value))) |
                                 (InstallationSource.version_name.ilike('%{}%'.format(search_value))) |
                                 (InstallationSource.language_name.ilike('%{}%'.format(search_value))) |
                                 (RemoteRequest.status.ilike('%{}%'.format(search_value))))

        base_query = base_query.filter(base_search_condition).all()

list.js

$(function () {

    var table = $("#portfolio").DataTable({
        "ajax": {
            "url": portfolio_data_url,
            "type": "POST"
        },

        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],

        "stateSave": true,
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "language": datatables_language,

        "order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],

        "columnDefs": [
            {
                "searchable": false,
                "orderable": false,
                "targets": "no-sort"
            }
        ]
    })
});

的index.html

{% block module_scripts %}
    <script type="application/javascript">
        var portfolio_data_url = "{{ url_for("data.data") }}";
    </script>
{% endblock %}

请帮助我!

0 个答案:

没有答案