1. 程式人生 > 其它 >網頁中分頁的資料查詢

網頁中分頁的資料查詢

有些網頁中通常會有一個分頁的樣式,點選上一頁或者下一頁或者是具體的某一頁的頁碼,頁面中可以顯示具體的從資料庫查詢的對應的資料。

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

    第一種也是最常用的,就是通過資料庫的limit來指定查詢某個位置的幾條資料。limit語法格式為:

            limit[offset] rows   

                    offset--是偏移量,也就是跳過表中多少條資料之後在查詢,可省略,表示從第一條開始;

                    rows--是需要查詢的具體的條數;

例如:

①select * from db limit 10000,100

上邊SQL語句表示從表db中拿資料,跳過10000行之後,拿100行

 ②select * from db limit 0,100

表示從表db拿資料,跳過0行之後,拿取100行

③select * from db limit 100

這條SQL跟②的效果是完全一樣的,表示拿前100條數

 

然後用這種方法進行分頁查詢的時候,則需要傳遞兩個引數,第一個是page,也就是第幾頁,第二個是num,也就是每一頁需要多少條資料。

然後sql語句則可以寫為:

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

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

 

以上的sql語句就可以在db的表中查詢到對應的資料,兩種方法都可以實現,後面一句加上order by 是因為有些時候,查詢的時候需要從後面往前面查詢,這時就需要用order by對資料進行排序,預設是升序,若需降序,則在後面新增DESC降序排列。

但是這種方法有一個缺陷,如果資料條數不多,則沒什麼影響。但是如果資料量很大,因為limit是將偏移量的資料和需要的資料一起查詢出來,然後只取後面需要的資料。比如limit 100000,10;這樣明明只需要10條資料,但是卻在資料庫中查詢了100010條資料。大大的浪費了資源。可以用下面的方法來解決:

原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  

 

注:假設id是主鍵,內層是通過主鍵判斷,外層也是通過主鍵查詢,所以效能大大提升了。

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

當資料庫資料量不是很大的時候,還有一種方法:

就是先把資料庫中所有的資料全部查詢出來,在js中用ajax去查詢並用一個數組儲存。

然後在js中定義兩個全域性變數,一個是page(第幾頁),一個是num(每頁的數量)。

然後再通過一個for迴圈將陣列中指定的資料渲染到頁面中。如:

 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">易錯內容</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>

 

更多內容請見原文,文章轉載自:https://blog.csdn.net/weixin_44519496/article/details/118522799