Bootstrap Table query implementation

For a table with complete functions and good user experience, the query function is indispensable, because the amount of data in the table may sometimes be quite large. At this time, if you need to find a specific data , that will be a very huge workload. Below we will introduce to you how to use the bootstrap table plug-in to implement the query function.

Recommended tutorial: Bootstrap video tutorial

Implementation query ideas:

1. Define a Toolbar on the left side of the page that contains buttons for create, save and create

2. Define a QueryForm on the right side of the page that includes query conditions and query clear buttons

3. Define a Table

The implementation effect is as follows:

The code is as follows

<div class="container-fluid">

    <div>
        <div id="toolbar-btn" class="btn-group pull-left" style="padding-bottom:10px;">
            <button id="btn_add" οnclick="createFunction()" type="button" class="btn btn-primary btn-space">
                <span class="fa fa-plus-square" aria-hidden="true" class="btn-icon-space"></span>
                <@spring.message "fnd.new"/>
            </button>
            <button id="btn_save" οnclick="saveFunction()" type="button" class="btn btn-success btn-space">
                <span class="fa fa-save" aria-hidden="true" class="btn-icon-space"></span>
                <@spring.message "fnd.save"/>
            </button>
            <button id="btn_delete" οnclick="deleteFunction()" type="button" class="btn btn-danger btn-space">
                <span class="fa fa-trash-o" aria-hidden="true" class="btn-icon-space"></span>
                <@spring.message "fnd.delete"/>
            </button>
        </div>

        <div class="pull-right" id="query-form" style="padding-bottom:10px;">
            <input name="lookupType" placeholder=&#39;<@spring.message "fnd.lookup_type"/>&#39; type="text"
                   style="float:left;width:150px;margin-right:5px;" v-model="lookupType"
                   class="form-control">
            <div style="float:left;margin-right:5px;">
                <input name="description" placeholder=&#39;<@spring.message "fnd.description"/>&#39; type="text"
                       style="float:left;width:150px;margin-right:5px;" v-model="description"
                       class="form-control">
            </div>

            <div class="btn-group">
                <button id="btn_search" οnclick="customSearch()" type="button" class="btn btn-primary btn-space">
                    <span class="fa fa-search" aria-hidden="true" class="btn-icon-space"></span>
                    <@spring.message "fnd.query"/>
                </button>
                <button id="btn_reset" οnclick="resetSearch()" type="button" class="btn btn-default btn-space">
                    <span class="fa fa-eraser" aria-hidden="true" class="btn-icon-space"></span>
                    <@spring.message "fnd.reset"/>
                </button>
            </div>

        </div>
    </div>


    <table id="table" class="table  table-condensed table-striped"></table>

</div>

Query function implementation

Implementation idea: get all the objects in the query block and dynamically store them in the parameters returned by the query

Note:

When the query has no value, it cannot Put it into the query parameters, otherwise the data will be queried as empty, resulting in the inability to query the data

function queryParams(params) {
    var param = {};
    $('#query-form').find('[name]').each(function () {
        var value = $(this).val();
        if (value != '') {
            param[$(this).attr('name')] = value;
        }
    });

    param['pageSize'] = params.limit;   //页面大小
    param['pageNumber'] = params.offset;   //页码

    return param;
}

function customSearch(text) {
    $table.bootstrapTable('refresh');//刷新Table，Bootstrap Table 会自动执行重新查询
}

Reset function implementation

Implementation idea: loop Get the query-form control and set its value to blank

function resetSearch() {
    $('#query-form').find('[name]').each(function () {
        $(this).val('');
    });
}

The above is the detailed content of Bootstrap Table query implementation. For more information, please follow other related articles on the PHP Chinese website!