BootStrap 用法

1 下载bootstrap组件

2  在jsp页面中加入bootstrap

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css ">

   <script type="text/javascript" src=js/bootstrap.min.js></script>
   <script type="text/javascript" src=js/bootstrap-paginator.min.js></script>

3 

  1. <script type='text/javascript'>      
  2.         var PAGESIZE = 10;  
  4.         var options = {    
  5.             currentPage: 1,  //当前页数  
  6.             totalPages: 10,  //总页数，这里只是暂时的，后头会根据查出来的条件进行更改  
  7.             size:"normal",    
  8.             alignment:"center",    
  9.             itemTexts: function (type, page, current) {    
  10.                 switch (type) {    
  11.                     case "first":    
  12.                         return "第一页";    
  13.                     case "prev":    
  14.                         return "前一页";    
  15.                     case "next":    
  16.                         return "后一页";    
  17.                     case "last":    
  18.                         return "最后页";    
  19.                     case "page":    
  20.                         return  page;    
  21.                 }                   
  22.             },    
  23.             onPageClicked: function (e, originalEvent, type, page) {    
  24.                 var userName = $("#textInput").val(); //取内容  
  25.                 buildTable(userName,page,PAGESIZE);//默认每页最多10条  
  26.             }    
  27.         }    
  28.   
  29.         //获取当前项目的路径  
  30.         var urlRootContext = (function () {  
  31.             var strPath = window.document.location.pathname;  
  32.             var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);  
  33.             return postPath;  
  34.         })();  
  35.           
  36.          
  37.         //生成表格  
  38.         function buildTable(userName,pageNumber,pageSize) {  
  39.              var url =  urlRootContext + "/list.do"; //请求的网址  
  40.              var reqParams = {'userName':userName, 'pageNumber':pageNumber,'pageSize':pageSize};//请求数据  
  41.              $(function () {     
  42.                   $.ajax({  
  43.                         type:"POST",  
  44.                         url:url,  
  45.                         data:reqParams,  
  46.                         async:false,  
  47.                         dataType:"json",  
  48.                         success: function(data){  
  49.                             if(data.isError == false) {  
  50.                            // options.totalPages = data.pages;  
  51.                         var newoptions = {    
  52.                         currentPage: 1,  //当前页数  
  53.                         totalPages: data.pages==0?1:data.pages,  //总页数  
  54.                         size:"normal",    
  55.                         alignment:"center",    
  56.                         itemTexts: function (type, page, current) {    
  57.                         switch (type) {    
  58.                             case "first":    
  59.                             return "第一页";    
  60.                             case "prev":    
  61.                             return "前一页";    
  62.                             case "next":    
  63.                             return "后一页";    
  64.                             case "last":    
  65.                             return "最后页";    
  66.                         case "page":    
  67.                         return  page;    
  68.                 }                   
  69.             },    
  70.             onPageClicked: function (e, originalEvent, type, page) {    
  71.                 var userName = $("#textInput").val(); //取内容  
  72.                 buildTable(userName,page,PAGESIZE);//默认每页最多10条  
  73.             }    
  74.          }                           
  75.          $('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新设置总页面数目  
  76.          var dataList = data.dataList;  
  77.          $("#tableBody").empty();//清空表格内容  
  78.          if (dataList.length > 0 ) {  
  79.              $(dataList).each(function(){//重新生成  
  80.                     $("#tableBody").append('<tr>');  
  81.                     $("#tableBody").append('<td>' + this.userId + '</td>');  
  82.                     $("#tableBody").append('<td>' + this.userName + '</td>');  
  83.                     $("#tableBody").append('<td>' + this.userPassword + '</td>');  
  84.                     $("#tableBody").append('<td>' + this.userEmail + '</td>');  
  85.                     $("#tableBody").append('</tr>');  
  86.                     });    
  87.                     } else {                                  
  88.                           $("#tableBody").append('<tr><th colspan ="4"><center>查询无数据</center></th></tr>');  
  89.                     }  
  90.                     }else{  
  91.                           alert(data.errorMsg);  
  92.                             }  
  93.                       },  
  94.                         error: function(e){  
  95.                            alert("查询失败:" + e);  
  96.                         }  
  97.                     });  
  98.                });  
  99.         }  
  100.           
  101.         //渲染完就执行  
  102.         $(function() {  
  103.               
  104.             //生成底部分页栏  
  105.             $('#bottomTab').bootstrapPaginator(options);       
  106.               
  107.             buildTable("",1,10);//默认空白查全部  
  108.               
  109.             //创建结算规则  
  110.             $("#queryButton").bind("click",function(){  
  111.                 var userName = $("#textInput").val();     
  112.                 buildTable(userName,1,PAGESIZE);  
  113.             });  
  114.         });  
  115.     </script>     

   总结 ： 其中ajax部分的是随内容不同更改的，其他都是可以随意套用

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/12344321hh/p/8464408.html