PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

PHP+MySQL+LayUI分页查询显示

autoload
autoload 转载
2021-04-12 16:17:00 2528浏览

    html构建前端样式,ajax异步请求数据,再使用<a style="color:#f60; text-decoration:underline;" href="https://m.php.cn/zt/18036.html" target="_blank">layui</a>.table数据表格的方法渲染,这样就完成了分页查询显示。

  •     html构建前端样式

  •  AJAX异步请求数据

  •     使用layui.table数据表格的方法渲染。

1.HTML文件

<p>
        </p>
        

<script></script><script>     var pageNum = 0;     var limit = 10;     var page = 1;     $.ajax({         url: "laypage.php",         async: false,         type: "post",         success: function (res) {             pageNum = res; //取到数据总条数             // console.log(res)         }     });     layui.use(&#39;table&#39;, function () {         var table = layui.table;         table.render({             elem: &#39;#demo&#39;,             method: &#39;post&#39;,             url: &#39;paging.php&#39;,             limit: limit,             page: page,             cellMinWidth: 80, //全局定义常规单元格的最小宽度,layui 2.2.1 新增             cols: [[                 {checkbox: true},                 {field: &#39;id&#39;, width: 80, sort: true, title: &#39;ID&#39;},                 {field: &#39;donor&#39;, width: 240, sort: true, title: &#39;姓名/昵称&#39;},                 {field: &#39;object&#39;, width: 180, sort: true, title: &#39;捐助项目&#39;},                 {field: &#39;money&#39;, width: 150, sort: true, title: &#39;捐助金额&#39;},                 {field: &#39;time&#39;, width: 200, sort: true, title: &#39;捐助时间&#39;},                 {field: &#39;type&#39;, width: 100, sort: true, title: &#39;捐助类型&#39;},                 {field: &#39;message&#39;, width: 200, title: &#39;备注/留言&#39;}             ]]         });     });</script>

    从前端获取page和limit两个变量,交给MySQL中的 limit 进行分页查询,将查询的结果拼装后以前端LayUI框架规定的json形式返回。

2.laypage.php 文件

     laypage.php 功能是获取数据总数并返回给前端展示。

<?php     require (&#39;db_config.php&#39;);
    $sql = &#39;select count(*) from donation_copy1&#39;;
    $result = $<a style='color:#f60; text-decoration:underline;' href="https://m.php.cn/zt/15713.html" target="_blank">mysqli->query($sql);
    $sum = mysqli_fetch_row($result);
    echo ceil($sum[0]/1);
?>

3.paging.php 文件

    laypage.php 功能是根据前端传递的变量指定参数分页查询数据并返回给前端展示。

<?php     header("content-type:text/html;charset=utf-8;");
    require (&#39;db_config.php&#39;);$limit = $_POST[&#39;limit&#39;];
    $page = $_POST[&#39;page&#39;];$new_page = ($page - 1)*$limit;
    $sql = "select * from donation_copy1 order by id desc limit " .$new_page.",".$limit;
    $result = $mysqli->query($sql);
    $sql2 = 'select * from donation_copy1';
    $count = mysqli_num_rows($mysqli->query($sql2));
    $arr = array();
    while ($row = mysqli_fetch_array($result)) {  
    $arr[] = $row;}$donation_data = array(  // 拼装成为前端需要的JSON
    'code'=>0,
    'msg'=>'',
    'count'=>$count,
    'data'=>$arr);
    echo json_encode($donation_data);
    //echo $sql;
    ?>

最终页面效果如下所示:
在这里插入图片描述

推荐:2021年PHP面试题大汇总(收藏)》《php视频教程

声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除