Bootstrap Table從伺服器載入資料進行顯示的實現方法，bootstraptable

Bootstrap Table從伺服器載入資料進行顯示的實現方法，bootstraptable

Bootstrap-Table是一個Boostrap的表格外掛程式，能夠將JSON資料直接顯示在表格中。當然，這需要配置一些參數並進行初始化表格才行。其官方網站地址為：http://bootstrap-table.wenzhixin.net.cn/。裡面可以下載使用所需的JS和CSS檔案，以及參考文檔和例子。

        Bootstrap-Table顯示資料到表格的方式有兩種，一種是用戶端（client）模式，一種是伺服器（server）模式。

        所謂用戶端模式，指的是在伺服器中把要顯示到表格的資料一次性載入出來，然後轉換成JSON格式傳到要顯示的介面中，在JavaWeb中可以儲存在request中，然後轉寄到指定介面，在介面初始化的時候使用EL運算式擷取，然後調用相關初始化的函數，將JSON字串傳進去即可顯示。用戶端模式較為簡單，它是把資料一次性載入出來放到介面上，然後根據你設定的每頁記錄數，自動產生分頁。當點擊第二頁時，會自動載入出資料，不會再向伺服器發送請求。同時使用者可以使用其內建的搜尋功能，可以實現全資料搜尋。對於資料量較少的時候，可以使用這個方法。但是對於資料量大的系統，使用該方法會造成載入出一些很久之前的，使用者不在關注的資料，使得載入速度變慢，增加了伺服器的負擔，浪費了資源。這時應該採用伺服器模式。

        所謂伺服器模式，指的是根據設定的每頁記錄數和當前要顯示的頁碼，發送資料到伺服器進行查詢，然後再顯示到表格中。該方法可以根據使用者的需要動態載入資料，節省了伺服器的資源，但是不能使用其內建的全資料搜尋功能。因為你載入的資料只是一頁的資料，所以全資料搜尋的範圍也只在一頁之中。

       用戶端模式較為簡單，讀者可根據官方文檔和例子自行實踐。這裡主要介紹伺服器模式，並可以實現帶參數的查詢。

系統介面如：

        中是使用Bootstrap-Table實現的一個介面，並帶有一個輸入框和查詢按鈕。在輸入框中輸入單號，點擊查詢可以到後台進行查詢，再把查詢結果的資料顯示到表格中。由於資料庫中資料較少，為了看到效果，所以每頁設定顯示一條資料。
以下是前端介面代碼：

        首先引入相應的JS和CSS檔案。定義一個表格標籤，配置相關的boostrap-table屬性，在此省略了列的代碼。

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap-table.min.css" rel="stylesheet" type="text/css"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/plugins/bootstrap-table.min.js"></script> <script src="js/plugins/bootstrap-table-zh-CN.js"></script> <table class="table table-hover" id="cusTable"   data-pagination="true"   data-show-refresh="true"   data-show-toggle="true"   data-showColumns="true">   <thead>    <tr>                   <th data-field="sellRecordId" data-sortable="true">        銷售記錄id     </th>     <th data-field="srNumber" >        銷售單號     </th>     <!-- 在此省略表格列的代碼，代碼和上面差不多 -->     <th class="col-xs-2" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>     </tr>   </thead>   <tbody>   </tbody> </table> 

        以下是JavaScript代碼：定義了一個函數initTable()用於初始化表格。第7行method指定了請求的提交方式，我嘗試了設定為post提交，結果發現後端取不到查詢參數，不知道為什麼，所以使用get提交。第8行url設定你要提交請求的地址，這裡在JSP中使用了C標籤。第17行指定了服務端模式載入資料。第20行指定了查詢參數的類型，可以設定為undefined或limit，不同的設定可以在queryParams的函數中擷取不同的參數。第23-25行分別擷取了頁碼、每頁記錄數、查詢條件，作為查詢的參數返回。這裡只有一個條件，如果要多條件查詢的話，只需獲得多個條件即可。第40行在ready中調用函數擷取後端資料顯示在表格中。第43行為查詢按鈕綁定了一個單擊事件，當輸入單號並點擊查詢時執行。由於查詢是在第一次載入表格之後才有的動作，所以在第4行中要先調用bootstrap-table提供的函數銷毀表格，不然點擊查詢時無法到後台載入資料。

<script type="text/javascript">     function initTable() {   //先銷毀表格   $('#cusTable').bootstrapTable('destroy');   //初始化表格,動態從伺服器載入資料   $("#cusTable").bootstrapTable({    method: "get", //使用get請求到伺服器擷取資料    url: "<c:url value='/SellServlet?act=ajaxGetSellRecord'/>", //擷取資料的Servlet地址    striped: true, //表格顯示條紋    pagination: true, //啟動分頁    pageSize: 1, //每頁顯示的記錄數    pageNumber:1, //當前第幾頁    pageList: [5, 10, 15, 20, 25], //記錄數可選列表    search: false, //是否啟用查詢    showColumns: true, //顯示下拉框勾選要顯示的列    showRefresh: true, //顯示重新整理按鈕    sidePagination: "server", //表示服務端請求    //設定為undefined可以擷取pageNumber，pageSize，searchText，sortName，sortOrder    //設定為limit可以擷取limit, offset, search, sort, order    queryParamsType : "undefined",    queryParams: function queryParams(params) { //設定查詢參數     var param = {      pageNumber: params.pageNumber,      pageSize: params.pageSize,      orderNum : $("#orderNum").val()     };     return param;        },    onLoadSuccess: function(){ //載入成功時執行     layer.msg("載入成功");    },    onLoadError: function(){ //載入失敗時執行     layer.msg("載入資料失敗", {time : 1500, icon : 2});    }    });   }   $(document).ready(function () {      //調用函數，初始化表格    initTable();    //當點擊查詢按鈕的時候執行    $("#search").bind("click", initTable);   }); </script> 

後端servlet代碼：

        在servlet中擷取act參數後，調用如下代碼。然後調用service商務邏輯進行尋找，service中進行判斷，是否orderNum為空白字串，如果為空白則不帶orderNum參數查詢，如果不會空則要帶orderNum條件查詢。service中調用dao，dao中的函數也要根據orderNum參數是否為空白而產生不同的SQL語句和查詢參數。第23行將查詢的記錄轉成json字串，第25行得到滿足條件的總的記錄數。注意第28行設定了返回前端的json，這裡需要返回兩個參數，一個是total，表示總記錄數，一個是rows，表示表格式資料。

/**   * 根據頁碼和每頁記錄數，以及查詢條件動態載入銷售記錄   * @param request   * @param response   * @throws IOException   * @author lzx   */  private void ajaxGetSellRecord(HttpServletRequest request,    HttpServletResponse response) throws IOException {   response.setCharacterEncoding("utf-8");   PrintWriter pw = response.getWriter();   //得到用戶端傳遞的頁碼和每頁記錄數，並轉換成int類型   int pageSize = Integer.parseInt(request.getParameter("pageSize"));   int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));   String orderNum = request.getParameter("orderNum");   //分頁尋找商品銷售記錄，需判斷是否有帶查詢條件   List<SimsSellRecord> sellRecordList = null;   sellRecordList = sellRecordService.querySellRecordByPage(pageNumber, pageSize, orderNum);   //將商品銷售記錄轉換成json字串   String sellRecordJson = sellRecordService.getSellRecordJson(sellRecordList);   //得到總記錄數   int total = sellRecordService.countSellRecord(orderNum);   //需要返回的資料有總記錄數和行資料   String json = "{\"total\":" + total + ",\"rows\":" + sellRecordJson + "}";   pw.print(json);  } 

以上所述是小編給大家介紹的 Bootstrap Table從伺服器載入資料進行顯示的實現方法，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！