如何在不同表的数据表的单元格中呈现多行?

如何解决如何在不同表的数据表的单元格中呈现多行?

我正在使用数据表创建表,但在呈现数据时遇到了一些麻烦。我的表格结构是。

TABLE_1
|------|------|-------|
|  ID  | NAME | PHONE |
|------|------|-------|
TABLE_2
|------|------------|----------|
|  ID  | TABLE_1_ID | CATEGORY |
|------|------------|----------|

这是我的PHP代码

$db  = new Database; // Database connection
$sql = "SELECT a.*,b.* FROM TABLE_1 a,TABLE_2 b WHERE a.ID = b.TABLE_1_ID";
$exe = $db->select($sql);
$result = array();
foreach ($exe as $rows) {
    $result[] = $rows;
}
echo json_encode($result);

这是我的JavaScript

$('#example').DataTable({
    ajax: {
        url:"data.php",dataSrc:""
    },columns: [
        {data:"NAME"},{data:"CATEGORY"}
    ]
});

到目前为止,一切正常,数据已完美加载。但是问题是,假设我在TABLE_1中只有一行,而在TABLE_2中只有5行,其中我数据表的TABLE_1.ID = TABLE_2.TABLE_1_ID和bcoz正在生成5行,但是我希望一个单元格,我只希望一行而不是5行。

我正在考虑在render函数中做一些事情,例如

$('#example').DataTable({
    ajax: {
        url:"data.php",{
            data:"ID",render: function(data,type,row){
                // Some stuff to render 5 Category in a single cell
                // Using the ID from row.ID (maybe)
                // how to return 5 CATEGORY in this cell
            }
        }
    ]
});

但是我真的不知道这个过程,而google + stackoverflow + datatables论坛对我来说有点混乱bcoz我的Java语言不好。 你们可以帮我实现这一目标吗?为了在单个单元格中显示5个类别,我必须在呈现功能中编写哪种类型的代码或编写什么代码。 预先感谢。

解决方法

您可以在应用程序层中转换数据,以便在结果数组中仅包含表a的行以及相关的类别名称。

首先,您需要一个有序的结果集,例如

select a.id,a.phone,a.name,b.category 
from table_1 a
join table_2 b 
  on a.id = b.table_1_id
order by a.id asc

然后遍历所有记录并烹饪数据集

$result = [];
$currentParent = false;
$data = null;
foreach ($rows as $row) {
    /* 
     * if id is changed then its a different record
     * prepare data for new row and create a comma separated string of category names
     */
    if ($currentParent != $row['id']) {
        if($data != null){ // for first and intermediate rows
            $result[]= $data;
        }
        $data = ['name'=> $row['name'],'category'=> ''];
        $currentParent = $row['id'];
    }
    $data['category'] = empty($data['category']) ? $row['category']: $data['category'] .",". $row['category'];
}
$result[]= $data; // add data for last row
echo json_encode($result);

结果数组看起来像

Array
(
    [0] => Array
        (
            [name] => item 1
            [category] => Cat 1,Cat 2,Cat3
        )

    [1] => Array
        (
            [name] => item 2
            [category] => Cat 1,Cat3
        )

    [2] => Array
        (
            [name] => item 3
            [category] => Cat 1,Cat3
        )

)

另一种速记方法(但不是首选方法)是在查询级别应用聚合方法,例如,如果您使用的是MySQL,则可以使用group_concat,但是它具有最大字符数限制(可调整)的限制。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 <select id="xxx"> SELECT di.id, di.name, di.work_type, di.updated... <where> <if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 <property name="dynamic.classpath" value="tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams['font.sans-serif'] = ['SimHei'] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -> systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping("/hires") public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate<String
使用vite构建项目报错 C:\Users\ychen\work>npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-