網(wǎng)頁中分頁的數(shù)據(jù)查詢

有些網(wǎng)頁中通常會有一個分頁的樣式，點(diǎn)擊上一頁或者下一頁或者是具體的某一頁的頁碼，頁面中可以顯示具體的從數(shù)據(jù)庫查詢的對應(yīng)的數(shù)據(jù)。

        以下介紹兩種分頁查詢的方法。

        第一種也是最常用的，就是通過數(shù)據(jù)庫的limit來指定查找某個位置的幾條數(shù)據(jù)。limit語法格式為：

                limit[offset] rows   

                        offset--是偏移量，也就是跳過表中多少條數(shù)據(jù)之后在查詢，可省略，表示從第一條開始；

                        rows--是需要查詢的具體的條數(shù)；

    例如：

    ①select * from db limit 10000,100

    上邊SQL語句表示從表db中拿數(shù)據(jù)，跳過10000行之后，拿100行

     ②select * from db limit 0,100

    表示從表db拿數(shù)據(jù)，跳過0行之后，拿取100行

    ③select * from db limit 100

    這條SQL跟②的效果是完全一樣的，表示拿前100條數(shù)

然后用這種方法進(jìn)行分頁查詢的時(shí)候，則需要傳遞兩個參數(shù)，第一個是page，也就是第幾頁，第二個是num，也就是每一頁需要多少條數(shù)據(jù)。

然后sql語句則可以寫為：

     select * from db  limit (page-1)*num,num

    select * from db  order by id limit (page-1)*num,num

以上的sql語句就可以在db的表中查詢到對應(yīng)的數(shù)據(jù)，兩種方法都可以實(shí)現(xiàn)，后面一句加上order by 是因?yàn)橛行r(shí)候，查詢的時(shí)候需要從后面往前面查詢，這時(shí)就需要用order by對數(shù)據(jù)進(jìn)行排序，默認(rèn)是升序，若需降序，則在后面添加DESC降序排列。

但是這種方法有一個缺陷，如果數(shù)據(jù)條數(shù)不多，則沒什么影響。但是如果數(shù)據(jù)量很大，因?yàn)閘imit是將偏移量的數(shù)據(jù)和需要的數(shù)據(jù)一起查詢出來，然后只取后面需要的數(shù)據(jù)。比如limit 100000,10；這樣明明只需要10條數(shù)據(jù)，但是卻在數(shù)據(jù)庫中查詢了100010條數(shù)據(jù)。大大的浪費(fèi)了資源?？梢杂孟旅娴姆椒▉斫鉀Q：

    原sql語句：

    select *  
    from mytbl  
    order by id  
    limit 100000,10  

    修改之后：

    select *  
    from mytbl  
    where id >=  
      (  
        select id  
        from mytbl  
        order by id  
        limit 100000,1  
      )  
    limit 10  

注：假設(shè)id是主鍵，內(nèi)層是通過主鍵判斷，外層也是通過主鍵查詢，所以性能大大提升了。

以上就是通過limit來分頁查詢。

當(dāng)數(shù)據(jù)庫數(shù)據(jù)量不是很大的時(shí)候，還有一種方法：

    就是先把數(shù)據(jù)庫中所有的數(shù)據(jù)全部查詢出來，在js中用ajax去查詢并用一個數(shù)組保存。

    然后在js中定義兩個全局變量，一個是page（第幾頁），一個是num（每頁的數(shù)量）。

    然后再通過一個for循環(huán)將數(shù)組中指定的數(shù)據(jù)渲染到頁面中。如：

     var questions = data.res_body;
                    var html = `<tr style="background-color: #ccc">
                    <th class="col-md-1 text-center">#</th>
                    <th class="col-md-3 text-center">易錯內(nèi)容</th>
                    <th class="col-md-3 text-center">錯在哪</th>
                    <th class="col-md-3 text-center">如何解決</th>
                    <th class="col-md-2 text-center" colspan="2">操作</th>
                </tr>`;
                // console.log(questions[0]);
                    for(var i = num*(page-1);i<num*page;i++){
                        // console.log(i);
                        if(questions[i]){
                            html +=    `<tr>
                                        <td>${questions[i].id}</td>
                                        <td>${questions[i].question}</td>
                                        <td>${questions[i].where}</td>
                                        <td>${questions[i].answer}</td>
                                        <td>
                                            <a href="#" id="xg">修改</a>
                                        </td>
                                        <td>
                                            <a href="#" id="del">刪除</a>
                                        </td>
                                    </tr>`;
                        }
                    }

這個方法不建議使用，因?yàn)樾枰獙?shù)據(jù)庫中所有的數(shù)據(jù)全部查詢出來，然后再進(jìn)行渲染，大大的浪費(fèi)了資源。推薦使用第一種。

            


歡迎關(guān)注微信公眾號:猴哥說前端