BootStrap 用法

1 下载bootstrap组件

2 在jsp页面中加入bootstrap

<script type='text/javascript'>
var PAGESIZE = 10;
var options = {
currentPage: 1, //当前页数
totalPages: 10, //总页数，这里只是暂时的，后头会根据查出来的条件进行更改
size:"normal",
alignment:"center",
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "第一页";
case "prev":
return "前一页";
case "next":
return "后一页";
case "last":
return "最后页";
case "page":
return page;
}
},
onPageClicked: function (e, originalEvent, type, page) {
var userName = $("#textInput").val(); //取内容
buildTable(userName,page,PAGESIZE);//默认每页最多10条
}
}
//获取当前项目的路径
var urlRootContext = (function () {
var strPath = window.document.location.pathname;
var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
return postPath;
})();
//生成表格
function buildTable(userName,pageNumber,pageSize) {
var url = urlRootContext + "/list.do"; //请求的网址
var reqParams = {'userName':userName, 'pageNumber':pageNumber,'pageSize':pageSize};//请求数据
$(function () {
$.ajax({
type:"POST",
url:url,
data:reqParams,
async:false,
dataType:"json",
success: function(data){
if(data.isError == false) {
// options.totalPages = data.pages;
var newoptions = {
currentPage: 1, //当前页数
totalPages: data.pages==0?1:data.pages, //总页数
size:"normal",
alignment:"center",
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "第一页";
case "prev":
return "前一页";
case "next":
return "后一页";
case "last":
return "最后页";
case "page":
return page;
}
},
onPageClicked: function (e, originalEvent, type, page) {
var userName = $("#textInput").val(); //取内容
buildTable(userName,page,PAGESIZE);//默认每页最多10条
}
}
$('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新设置总页面数目
var dataList = data.dataList;
$("#tableBody").empty();//清空表格内容
if (dataList.length > 0 ) {
$(dataList).each(function(){//重新生成
$("#tableBody").append('<tr>');
$("#tableBody").append('<td>' + this.userId + '</td>');
$("#tableBody").append('<td>' + this.userName + '</td>');
$("#tableBody").append('<td>' + this.userPassword + '</td>');
$("#tableBody").append('<td>' + this.userEmail + '</td>');
$("#tableBody").append('</tr>');
});
} else {
$("#tableBody").append('<tr><th colspan ="4"><center>查询无数据</center></th></tr>');
}
}else{
alert(data.errorMsg);
}
},
error: function(e){
alert("查询失败:" + e);
}
});
});
}
//渲染完就执行
$(function() {
//生成底部分页栏
$('#bottomTab').bootstrapPaginator(options);
buildTable("",1,10);//默认空白查全部
//创建结算规则
$("#queryButton").bind("click",function(){
var userName = $("#textInput").val();
buildTable(userName,1,PAGESIZE);
});
});
</script>

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

巴特西

BootStrap 用法

最新文章

热门文章