网页中分页的数据查询

2022-04-11 20:40:04 浏览数 (3)

有些网页中通常会有一个分页的样式,点击上一页或者下一页或者是具体的某一页的页码,页面中可以显示具体的从数据库查询的对应的数据。

代码语言:javascript复制
    以下介绍两种分页查询的方法。

    第一种也是最常用的,就是通过数据库的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语句则可以写为:

代码语言:javascript复制
 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条数据。大大的浪费了资源。可以用下面的方法来解决:

代码语言:javascript复制
原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来分页查询。

当数据库数据量不是很大的时候,还有一种方法:

代码语言:javascript复制
就是先把数据库中所有的数据全部查询出来,在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

0 人点赞