PHP+MySQL+LayUI分页查询显示

html构建前端样式,AJAX异步请求数据,再使用layui.table数据表格的方法渲染

html 文件

<div class="layui-card-body ">
        <table id="demo" class="layui-hide"></table>
        <div id="pageUD"></div>
</div>

<script src="js/jquery.min.js"></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('table', function () {
        var table = layui.table;

        table.render({
            elem: '#demo',
            method: 'post',
            url: 'paging.php',
            limit: limit,
            page: page,
            cellMinWidth: 80, //全局定义常规单元格的最小宽度,layui 2.2.1 新增
            cols: [[
                {checkbox: true},
                {field: 'id', width: 80, sort: true, title: 'ID'},
                {field: 'donor', width: 240, sort: true, title: '姓名/昵称'},
                {field: 'object', width: 180, sort: true, title: '捐助项目'},
                {field: 'money', width: 150, sort: true, title: '捐助金额'},
                {field: 'time', width: 200, sort: true, title: '捐助时间'},
                {field: 'type', width: 100, sort: true, title: '捐助类型'},
                {field: 'message', width: 200, title: '备注/留言'}
            ]]
        });
    });
</script>

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

laypage.php 文件

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

<?php
require ('db_config.php');

$sql = 'select count(*) from donation_copy1';
$result = $mysqli->query($sql);
$sum = mysqli_fetch_row($result);
echo ceil($sum[0]/1);
?>

paging.php 文件

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

<?php
header("content-type:text/html;charset=utf-8;");
require ('db_config.php');
$limit = $_POST['limit'];
$page = $_POST['page'];
$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;
?>

最终页面效果如下所示:
在这里插入图片描述
相关文章:《PHP语言实现网站登录功能》 | 《PHP实现退出登录功能》


作者:戴翔
电子邮箱:daixiangcn@outlook.com
微信开发者主页:Null
简介:中国公民,CSDN博客专家,秦淮区疾控中心托管社会公益组织指南针工作室志愿者,创业公司研发中心负责人,在校大学生。第二届大学生微信小程序应用开发大赛全国三等奖项目第一作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目总工程师。


要在Django中使用LayUIMySQL来展示数据表格,你需要进行以下步骤: 1. 配置数据库:首先,确保你已经按照之前提到的步骤正确配置了Django项目中的MySQL数据库。 2. 创建数据模型:在Django的模型文件(`models.py`)中定义你的数据模型,然后运行迁移命令将模型映射到数据库中。例如,创建一个简单的学生模型: ```python from django.db import models class Student(models.Model): name = models.CharField(max_length=100) age = models.IntegerField() ``` 3. 创建视图函数:在视图文件(`views.py`)中创建处理数据展示的视图函数。该函数从数据库中获取数据,并将其传递给模板以渲染。例如: ```python from django.shortcuts import render from .models import Student def student_list(request): students = Student.objects.all() return render(request, 'student_list.html', {'students': students}) ``` 4. 创建模板文件:在模板文件中(`student_list.html`),使用LayUI的表格组件来展示学生数据。例如: ```html {% extends 'base.html' %} {% block content %} <table class="layui-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> {% for student in students %} <tr> <td>{{ student.name }}</td> <td>{{ student.age }}</td> </tr> {% endfor %} </tbody> </table> {% endblock %} ``` 5. 配置URL映射:在URL配置文件(`urls.py`)中,将URL映射到视图函数。例如: ```python from django.urls import path from .views import student_list urlpatterns = [ path('students/', student_list, name='student_list'), ] ``` 这样,当访问`http://localhost:8000/students/`时,你将会看到使用LayUI表格展示的学生数据。 请确保已经正确加载LayUI的CSS和JS文件,以及引入了必要的LayUI样式和组件。如果你还没有引入LayUI的文件,请按照之前提到的步骤将LayUI的文件下载并放置在Django项目的静态文件目录中。 希望以上步骤能帮助你在Django中使用LayUIMySQL来展示数据表格。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

戴翔的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值