Bootstrap+Ajax+HTML 动态表格分页

 

1.HTML页面：（bootstrap的模态框）

触发模态框：

 
<div class="col-lg-6">
        <div class="input-group" style="margin-left: 15px;">
               <input type="text" class="form-control" placeholder="选择车主" />
              <span class="input-group-btn">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-backdrop="static" style="background-color: #337ab7; color: white;">
                                        选择
              </button>
                                   
           </span>
      </div>
</div>

　模态框

  <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group" style="margin-left: 15px;">
                                <input id="selCrInfor" type="text" class="form-control" placeholder="姓名/电话/车牌" />

                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" style="background-color: #337ab7; color: white;" onclick="GetCarInfor()">
                                        查询
                                    </button>
                                </span>

                            </div>
                            <div style="padding-top: 10px;">
                                <span>&nbsp; &nbsp; &nbsp;<img src="../images/house_go.png" />
                                    <span id="depot"></span>
                                    <input name="depotId" type="text" id="depotId" hidden="hidden" />
                                </span>
                            </div>
                            <!-- /input-group -->
                        </div>
                        <!-- /.col-lg-6 -->
                    </div>

                </div>

                <div class="modal-body" style="overflow: scroll;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-info" style="width: 1400px; ">
                                <div class="panel-heading">车辆信息</div>
                                <table id="table" class="table table-hover table-striped ">
                                    <thead id="tem">
                                        <tr >
                                            <th id="cr_Date"><span style="color:#e2a9db">登记日期</span></th>
                                            <th id="cr_Name"><span style="color:#e2a9db">车主姓名</span></th>
                                            <th id="cr_Tel"><span style="color:#e2a9db">联系电话</span></th>
                                            <th id="cr_CarType"><span style="color:#e2a9db">车型</span></th>
                                            <th id="cr_CarNum"><span style="color:#e2a9db">车牌号</span></th>
                                            <th id="cr_LicenseNum"><span style="color:#e2a9db">行驶证号</span></th>
                                            <th id="cr_kmCount"><span style="color:#e2a9db">当前公里数</span></th>
                                            <th id="de_Name"><span style="color:#e2a9db">登记店铺</span></th>
                                            <th id="cr_MemberId"><span style="color:#e2a9db">会员卡号</span></th>
                                            <th id="cr_IsMember"><span style="color:#e2a9db">是否会员</span></th>
                                            <th id="cr_Memo"><span style="color:#e2a9db">备注</span></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>

                            </div>

                        </div>

                    </div>

                    <!-- 页面底部显示 -->

                    <!-- 每页显示几条记录 -->

                    <div id="bottomTool" class="row-fluid">
                        <div class="span6" style="width: 100%; margin-left: -40px;">
                            <div class="dataTables_paginate paging_bootstrap pagination">
                                <ul id="previousNext">
                                    <li onclick="previous()" class="prev disabled"><a id="previousPage" href="#">上一页</a></li>
                                    <li id="page" style="float: left;">
                                        <select id="pageNum" onchange="ToPage()" style="width: 50PX; margin-right: 1px;" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
                                            <option selected="selected" value="1">1</option>
                                        </select>
                                    </li>
                                    <li class="next" onclick="next()"><a id="nextPage" href="#">下一页</a></li>
                                   
                                    <li   class="dataTables_length" id="DataTables_Table_0_length" style="margin-left:10px;">每页
                                    <select id="pageSize" onchange="research()"
                                        aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
                                        <option selected="selected" value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                        条    &nbsp;&nbsp; 共<span id="totalPage"></span>页
                                    </li>
                                </ul>

                            </div>

                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" style="float: left;">
                        <span class="glyphicon glyphicon-plus"></span>增加
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

2.js代码

$(function () {
 GetCarList(GetSqlCarOwner());
});
// 列表
function GetCarList(strWhere) {
    if ($("#depotId").val() == "") {
        $("#depotId").val($("#deId").val());
    }
    //得到查询条件
    var searchString = strWhere;
    //得到每页显示条数
     var pageSize = $("#pageSize").val().trim();
    //得到显示第几页
     var pageNum = $("#pageNum").val().trim();
     
    $.ajax({
        type: "POST",
        async: false,
        url: "../Ajax/CarOwnerAjax.ashx",
        data: {
            "strWhere": searchString,
            "rows": pageSize,
            "page": pageNum,
            "cmd": "carOwnerList",
            "de_Id": $("#depotId").val()
        },
        dataType: "text",
        success: function (data) {
            //将json字符串转为json对象
            var pageEntity = JSON.parse(data);
            //得到结果集
            var obj = pageEntity["rows"];
            //将除模板行的thead删除，即删除之前的数据重新加载
            $("thead").eq(0).nextAll().remove();
            //将获取到的数据动态的加载到table中
            for (var i = 0; i < obj.length; i++) {
                //获取模板行，复制一行
                var row = $("#tem").clone();
                //给每一行赋值
                row.find("#cr_Date").text(obj[i].cr_Date);
                row.find("#cr_Name").text(obj[i].cr_Name);
                row.find("#cr_Tel").text(obj[i].cr_Tel);
                row.find("#cr_CarType").text(obj[i].cr_CarType);
                row.find("#cr_CarNum").text(obj[i].cr_CarNum);
                row.find("#cr_LicenseNum").text(obj[i].cr_LicenseNum);
                row.find("#cr_kmCount").text(obj[i].cr_kmCount);
                row.find("#de_Name").text(obj[i].de_Name);
                if (obj[i].cr_MemberId == 0||obj[i].cr_MemberId ==null) {
                    row.find("#cr_MemberId").text("");
                }
                if (obj[i].cr_IsMember == 1) {
                    row.find("#cr_MemberId").text(obj[i].cr_MemberId);
                }
                if (obj[i].cr_IsMember == 0) {
                    row.find("#cr_IsMember").text("否");
                    //$("#cr_IsMember").css("background-color", "#eee3a7");
                }
                if (obj[i].cr_IsMember == 1) {
                    row.find("#cr_IsMember").text("是");
                    //$("#cr_IsMember").css("background-color", "#b1d3f1");
                }
                row.find("#cr_Memo").text(obj[i].cr_Memo);
                //将新行添加到表格中
                row.appendTo("#table");

            }
            //当前记录总数
            var pageNumCount = pageEntity["total"];
            //当前记录开始数
            var pageNumBegin = (pageNum - 1) * pageSize + 1;
            //当前记录结束数
            var pageNumEnd = pageNum * pageSize
            //如果结束数大于记录总数，则等于记录总数
            if (pageNumEnd > pageNumCount) {
                pageNumEnd = pageNumCount;
            }
            //得到总页数
            var pageCount;
            if (pageNumCount / pageSize == 0) {
                pageCount = pageNumCount / pageSize;

            } else {
                pageCount = Math.ceil(pageNumCount / pageSize);
            }
            //输出共多少页
            if (pageCount <= 1) {
                document.getElementById("totalPage").innerHTML = 1;

            } else {
                document.getElementById("totalPage").innerHTML = pageCount;
            }
          
            //显示所有的页码数

            var pageSelect = document.getElementById("page");

            var pageOption = "";

            var flag;

            //删除select下所有的option，清除所有页码

            document.getElementById("pageNum").options.length = 0;
            if (pageCount <= 1) {
                var  option = new Option("1", "1", false, true);
                document.getElementById("pageNum").options.add(option);
            } else {
                for (var i = 0; i < pageCount; i++) {
                    flag = (i + 1).toString();
                    var option;
                    //如果等于当前页码
                    if (flag == pageNum) {
                        //实例化一个option,则当前页码为选中状态
                        option = new Option(flag, flag, false, true);
                    } else {
                        option = new Option(flag, flag, false, false);
                    }
                    //将option加入select中
                    document.getElementById("pageNum").options.add(option);
                }
            }
            
            /**给上一步下一步加颜色**/
            //判断是否只有一页
            if (pageCount == 1) {
                //如果只有一页，上一步，下一步都为灰色

                $("#previousPage").css("color", "#AAA");//给上一步加灰色

                $("#nextPage").css("color", "#AAA");//给下一步加灰色

            } else if (pageNum - 1 < 1) {

                //如果是首页,则给上一步加灰色，下一步变蓝

                $("#previousPage").css("color", "#AAA");//给上一步加灰色

                $("#nextPage").css("color", "#66a4db");//给下一步加蓝色

            } else if (pageNum == pageCount) {

                //如果是尾页,则给上一步加蓝色，下一步灰色

                $("#previousPage").css("color", "#66a4db");//给上一步标签加蓝色

                $("#nextPage").css("color", "#AAA");//给下一步标签加灰色

            } else {

                //上一步为蓝色，下一步为绿色

                $("#previousPage").css("color", "#66a4db");//给上一步加蓝色

                $("#nextPage").css("color", "#66a4db");//给下一步加蓝色

            }

        }

    });

}
//切换到第几页
function ToPage() {
    GetCarList(GetSqlCarOwner());
}
//上一页
function previous() {
    //得到当前选中项的页号
    var id = $("#pageNum option:selected").val();
    //计算上一页的页号
    var previousPage = parseInt(id) - 1;
    //得到select的option集合
    var list = document.getElementById("pageNum").options;
    //得到select中，上一页的option
    var previousOption = list[previousPage - 1];
    //修改select的选中项
    previousOption.selected = true;
    //调用查询方法
    GetCarList(GetSqlCarOwner());

}
//下一页
function next() {
    //得到当前选中项的页号
    var id = $("#pageNum option:selected").val();
    //计算下一页的页号
    var nextPage = parseInt(id) + 1;
    //得到select的option集合
    var list = document.getElementById("pageNum").options;
    //得到select中，下一页的option
    var nextOption = list[nextPage - 1];
    //修改select的选中项
    nextOption.selected = true;
    //调用查询方法
    GetCarList(GetSqlCarOwner());
}

//修改每页显示条数 ，要从第一页开始查起
function research() {
    //得到select的option集合
    var list = document.getElementById("pageNum").options;
    //得到select中，第一页的option
    var nextOption = list[0];
    //修改select的选中项
    nextOption.selected = true;
    //调用查询方法
    GetCarList(GetSqlCarOwner());

}