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 

<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部分的是随内容不同更改的，其他都是可以随意套用