參考：https://jalena.bcsytv.com/archives/tag/bootstrap
背景：
bootstrap table在客戶端分頁方式下，自帶有簡易的搜索功能，但是功能太單一，需要定制化組合搜索
前端：
注意前端的加大加粗的部分，就是為了自定義查詢新增的
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>項目列表</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> </head> <body> {# 自定義搜索條件區域#} <div> <input id="search-keyword" placeholder="請輸入編號查詢"> <button id="search-button">查詢</button> </div> {# bootstrap table自動渲染區域#} <table id="mytab" class="table table-hover"></table> </body><script type="text/javascript"> $('#mytab').bootstrapTable({ {#全部參數#} {#url: "{% static 'guchen_obj.json' %}", //請求后台的URL（*）或者外部json文件，json內容若為json數組[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，#} //且鍵的名字必須與下方columns的field值一樣，同時sidePagination需要設置為client或者直接注釋掉，這樣前台才能讀取到數據，且分頁正常。 //當json文件內容為json對象時：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}， //分頁要寫為server，但是server如果沒有處理的話,會在第一頁顯示所有的數據，分頁插件不會起作用 url:"/getdata", //從后台獲取數據時，可以是json數組，也可以是json對象 dataType: "json", method: 'get', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 {#queryParams: oTableInit.queryParams,//傳遞參數（*）#} {#sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）,數據為json數組時寫client，json對象時（有total和rows時）這里要為server方式，寫client列表無數據#} pageNumber: 1, //初始化加載第一頁，默認第一頁 pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大 strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點擊選中行 {#height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度#} uniqueId: "ID", //每一行的唯一標識，一般為主鍵列 showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 //得到查詢的參數 queryParams: function (params) { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 var query_params = { rows: params.limit, //頁面大小 page: (params.offset / params.limit) + 1, //頁碼 sort: params.sort, //排序列名 sortOrder: params.order, //排位命令（desc，asc） //查詢框中的參數傳遞給后台 search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數 }; return query_params; }, columns: [ { checkbox:true //第一列顯示復選框 }, { field: 'id', //返回數據rows數組中的每個字典的鍵名與此處的field值要保持一致 title: '構建序號' }, { field: 'name', title: '用例總數' }, { field: 'price', title: '通過率' }, { field: 'operate', title: '操作', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ], }); //操作欄的格式化 function actionFormatter(value, row, index) { var id = value; var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>"; return result; } // 搜索查詢按鈕觸發事件 $(function() { $("#search-button").click(function () { $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！ $('#search-keyword').val() }) }) </script> </html>
F12抓包：可以看到搜索的關鍵詞“ABC”已經作為參數發送到服務端了，下來只要服務端接收該參數，並查詢對應sql返回
后端：
def getdata(request): # 接收url傳遞來的search_kw參數值 search_kw = request.GET.get('search_kw') print 'search_kw的值為：%s' % search_kw db = pymysql.connect("192.168.207.160", "root", "123qwe!@#", "autotest", charset='utf8') cursor = db.cursor() rows = [] # 根據是否存在搜索關鍵字執行不同sql,用來返回符合條件的數據 if search_kw: saasCount = "select id,total,succ,fail,percent from saas where id like '%%%s%%'" % search_kw else: saasCount = "select id,total,succ,fail,percent from saas" cursor.execute(saasCount) saas_results = cursor.fetchall() print list(saas_results) for i in list(saas_results): print i # 將數組中的每個元素提取出來拼接為rows的內容 rows.append({"id": i[0], "name": i[1], "price": i[4]}) print rows # rows返回為json數組 return HttpResponse(json.dumps(rows))
頁面：
首次進入菜單，由於search_kw為空，所以顯示全部數據
當關鍵詞為36時，模糊搜索
