自己寫的分頁器，BOOTSTRAP+JQUERY（非完全版，後續完善）

標籤：更新   phone   opd   按鈕   hasclass   car   first   sel   class   

第一步：
//建立幾個php檔案的全域變數先，後面會很多地方用到
var wholePhones="selectPhones.php";
var lowPowerPhones="lowPowerPhones.php";
var issuePhones="issuePhones.php";
var losePhones="losePhones.php";

    第二步：

// 根據不同類型sorting不同商品列表的共用的函數集合，兩個參數分別表示從第幾頁開始查詢，查詢通過哪個介面
    function sortPhones(page,pathUrl) {
        var sumPage;
        $.ajax({
            type:‘GET‘,
            url:‘data/‘+pathUrl+‘?page=‘+page,
            success:function (result) {
                var obj=JSON.parse(result);
                var phones=obj.phones;
                var count=obj.count;
                sumPage=Math.ceil(count/20);
                var html = "";
                for(var i=0;i<phones.length;i++){
                    // 在這裡定義一下模態框觸發按鈕的連結目標，要跟它對應的模態框ID一樣，否則點開任何一條資訊彈出的都是ID=1的商品資訊
                    var hrefUrl=‘phoneModal‘+i;
                    var phone = phones[i];
                    html += `
        <div class="list-group-item divItem">
                <ul class="list-inline row">
                    <li class="col col-md-1">${phone.id}</li>
                    <li class="col col-md-1">${isLock}</li>
                    <li class="col col-md-1">${phone.station_id}</li>
                    <li class="col col-md-1 dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">操作</a>
                        <ul class="dropdown-menu">
                            <li>開</li>
                            <li>關</li>
                            <li class="deleteCar">刪除</li>
                        </ul>
                    </li>
                    <li class="col col-md-1">
                        <a href="#${hrefUrl}" data-toggle="modal">詳情</a>
                        <div class="modal" id="${hrefUrl}" data-backdrop="static">
                            <div class="modia-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <span class="lf">商品詳情</span>
                                        <span class="rf closeModal" data-dismiss="modal">關閉</span>
                                    </div>
                                    <div class="modal-body">
                                        <div class="map">
                                            <img src="imgs/map.jpg" class="img-responsive">
                                        </div>
                                      
                                        <table class="table table-stripped">
                                            <thead>
                                                <tr>
                                                    <td><b>商品編號:&nbsp;&nbsp;&nbsp;&nbsp;${phone.id}</b></td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>建立時間:</td>
                                                    <td>${phone.created}</td>
                                                </tr>
                                                <tr>
                                                    <td>更新時間:</td>
                                                    <td>${phone.updated}</td>
                                                </tr>
                                                <tr>
                                                    <td>名稱:</td>
                                                    <td>${phone.name}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>          
        `;
                }
                //沒有想要sorting的商品時，顯示的內容
                var noSortHtml=`
                <div class="list-group-item divItem">
                    <ul class="list-inline row">
                        <li class="col col-md-1">沒有該類型的商品</li>
                        <li class="col col-md-1">NA</li>
                        <li class="col col-md-1">NA</li>
                        <li class="col col-md-1">NA</li>
                    </ul>
                </div>
            `;
                if(phones.length<=0){$(".list-phone").html(noSortHtml)}
                else{$(".list-phone").html(html)};
            },
            error:function (err) {
                console.log(err)
            }
        })
    }

第三步：

// 建立分頁器的封裝函數，重要！

    function createPage(page,pathUrl) {
        var sumPage;
        $.ajax({
            type:‘GET‘,
            url:‘data/‘+pathUrl+‘?page=‘+page,
            success:function (result) {
                var obj=JSON.parse(result);
                var count=obj.count;
                sumPage=Math.ceil(count/20);
                // 將分頁按鈕渲染到HTML頁面上
                var pageHtml="<li class=‘previousPage‘><a rel=‘1‘>上一頁</a></li>";
                // 這個是預設啟用的第一個頁面，所以要單獨寫出來，不可以迴圈渲染
                pageHtml+="<li class=‘active itemPage firstItem‘><a rel=‘1‘>1</a></li>";
                if(sumPage>=2){
                    for(var j=0;j<sumPage-1;j++){
                        pageHtml+=`<li class="itemPage"><a rel=‘${j+2}‘>${j+2}</a></li>`;
                    }
                }
                else{pageHtml+=‘‘};
                pageHtml+="<li class=‘nextPage‘><a rel=‘2‘>下一頁</a></li>";
                $(‘.pagination‘).html(pageHtml);

                // 非點擊按鈕觸發時候，其實只要保證上一頁是禁用就行了，下一頁沒關係，它肯定不是禁用的
                if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}
                else{$(‘.previousPage‘).removeClass(‘disabled‘)}
                if(sumPage<=1){$(‘.nextPage‘).addClass(‘disabled‘)}
                // 擷取1-7按鈕的集合（這裡以後要最佳化，現在是資料庫只有7條資料，後續如果資料多了就不能這樣了）
                var list=document.querySelectorAll(‘li.itemPage‘);
                //點擊1-7之間的按鈕時觸發事件
                $(list).click(function () {
                    $(this).addClass(‘active‘).siblings().removeClass(‘active‘);
                    if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}
                    else{$(‘.previousPage‘).removeClass(‘disabled‘)}
                    if($(‘.nextPage‘).prev().hasClass(‘active‘)){$(‘.nextPage‘).addClass(‘disabled‘)}
                    else{$(‘.nextPage‘).removeClass(‘disabled‘)}
                    // 擷取分頁器每頁對應的頁數，然後點擊數字，查詢不同頁數的內容
                    var i=$(this).children(‘a‘).html();
                    console.log(i);
                    // 再判斷條件來分頁顯示對應的列表資訊
                    // 如果是商品總列表標籤啟用，就到總列表的php裡面查詢，以此類推
                    if($(‘#wholePhones‘).hasClass(‘current‘)){sortPhones(i,wholePhones)}
                    if($(‘#lowPowerPhones‘).hasClass(‘current‘)){sortPhones(i,lowPowerPhones)}
                    if($(‘#issuePhones‘).hasClass(‘current‘)){sortPhones(i,issuePhones)}
                    if($(‘#losePhones‘).hasClass(‘current‘)){sortPhoness(i,losePhones)}
                });
                // 在這裡需要找到當前active的元素下標，然後點擊時候要重新給index再賦值，因為慢一拍，所以點擊時候index要+1
                var index=parseInt($(‘.pagination li.active‘).children(‘a‘).html());
                // 點擊上一頁按鈕
                $(‘.previousPage‘).click(function () {
                    index=parseInt($(‘.pagination li.active‘).children(‘a‘).html())+1;
                    if(index<=2){$(‘.firstItem‘).addClass(‘active‘).siblings().removeClass(‘active‘)}
                    else{$(‘.pagination li.active‘).prev().addClass(‘active‘).siblings().removeClass(‘active‘);}
                    //當上一頁按鈕後的一個元素是active時，讓上一頁按鈕禁用
                    if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}
                    else{$(‘.previousPage‘).removeClass(‘disabled‘)}
                    if($(‘.nextPage‘).prev().hasClass(‘active‘)){$(‘.nextPage‘).addClass(‘disabled‘)}
                    else{$(‘.nextPage‘).removeClass(‘disabled‘)}
                    // 擷取分頁器每頁對應的頁數，然後點擊數字，查詢不同頁數的內容
                    var i=$(‘.pagination li.active‘).children(‘a‘).html();
                    console.log(i);
                    // 再判斷條件來分頁顯示對應的列表資訊
                    // 如果是商品總列表標籤啟用，就到總列表的php裡面查詢，以此類推

　　　　　　　　　　　 if($(‘#wholePhones‘).hasClass(‘current‘)){sortPhones(i,wholePhones)}
                    if($(‘#lowPowerPhones‘).hasClass(‘current‘)){sortPhones(i,lowPowerPhones)}
                    if($(‘#issuePhones‘).hasClass(‘current‘)){sortPhones(i,issuePhones)}
                    if($(‘#losePhones‘).hasClass(‘current‘)){sortPhones(i,losePhones)}

                });

                //點擊下一頁按鈕
                $(‘.nextPage‘).click(function (e) {
                    e.preventDefault();
                    // 因為慢一拍，所以這裡Index+1
                    index=parseInt($(‘.pagination li.active‘).children(‘a‘).html())+1;
                    if(index>sumPage){
                        $(‘.pagination li.active‘).addClass(‘active‘).siblings().removeClass(‘active‘);
                    }
                    else{$(‘.pagination li.active‘).next().addClass(‘active‘).siblings().removeClass(‘active‘);}
                    //當下一頁按鈕前的一個元素是active時，讓下一頁按鈕禁用
                    if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}
                    else{$(‘.previousPage‘).removeClass(‘disabled‘)}
                    if($(‘.nextPage‘).prev().hasClass(‘active‘)){$(‘.nextPage‘).addClass(‘disabled‘)}
                    else{$(‘.nextPage‘).removeClass(‘disabled‘)}
                    // 擷取分頁器每頁對應的頁數，然後點擊數字，查詢不同頁數的內容
                    var i=$(‘.pagination li.active‘).children(‘a‘).html();
                    // 再判斷條件來分頁顯示對應的列表資訊
                    // 如果是車輛總列表標籤啟用，就到總列表的php裡面查詢，以此類推

　　　　　　　　　　   if($(‘#wholePhones‘).hasClass(‘current‘)){sortPhones(i,wholePhones)}
                    if($(‘#lowPowerPhones‘).hasClass(‘current‘)){sortPhones(i,lowPowerPhones)}
                    if($(‘#issuePhones‘).hasClass(‘current‘)){sortPhones(i,issuePhones)}
                    if($(‘#losePhones‘).hasClass(‘current‘)){sortPhones(i,losePhones)}

                });
            },
            error:function (err) {
                console.log(err)
            }
        })
    }

第四步：

// 剛載入頁面時顯示商品總列表的分頁器以及總商品列表詳情，所以page和pathUrl兩個參數分別是1和wholePhones，WholePhones是全部商品列表的後台介面
    (function () {
        if($(‘#wholePhones‘).hasClass(‘current‘)){createPage(1,wholePhones);}
        sortPhones(1,wholePhones);
    })();

自己寫的分頁器，BOOTSTRAP+JQUERY（非完全版，後續完善）