日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

1，動態(tài)表格

成都創(chuàng)新互聯(lián)公司主營孟州網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,成都APP應用開發(fā),孟州h5小程序定制開發(fā)搭建,孟州網(wǎng)站營銷推廣歡迎孟州等地區(qū)企業(yè)咨詢

    Bootstrap-Table顯示數(shù)據(jù)到表格的方式有兩種，一種是客戶端（client）模式，一種是服務器（server）模式。

        所謂客戶端模式，指的是在服務器中把要顯示到表格的數(shù)據(jù)一次性加載出來，然后轉(zhuǎn)換成JSON格式傳到要顯示的界面中，在JavaWeb中可以保存在request中，然后轉(zhuǎn)發(fā)到指定界面，在界面初始化的時候使用EL表達式獲取，然后調(diào)用相關初始化的函數(shù)，將JSON字符串傳進去即可顯示。客戶端模式較為簡單，它是把數(shù)據(jù)一次性加載出來放到界面上，然后根據(jù)你設置的每頁記錄數(shù)，自動生成分頁。當點擊第二頁時，會自動加載出數(shù)據(jù)，不會再向服務器發(fā)送請求。同時用戶可以使用其自帶的搜索功能，可以實現(xiàn)全數(shù)據(jù)搜索。對于數(shù)據(jù)量較少的時候，可以使用這個方法。但是對于數(shù)據(jù)量大的系統(tǒng)，使用該方法會造成加載出一些很久之前的，用戶不在關注的數(shù)據(jù)，使得加載速度變慢，增加了服務器的負擔，浪費了資源。這時應該采用服務器模式。

        所謂服務器模式，指的是根據(jù)設定的每頁記錄數(shù)和當前要顯示的頁碼，發(fā)送數(shù)據(jù)到服務器進行查詢，然后再顯示到表格中。該方法可以根據(jù)用戶的需要動態(tài)的加載數(shù)據(jù)，節(jié)省了服務器的資源，但是不能使用其自帶的全數(shù)據(jù)搜索功能。因為你加載的數(shù)據(jù)只是一頁的數(shù)據(jù)，所以全數(shù)據(jù)搜索的范圍也只在一頁之中。

        上圖中是使用Bootstrap-Table實現(xiàn)的一個界面，并帶有一個輸入框和查詢按鈕。在輸入框中輸入單號，點擊查詢可以到后臺進行查詢，再把查詢結(jié)果的數(shù)據(jù)顯示到表格中。由于數(shù)據(jù)庫中數(shù)據(jù)較少，為了看到效果，所以每頁設置顯示一條數(shù)據(jù)。

以下是前端界面代碼：

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

1.   

2.   

3.   

4.   

5.   

6.    

7.   

9.        data-pagination="true"  

10.        data-show-refresh="true"  

11.        data-show-toggle="true"  

12.        data-showColumns="true">  

13.          

14.                                                                      

15.                 

16.                            銷售記錄id  

17.                 

18.                 

19.                            銷售單號  

20.                 

21.                 

22.               Action     

23.             

24.          

25.          

26.          

27.   

        以下是javascript代碼：定義了一個函數(shù)initTable()用于初始化表格。第7行method指定了請求的提交方式，我嘗試了設置為post提交，結(jié)果發(fā)現(xiàn)后端取不到查詢參數(shù)，不知道為什么，所以使用get提交。第8行url設置你要提交請求的地址，這里在JSP中使用了C標簽。第17行指定了服務端模式加載數(shù)據(jù)。第20行指定了查詢參數(shù)的類型，可以設置為undefined或limit，不同的設置可以在queryParams的函數(shù)中獲取不同的參數(shù)。第23-25行分別獲取了頁碼、每頁記錄數(shù)、查詢條件，作為查詢的參數(shù)返回。這里只有一個條件，如果要多條件查詢的話，只需獲得多個條件即可。第40行在ready中調(diào)用函數(shù)獲取后端數(shù)據(jù)顯示在表格中。第43行為查詢按鈕綁定了一個單擊事件，當輸入單號并點擊查詢時執(zhí)行。由于查詢是在第一次加載表格之后才有的動作，所以在第4行中要先調(diào)用bootstrap-table提供的函數(shù)銷毀表格，不然點擊查詢時無法到后臺加載數(shù)據(jù)。

后端servlet代碼：

        在servlet中獲取act參數(shù)后，調(diào)用如下代碼。然后調(diào)用service業(yè)務邏輯進行查找，service中進行判斷，是否orderNum為空字符串，如果為空則不帶orderNum參數(shù)查詢，如果不會空則要帶orderNum條件查詢。service中調(diào)用dao，dao中的函數(shù)也要根據(jù)orderNum參數(shù)是否為空而生成不同的SQL語句和查詢參數(shù)。第23行將查詢的記錄轉(zhuǎn)成json字符串，第25行得到滿足條件的總的記錄數(shù)。注意第28行設置了返回前端的json，這里需要返回兩個參數(shù)，一個是total，表示總記錄數(shù)，一個是rows，表示表格數(shù)據(jù)。

1. /** 

2.      * 根據(jù)頁碼和每頁記錄數(shù)，以及查詢條件動態(tài)加載銷售記錄 

3.      * @param request 

4.      * @param response 

5.      * @throws IOException 

6.      * @author lzx 

7.      */  

8.     private void ajaxGetSellRecord(HttpServletRequest request,  

9.             HttpServletResponse response) throws IOException {  

10.         response.setCharacterEncoding("utf-8");  

11.         PrintWriter pw = response.getWriter();  

12.           

13.         //得到客戶端傳遞的頁碼和每頁記錄數(shù)，并轉(zhuǎn)換成int類型  

14.         int pageSize = Integer.parseInt(request.getParameter("pageSize"));  

15.         int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));  

16.         String orderNum = request.getParameter("orderNum");  

17.           

18.         //分頁查找商品銷售記錄，需判斷是否有帶查詢條件  

19.         List sellRecordList = null;  

20.         sellRecordList = sellRecordService.querySellRecordByPage(pageNumber, pageSize, orderNum);  

21.           

22.         //將商品銷售記錄轉(zhuǎn)換成json字符串  

23.         String sellRecordJson = sellRecordService.getSellRecordJson(sellRecordList);  

24.         //得到總記錄數(shù)  

25.         int total = sellRecordService.countSellRecord(orderNum);  

26.           

27.         //需要返回的數(shù)據(jù)有總記錄數(shù)和行數(shù)據(jù)  

28.         String json = "{\"total\":" + total + ",\"rows\":" + sellRecordJson + "}";  

29.         pw.print(json);  

30.     } 

bootstrap 模態(tài)框動態(tài)加載數(shù)據(jù)

1.頁面中添加modal 



   
      //內(nèi)容動態(tài)填充