python測試開發django-185.bootstrap-table 後端搜尋功能實作（queryParams）

前言

bootstrap-table 分頁方式可以選 server 和client 兩種分頁方式。

• 當選擇前端分頁（client）的時候，可以在頁面搜尋table表格資料（不查詢資料庫）
• 當選擇伺服器分頁（server）的時候，根據可以queryParams屬性設定條件查詢資料庫

前面一篇已經寫過前端分頁，在前端頁面搜尋，隻需開啟search 搜尋輸入框即可實作https://www.cnblogs.com/yoyoketang/p/15752639.html

把搜尋參數傳到後端搜尋，是通過 queryParams 屬性實作的。

toolbar 添加搜尋框

在 toolbar 添加搜尋框和搜尋按鈕

<form id="toolbar" class="form-inline" role="form">
                    <button id="btn_add" type="button" class="btn btn-success">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增項目
                    </button>
                    <div class="form-group">
                        <input type="text" id="project_name" name="project_name" class="form-control"  placeholder="項目名稱">
                    </div>
                    <div class="form-group">
                        <input type="text" id="publish_app" name="publish_app" class="form-control"  placeholder="應用名稱">
                    </div>
                    <button type="button" id="search" class="btn btn-default btn-info">搜尋</button>
            </form>
            <table id="table" data-toolbar="#toolbar"></table>
           

頁面效果

queryParams 設定

設定 queryParams 屬性，params對象包含：limit, offset, search, sort, order, 可以自己添加搜尋參數

//得到查詢的參數，會在url後面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
        queryParams: function (params) {
            // params對象包含：limit, offset, search, sort, order
            //這裡的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
            var temp;
            temp = {
                page: (params.offset / params.limit) + 1,   //頁碼
                size: params.limit,   //頁面大小
                project_name: $('#toolbar #project_name').val(),
                publish_app: $('#toolbar #publish_app').val()
                //查詢框中的參數傳遞給背景
                //search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數
            };
            return temp;
        }
           

定義點選 search 按鈕時重新整理表格（點右側的重新整理按鈕實作效果也是一樣）

// 搜尋功能
$("#search").click(function(){
    // 重新整理表格
    $('#table').bootstrapTable('refresh');
})
           

點選搜尋送出後，會看到請求參數已經帶過去

後端根據傳過去的參數，查詢到結果傳回就可以實作搜尋功能了