BootStrap 用法
阅读原文时间:2023年07月09日阅读:2

1 下载bootstrap组件

2  在jsp页面中加入bootstrap


   

3

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

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