2. 程式人生 > >JS-網頁中分頁欄

JS-網頁中分頁欄

阿新 • • 發佈：2017-06-24
數字 要求 com 小時 blog 效果 ebo onclick iter

原理

三部分

我給分頁欄分成了3部分

  • 上一頁:調用prePage()函數
  • 下一頁:調用nextPage()函數
  • 帶有數字標識的部，調用skipPage()函數

技術分享

prePage函數

function prePage() {
    var val = $(‘#pageLi li.active‘).text();
    // 獲取當前li的索引值
    if (val == 1) {
        return;
    }
    var page = val - 1;
    var ind = $(‘#pageLi li.active‘).index();
    ele = $(‘#pageLi li‘
 
).eq(ind - 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

該函數首先推斷是否已到第一個。假設已經是第一個了，就不再做處理，否則，須要得到當前頁的上一頁的值和上一頁所在的li控件。最後調用skipPage()

nextPage函數

function nextPage(page) {
    var val = $(‘#pageLi li.active‘).text();
    if (val == $(‘#lastPage‘).text()) {
        return
 
;
    }
    // 獲取當前li的索引值
    var ind = $(‘#pageLi li.active‘).index();
    var page = Number(val) + 1;

    ele = $(‘#pageLi li‘).eq(ind + 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

下一頁是向下翻頁。首先推斷時候已到最後一頁，假設到了最後一頁，我們就不在處理，否則獲取當前頁的下一頁值和’li’控件。

skipPage函數

function skipPage(id, ele) {
    var page = $(ele).text();
    $(‘#pageLi li‘).removeClass("disabled");
    $(‘#pageLi li‘).removeClass("active");
    // $(‘#pageLi li‘).addClass("active");
    $(ele).parent().addClass("active");
    // 給"上一頁"按鈕加入不可點擊樣式
    if (page == 1) {
        $(‘#pageLi li:first‘).addClass("disabled");
    }
    // 給"下一頁"加入不可點擊樣式
    // console.log("最大頁 :" + $(‘#lastPage‘).text())
    if (page == $(‘#lastPage‘).text()) {
        $("#pageLi li:last-child").addClass("disabled");
        // $(‘#lastLi‘).addClass("disabled");
    }
    // $(‘#omitLi‘).addClass("disabled");
    refreshLi(page, $(ele).parent().index());
}

該函數首先得到頁碼值，然後清楚全部頁碼的class信息,給當前要顯示的頁碼加入active樣式，使其高亮，然後推斷上一頁和下一頁是否可點擊，一切完畢後。來到最重要的步驟，更新分頁欄上的頁碼值，由於要符合實際要求就要，每一個頁面都能選擇，所以來看refreshLi方法的實現。

refreshLi函數


function refreshLi(page, ind) {
    console.log("total : " + $(‘#lastPage‘).text());
    if ($(‘#lastPage‘).text() <= 10) {
        return;
    }

    var left = false;
    if ($("#leftOmitLi").children().text() == "...") {
        left = true;
    }
    var right = false;
    if ($("#omitLi").children().text() == "...") {
        right = true;
    }
    parse(left, right, ind);
}

該函數傳入的3個參數分別為：

  • left:左省略號是否存在
  • right:右省略號是否存在
  • ind:當前點擊的li的索引值

推斷的標準就是控件id為leftOmitLi和omitLi的控制中文本值是否為...。然後進入我們的parse函數

parse函數


function parse(left, right, ind) {
    console.log("left : " + left + ",right : " + right + ",ind : " + ind
            + ",totalSize : " + $(‘#lastPage‘).text());
    // 總頁數
    var pageTotalSize = Number($(‘#lastPage‘).text());
    if (!left && right) {
        // 僅僅有右省略
        if (ind == rightIndex - 1) {
            // 右省略後的左邊第一個,出現左省略,同事右省略左邊要+1
            // 點擊右省略左邊第一個,右省略左邊第一個要+1
            console.log("點擊 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind < rightIndex - 1) {
            // 點擊左邊其它。不分頁不變化

            // no do
        } else if (ind > rightIndex) {
            // 右省略右邊的,右省略消失,左省略出現
            onlyLeft(pageLiCount, pageTotalSize);
        }
    } else if (!right && left) {
        if (ind < leftIndex) {
            // 左省略左邊,左省略小時,右省略出現
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // //左省略右邊第一個,出現右省略,同一時候左省略右邊第一個要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {
                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind > leftIndex + 1) {
            // 不變化
            // no do
        }
    } else if (left && right) {
        if (ind < leftIndex) {
            // 點擊左省略左邊,左省略小時,僅僅有右省略
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // 點擊左省略的右邊第一個,左省略右邊第一個要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {

                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind == rightIndex - 1) {
            // 點擊右省略左邊第一個,右省略左邊第一個要+1
            console.log("點擊 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind > rightIndex) {
            // 點擊右省略右邊,右省略消失,僅僅有左省略
            onlyLeft(pageLiCount, pageTotalSize);
        }
    }
}

該函數就有點負責了。我變化之前的情況分了3種：

  • 有左省略
  • 有右省略
  • 既有左省略。也有右省略

針對每一個情況有分出非常多情況

技術分享

僅僅有左省略

技術分享

1.我此時點擊左省略左邊的頁碼(也就是圖中的1。2)，應該變成僅僅有有省略的情況代碼例如以下：

// 僅僅有右省略
function onlyRight(pageLiCount, pageTotalSize) {
    console.log("onlyRight");
    for (var i = 1; i <= rightIndex; i++) {
        if (i == leftIndex) {
            $(‘#leftOmitLi‘).removeClass("disabled");
            $(‘#leftOmitLi‘).children().text(leftIndex);
        } else if (i == rightIndex) {
            $(‘#omitLi‘).addClass("disabled");
            $(‘#omitLi‘).children().text("...");
        } else {
            $(‘#pageLi li‘).eq(i).children().text(i);
        }
    }
}

處理完後變成例如以下所看到的:

技術分享

2.假設此時我點擊左省略號右邊第一個，那麽應該是什麽樣的，應該變成即有左省略，也有右省略，且兩個省略號中間的數字要遞減1.且被點擊的頁碼高亮效果要想後退一格顯示。由於頁碼遞減了。代碼例如以下:

// 既有左也有右,左省略號右邊第一個
function leftFirstleftAndRight(ind) {
    console.log("leftFirstleftAndRight");
    var text = Number($(‘#pageLi li‘).eq(ind).children().text()) - 1;
    console.log("text : " + text)
    var d = 0;
    for (var i = leftIndex + 1; i < rightIndex; i++) {
        $(‘#pageLi li‘).eq(i).children().text(text + (d++));
    }
    $(‘#pageLi li‘).eq(leftIndex + 1).removeClass("active");
    $(‘#pageLi li‘).eq(leftIndex + 2).addClass("active");
    $(‘#leftOmitLi‘).addClass("disabled");
    $(‘#leftOmitLi‘).children().text("...");
    $(‘#omitLi‘).addClass("disabled");
    $(‘#omitLi‘).children().text("...");
}

處理完的效果例如以下:

技術分享

可是這個時候也有一個情況須要推斷就是，其中間第一個的數字和右邊的2差兩個的話，比方上面我再點擊一次5的話，這個時候出現了4，5，6。而4和2相差2，這個時候再點擊4的話。須要把左省略去掉了，由於沒有多余的數字了。僅僅有一個3了，你還隱藏啥,所以我們做了推斷例如以下，假設是剛才這樣的情況，直接變成僅僅有右省略的情況，

// //左省略右邊第一個,出現右省略,同一時候左省略右邊第一個要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {
                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }

變化後的效果例如以下：

技術分享

3.第三種情況我們不做處理，原因自己理解。

僅僅有右省略

技術分享

1.點擊右省略左邊最靠近的第一個，比方上圖中的7。
這個時候須要出現左省略。然後中間部分遞增+1

技術分享

這個地方也有一個例外，就是當點擊的點與右省略右邊第一個相差2個的時候。我們也會變成僅僅有左省略的情況，所以代碼中做了推斷，例如以下

if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }

效果例如以下：

技術分享

2.點擊右省略右邊，變成左省略。

那我們就調用左省略函數onlyRight

技術分享

3.點擊右省略左邊除最靠近的第一個外。不做處理。

既有左省略，也有右省略

技術分享

這個地方事實上涵蓋了上面的全部情況，不再敘說

總結

做這個分頁欄的時候。比較easy造成混淆的是，li的索引值和其問文本值是沒有關聯的。所以在變化值的時候要以文本值來遞減(增)，不能以索引值來遞減(增)。

近期在寫網頁。用JS手寫了一個分頁欄

效果

技術分享

html代碼

<ul class="pagination pagination-sm" id="pageLi">
    <li class="disabled"><a href="javascript:;" onClick="prePage()">&laquo;</a></li>
    <li class="active"><a href="javascript:;"onClick="skipPage(1,this)">1</a></li>
    <li><a href="javascript:;" onClick="skipPage(2,this)">2</a></li>
    <li id="leftOmitLi"><a href="javascript:;"onClick="skipPage(3,this)">3</a></li>
    <li><a href="javascript:;" onClick="skipPage(4,this)">4</a></li>
    <li><a href="javascript:;" onClick="skipPage(5,this)">5</a></li>
    <li><a href="javascript:;" onClick="skipPage(6,this)">6</a></li>
    <li><a href="javascript:;" onClick="skipPage(7,this)">7</a></li>
    <li class="disabled" id="omitLi"><a href="javascript:;"onClick="skipPage(9,this)">...</a></li>
    <li><a href="javascript:;" onClick="skipPage(11,this)">11</a></li>
    <li><a href="javascript:;" onClick="skipPage(12,this)" id="lastPage">12</a></li>
    <li id="lastLi"><a href="javascript:;" onClick="nextPage()">&raquo;</a></li>
</ul>

Js代碼


// 分頁欄的數量
var pageLiCount = 10;
// 左邊省略出現的位置
var leftIndex = 3;
// 右邊省略出現的位置
var rightIndex = 8;
var totalPage = $(‘#lastPage‘).text();

function skipPage(id, ele) {
    var page = $(ele).text();
    var tablebody = $("#resultTable tbody");
    $(‘#pageLi li‘).removeClass("disabled");
    $(‘#pageLi li‘).removeClass("active");
    // $(‘#pageLi li‘).addClass("active");
    $(ele).parent().addClass("active");
    // 給"上一頁"按鈕加入不可點擊樣式
    if (page == 1) {
        $(‘#pageLi li:first‘).addClass("disabled");
    }
    // 給"下一頁"加入不可點擊樣式
    // console.log("最大頁 :" + $(‘#lastPage‘).text())
    if (page == $(‘#lastPage‘).text()) {
        $("#pageLi li:last-child").addClass("disabled");
        // $(‘#lastLi‘).addClass("disabled");
    }
    // $(‘#omitLi‘).addClass("disabled");
    refreshLi(page, $(ele).parent().index());
    $
            .get(
                    "/rs/resultByPage/" + page,
                    function(response) {
                        console.log(response);
                        var data = eval(response);
                        if (data.length != 0) {
                            tablebody.html("");
                            for (var i = 0; i < data.length; i++) {
                                console.log(data[i]);
                                $(
                                        "<tr>" + "<td>"
                                                + data[i].id
                                                + "</td>"
                                                + "<td>"
                                                + data[i].uid
                                                + "</td>"
                                                + "<td>"
                                                + data[i].appversionEntity.version
                                                + "</td>"
                                                + "<td>"
                                                + data[i].appversionEntity.productid
                                                + "</td>"
                                                + "<td>"
                                                + data[i].uploadtime
                                                + "</td>"
                                                + "<td>"
                                                + "<button type=\"button\" class=\"btn btn-danger\" onClick=\"deleteViewtypeById("
                                                + data[i].id
                                                + ")\">"
                                                + "刪除</button><button type=\"button\" class=\"btn btn-info\" onClick=\"goUpdateViewtype("
                                                + data[i].id
                                                + ")\""
                                                + " id=\"updateViewtypeButton\">"
                                                + "詳情</button>" + "</td>"
                                                + "</tr>").appendTo(tablebody);

                            }

                        }
                    });

}

function prePage() {
    var val = $(‘#pageLi li.active‘).text();
    // 獲取當前li的索引值
    if (val == 1) {
        return;
    }
    var page = val - 1;
    var ind = $(‘#pageLi li.active‘).index();
    ele = $(‘#pageLi li‘).eq(ind - 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

function nextPage(page) {
    var val = $(‘#pageLi li.active‘).text();
    if (val == $(‘#lastPage‘).text()) {
        return;
    }
    // 獲取當前li的索引值
    var ind = $(‘#pageLi li.active‘).index();
    var page = Number(val) + 1;

    ele = $(‘#pageLi li‘).eq(ind + 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

function refreshLi(page, ind) {
    console.log("total : " + $(‘#lastPage‘).text());
    if ($(‘#lastPage‘).text() <= 10) {
        return;
    }

    var left = false;
    if ($("#leftOmitLi").children().text() == "...") {
        left = true;
    }
    var right = false;
    if ($("#omitLi").children().text() == "...") {
        right = true;
    }
    parse(left, right, ind);
}

function parse(left, right, ind) {
    console.log("left : " + left + ",right : " + right + ",ind : " + ind
            + ",totalSize : " + $(‘#lastPage‘).text());
    // 總頁數
    var pageTotalSize = Number($(‘#lastPage‘).text());
    if (!left && right) {
        // 僅僅有右省略
        if (ind == rightIndex - 1) {
            // 右省略後的左邊第一個,出現左省略,同事右省略左邊要+1
            // 點擊右省略左邊第一個,右省略左邊第一個要+1
            console.log("點擊 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind < rightIndex - 1) {
            // 點擊左邊其它，不分頁不變化

            // no do
        } else if (ind > rightIndex) {
            // 右省略右邊的,右省略消失,左省略出現
            onlyLeft(pageLiCount, pageTotalSize);
        }
    } else if (!right && left) {
        if (ind < leftIndex) {
            // 左省略左邊,左省略小時,右省略出現
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // //左省略右邊第一個,出現右省略,同一時候左省略右邊第一個要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {
                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind > leftIndex + 1) {
            // 不變化
            // no do
        }
    } else if (left && right) {
        if (ind < leftIndex) {
            // 點擊左省略左邊,左省略小時,僅僅有右省略
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // 點擊左省略的右邊第一個,左省略右邊第一個要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {

                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind == rightIndex - 1) {
            // 點擊右省略左邊第一個,右省略左邊第一個要+1
            console.log("點擊 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind > rightIndex) {
            // 點擊右省略右邊,右省略消失,僅僅有左省略
            onlyLeft(pageLiCount, pageTotalSize);
        }
    }
}
// --------------變成什麽樣,例如以下所看到的
// 僅僅有左省略
function onlyLeft(pageLiCount, pageTotalSize) {
    console.log("onlyLeft");
    for (var i = pageLiCount; i >= leftIndex; i--) {
        if (i == leftIndex) {
            $(‘#leftOmitLi‘).addClass("disabled");
            $(‘#leftOmitLi‘).children().text("...");
        } else if (i == rightIndex) {
            $(‘#omitLi‘).removeClass("disabled");
            $(‘#omitLi‘).children().text(pageTotalSize - 2);
        } else {
            var inText = pageTotalSize - (pageLiCount - i);
            $(‘#pageLi li‘).eq(i).children().text(inText);
        }
    }
}

// 僅僅有右省略
function onlyRight(pageLiCount, pageTotalSize) {
    console.log("onlyRight");
    for (var i = 1; i <= rightIndex; i++) {
        if (i == leftIndex) {
            $(‘#leftOmitLi‘).removeClass("disabled");
            $(‘#leftOmitLi‘).children().text(leftIndex);
        } else if (i == rightIndex) {
            $(‘#omitLi‘).addClass("disabled");
            $(‘#omitLi‘).children().text("...");
        } else {
            $(‘#pageLi li‘).eq(i).children().text(i);
        }
    }
}

// 既有左也有右,左省略號右邊第一個
function leftFirstleftAndRight(ind) {
    console.log("leftFirstleftAndRight");
    var text = Number($(‘#pageLi li‘).eq(ind).children().text()) - 1;
    console.log("text : " + text)
    var d = 0;
    for (var i = leftIndex + 1; i < 8; i++) {
        $(‘#pageLi li‘).eq(i).children().text(text + (d++));
    }
    $(‘#pageLi li‘).eq(leftIndex + 1).removeClass("active");
    $(‘#pageLi li‘).eq(leftIndex + 2).addClass("active");
    $(‘#leftOmitLi‘).addClass("disabled");
    $(‘#leftOmitLi‘).children().text("...");
    $(‘#omitLi‘).addClass("disabled");
    $(‘#omitLi‘).children().text("...");
}
// 既有左也有右,右省略號左邊第一個
function rightFirstleftAndRight(ind) {
    console.log("rightFirstleftAndRight");
    console.log("內容為 : " + $(‘#pageLi li‘).eq(ind).text())
    var text = Number($(‘#pageLi li‘).eq(ind).text());
    var d = 1;
    for (var i = rightIndex - 1; i > leftIndex; i--) {
        console.log("text : " + text + ",d = " + d)
        $(‘#pageLi li‘).eq(i).children().text(text + (d--));
    }
    $(‘#pageLi li‘).eq(rightIndex - 1).removeClass("active");
    $(‘#pageLi li‘).eq(rightIndex - 2).addClass("active");
    $(‘#leftOmitLi‘).addClass("disabled");
    $(‘#leftOmitLi‘).children().text("...");
    $(‘#omitLi‘).addClass("disabled");
    $(‘#omitLi‘).children().text("...");
}

JS-網頁中分頁欄

相關推薦

JS-網頁中分頁欄

數字 要求 com 小時 blog 效果 ebo onclick iter 原理 三部分 我給分頁欄分成了3部分 上一頁:調用prePage()函數 下一頁:調用nextPage()函數 帶有數字標識的部，調用skipPage()函數

解決js中分頁模組，分頁列表，怎麼做

最近工作中在做一個分頁列表的一個東西，要求在js中寫，不多比比，直接上關鍵程式碼 htmlText=htmlText+'<div class="page">'; //重寫分頁列表 //一頁的內容 var pageSize = parse

Oracle中分頁語句的寫法

where select sql span -s light 語句 emp pre select empno,ename,r from (select empno,ename,rownum r from emp) where r<11 and r>4

小程序中分頁加載問題

ref 跳轉 amp lse NPU 帶來 16px length style 別的不說，直接貼分頁加載的代碼，看註釋就好 pasting//index.jsconst app = getApp()//分裝的require 函數，http.js見本人隨筆“解決小程序分裝的r

js靜態資料分頁展示

拿vue做示例 首先定義data data() { return { tableData: [], // 當前頁的資料，用於給表格展示用的 tableDataAll: [], // 需要拿來分頁的總資料 pagination: {

SQL儲存過程中分頁

</pre><pre name="code" class="sql">ALTER proc [dbo].[GetGoodsLsit] ----分頁條件 @StartIndex varchar(20), @PageSize varchar(20), ----排序條件

java中分頁思路

分頁：無法sql查詢 int offset = 0; boolean enoughOver = true; for (int i = 0; i < pagesize; i++) { Record company = Db.findFirst("", offset++);

基於Vue.js的表格分頁元件

最近小熙在做Vue有關的專案需要前端分頁外掛，看到篇不錯的，特此轉載分享 有一段時間沒更新文章了，主要是因為自己一直在忙著學習新的東西而忘記分享了，實在慚愧。 這不，大半夜發文更一篇文章，分享一個自己編寫的一個Vue的小元件，名叫BootPage。 不瞭解Vue.js的

easyui 新增統計行，分頁欄總數

場景如下： 我們在表格中經常新增一行為統計行，統計具體列的相關和，這時候使用者在使用的時候，發現有效資料與分頁欄中展示的總個數不一致，會造成困惑。 產生原因：easyuigrid一般在表格載入onloadSuccess 函式中以insertRow 或者appendRow 函式來追加統計

關於element元件中分頁的一些個人思路

最近在用element，用到了它的分頁這個元件，我這邊的情況是，我前端請求資料，資料大概有20個的樣子，把資料存在data的一個數組裡面，用一個v-for迴圈遍歷陣列內容，並用div裝起來，這樣20個數據就從上往下排列了出來，但是我想使用分頁，一個分頁只顯示5個數據，那麼就有4頁，這個效果怎麼做到呢？ 我本

JAVAWeb中分頁和批量刪除

1.分頁操作    分頁的方法有多種，此處採用的方法是：先規定表格中每一頁所顯示的條數pageSize，然後獲取使用者所選中的頁數currentPage，然後通過這兩個引數和mysql中的limit去獲取相應的資料。     (1)為了便於操作，此

js+bootstrap實現分頁、頁碼跳轉

製作page.jsp，在其他頁碼引入，只需把最外層的form標籤的id設定為myForm； 其中　　totalPages:共有多少頁；totalElements：共有有多少條記錄；currentPage：第幾頁 <%@ page language="jav

JS實現表格分頁，排序，模糊搜尋

 整個的功能分為三個部分，都是來自不同的前輩們貢獻的資源，整合在了一起，雖然還是有些繁瑣，但是可以使用^_^ 模糊搜尋不記得來自哪裡了.....下面是整個的程式碼，html如下： <!DOCTYPE html> <html lang="en"&g

mybatis中分頁外掛的使用——PageHelper

需求：頁面分頁 其中，這裡分為兩種，一種是對於未經過資料庫的查詢分頁，一種是經過資料庫返回的list處理，然後進行分頁，此處講解的是已處理過的list進行分頁。  程式碼中使用 配置在mybatis-config.xml檔案 <!-- 外掛配置 -

Mysql資料中分頁顯示的關鍵字Limit

針對於Mysql資料庫，使用Limit關鍵字控制顯示的行數。 eg：Select prod_name from Products Limit 5;------------------>控制顯示的條數為5        Select prod_name from Pr

crm中分頁外掛類

新建500個物件，一次提交到資料庫bulk_create(objs) import os import sys if __name__ == '__main__': os.environ.setdefault("DJANGO_SETTINGS_MODULE", "

spring boot 中分頁外掛PageHelper的使用

PageHelper做的是什麼呢？它封裝了分頁的後臺部分，將你的語句改裝成了一個分頁查詢的sql。它的優缺點： 優點：封裝分頁sql，使我們不需要每個地方都去寫分頁的查詢語句；同時，使我們select的sql語句向下相容，換了資料庫也不需要更改sql程式碼；

springboot中分頁外掛pageHelper的使用

優點：無需你自己去封裝以及關心sql分頁等問題，使用很方便，前端取資料也很方便。 1.包的依賴 <!--pagehelper --> <depe

node.js-mongodb封裝分頁查詢

limit表示讀取條數 skip表示越過的條數 db.集合名.stats().count     查詢集合中所有條數 db.js //這個模組裡封裝了所有對資料庫的常用操作，不管資料庫的什麼操作，

jqGrid 中 分頁屬性：loadonce 為true 時trigger("reloadGrid") 無效

當loadonce屬性為true時，jqGrid只會載入一次資料，並把datatype改為local，以後不再請求後臺。所以 怎麼點斷點都是進不去， 當我們進行增刪改查操作時，直接使用trigger("reloadGrid")無效，原因是：datatype改為local了，這樣就無法完成於Ser