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

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