当前位置: 首页 > 知识库问答 >
问题:

如何在不同表的Datatables中的一个单元格中呈现多行?

朱保赫
2023-03-14

我正在使用datatables创建一个表,但在其中呈现数据时遇到了一些困难。我的桌子结构是。

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,并且我的datatable的bcoz将生成5行,但我希望所有类别都在一个单元格中,并且我只希望一行而不是5行。

我在考虑在渲染函数内部做一些事情,比如

$('#example').DataTable({
    ajax: {
        url:"data.php",
        dataSrc:""
    },
    columns: [
        {data:"NAME"},
        {
            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论坛对我来说有点迷惑,因为我不擅长JavaScript。你们能帮我实现这个吗?什么类型的代码或什么代码我必须写在渲染功能内,以显示5个类别在一个单元格。提前谢谢你。

共有1个答案

应子真
2023-03-14

您可以在应用程序层中转换数据,以便在结果数组中只有表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, Cat 2, Cat3
        )

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

)

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

 类似资料:
  • 我一直在玩Electron,在试用了几个模板、应用程序和Electron网站上的应用程序之后,我对如何在一个框架和浏览器窗口中呈现几个HTML文件感到有些困惑。 通过研究该主题,我了解到我将使用BrowserWindow从上,但我想弄清楚如何构建一个侧导航,将内容加载到,例如: 在侧导航中会有命名的HTML文件,例如: 使用如何将这些内容加载到

  • 问题内容: 我想让imageIcon在每个单元格中以不同的方式显示,但是由于某种原因,当我对其进行编译时,图像不会显示。它显示图像的名称,但是图像本身不显示。这是一张图片。http://i49.tinypic.com/r9ibrn.jpg } 问题答案: 您可以在调用构造函数时传递图像的名称(请阅读)。

  • 问题内容: 我想显示一个从数据库到表单元格的段落。 结果是一个大的1行,而忽略了它在数据库中的组织方式。例如忽略“输入”(换行) 我想完全按照它在数据库中的编写方式来显示它。 例如,如果段落保存如下: 我希望它完全像这样显示,而不是: 问题答案: 您想使用应用于适当的CSS 。为此,请对所有表单元格执行此操作,例如: 另外,如果您可以更改标记,则可以在内容周围使用标签。默认情况下,Web浏览器使用

  • 问题内容: 我已经开始使用IPython Notebook 这是我在一个单元格中的代码 这工作正常,它将绘制两条线,但在同一张图表上。 我想在单独的图表上绘制每条线。如果图表彼此相邻,而不是一个接一个,那就太好了。 我知道我可以将第二行放在下一个单元格中,然后我将获得两个图表。但是我希望这些图表彼此靠近,因为它们表示相同的逻辑单元。 问题答案: 首先制作多个轴,然后将它们传递给Pandas绘图函数

  • 欢迎 在这个表中,我让列中提到的单元格可编辑,让用户随心所欲地制作所需的值...但是他们告诉我,这个列的值可以只取其中一个值:25,50,75,100,所以,他们问我制作一个选项菜单(就像图片中提到的那样),允许他们直接选择所需的值并快速工作。那么,我该如何解决它呢?(注意:我正在使用java秋千)

  • 问题内容: 我在SQLite中有两个表: 我的问题是,我该如何编写一个SQL查询来返回不在中的名称? 例如: 在这个例子中,SQL查询应返回的元素,并从,因为他们不是。 问题答案: 这是在“显而易见的”标准SQL中执行的操作: 还有其它方法,如使用,中子句和操作。

  • 我有一个servlet,它接收一组数据,进行处理,并根据表单提交将其写入excel文件或文本页面。在处理Excel时,所有的处理都在使用Apache POI的相应模型中进行。我正在尝试修改它,以便它根据所包含的数据对行进行颜色编码,但是,在将颜色应用于行之后,当我将工作簿写入文件输出流时,颜色不存在。我正在将数据处理成excel文件,如下所示: MCVE公司 我仍然得到excel文件,但格式不存在

  • 我正在使用Google Sheets API BatchUpdate()endpoint修改给定电子表格中特定单元格的背景色。 现在的问题是,我发送的请求只更新一个单元格,而我无法找到一个解决方案来一次性更新整行(我的工作表中每行大约有22个单元格) 我使用的请求主体是: 行和列参数中显示的值有点任意,因为对它进行了一些测试。 包含请求的Python代码: 这里的问题是,Google Sheets