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()); }