javascript - 包含来自 Codeigniter 的 PHP 数据的数据表子行-6ren

javascript - 包含来自 Codeigniter 的 PHP 数据的数据表子行

转载作者：行者123 更新时间：2023-11-27 23:49:26

我有一个数据表，显示数据库中总共 6 列的数据。第 7 列是一个“+”按钮，它向下展开并显示有关该特定条目的另外 7 条数据。我还在我的框架中使用 Codeigniter。最初，我使用 colspan 来隐藏行并向下挤压，发现这是一个禁忌，所以我在这里查看了数据表子行:https://datatables.net/examples/api/row_details.html但似乎数据需要在生成表之后才存在。

我现在有 HTML/PHP 来生成表并用数据填充它。数据从我的模型发送到 Controller 并发送到此 View :

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="dataTables-listlg">
        <thead>
            <th>ItemID</th>
            <th>Name</th>
            <th>Quantity</th>
            <th>Identified?</th>
            <th>Item Type</th>
            <th>Unique ID</th>
            <th>Details</th>
        </thead>
        <tbody>
            <?php foreach ($storage_items as $storageItem) { ?>
                <tr>
                    <td><?php echo $storageItem['nameid']; ?></td>
                    <td><?php echo $storageItem['name']; ?></td>
                    <td><?php echo $storageItem['amount']; ?></td>
                    <td><?php echo $storageItem['identify']; ?></td>
                    <td><?php echo $item_types[$storageItem['type']]; ?></td>
                    <td><?php echo $storageItem['unique_id']; ?></td>
                    <td><center><a data-toggle="collapse" data-parent="#accordion" href="#storagedetails<?php echo $storageItem['id']; ?>"><button type="button" class="btn btn-primary btn-circle btn-sm"><i class="fa fa-plus"></i></button></a></center></td>
                    <td>
                    <?php   echo form_open('/account/edititem', array('class' => 'form-inline'), array('id' => $storageItem['id'], 'item_loc' => "inventory", 'acctid' => $acct_data->account_id)); ?>
                    </td>
                </tr>
                <tr>
                    <td colspan="8" class="hiddenRow">
                        <div id="storagedetails<?php echo $storageItem['id']; ?>" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <strong>Refine level:</strong>&nbsp;<input type="number" name="refine" class="form-control" value="<?php echo $storageItem['refine']; ?>" <?php if ($storageItem['type'] != 4 && $storageItem['type'] != 5) { echo "readonly"; } ?> />
                                    </div>
                                    <div class="col-xs-2">
                                        <strong>Broken?:</strong>&nbsp;<input type="checkbox" name="attribute" class="form-control" value="1" <?php if ($storageItem['attribute'] == 1) { echo "checked"; } if ($storageItem['type'] != 4 && $storageItem['type'] != 5) { echo "disabled"; } ?> />
                                    </div>
                                    <div class="col-xs-2">
                                        <strong>Bound?:</strong>&nbsp;<input type="checkbox" name="bound" class="form-control" value="1" <?php if ($storageItem['bound'] == 1) { echo "checked"; } ?> />
                                    </div>
                                </div>
                                <br />
                                <div class="row">
                                    <div class="col-xs-2">
                                        <strong>Card 1:</strong>&nbsp;<input type="number" name="card0" class="form-control" value="<?php echo $storageItem['card0']; ?>" <?php if ($storageItem['type'] != 4 && $storageItem['type'] != 5) { echo "readonly"; } ?> /></br>
                                    </div>
                                    <div class="col-xs-2">
                                        <strong>Card 2:</strong>&nbsp;<input type="number" name="card1" class="form-control" value="<?php echo $storageItem['card1']; ?>" <?php if ($storageItem['type'] != 4 && $storageItem['type'] != 5) { echo "readonly"; } ?> /></br>
                                    </div>
                                    <div class="col-xs-2">
                                        <strong>Card 3:</strong>&nbsp;<input type="number" name="card2" class="form-control" value="<?php echo $storageItem['card2']; ?>" <?php if ($storageItem['type'] != 4 && $storageItem['type'] != 5) { echo "readonly"; } ?> /></br>
                                    </div>
                                    <div class="col-xs-2">
                                        <strong>Card 4:</strong>&nbsp;<input type="number" name="card3" class="form-control" value="<?php echo $storageItem['card3']; ?>" <?php if ($storageItem['type'] != 4 && $storageItem['type'] != 5) { echo "readonly"; } ?> /></br>
                                    </div>
                                </div>
                                <?php echo form_close(); ?>
                            </div>
                        </div>
                    </td>
                </tr>
            <?php } ?>
        </tbody>
    </table>
</div>

我现在用来制作表格的 JavaScript 是:

<script>
$(document).ready(function() {
    $('#dataTables-listlg').DataTable({
        "responsive": true,
        "lengthMenu": [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
        "searching": false,
        "defaultContent": "",
    });
});
</script>

哪里<td colspan="8" class="hiddenRow"> is，是我想要下拉子行的位置(在显示附加信息的条目下)。我已经看过这个示例，但我不知道如何将我的数据转换为正确的格式以将其放入数据表中以及它应该放在哪里。这是带有相关部分的 Controller :

$data['storage_items'] = $this->accountmodel->get_storage_items($aid);
$this->load->view('account/details',$data);
$this->load->view('footer'); // Where the javascript is above

型号:

function get_storage_items($aid) {
    $this->db->select('*');
    $this->db->from('storage')->order_by('storage.id', 'asc');
    $this->db->where('storage.account_id', $aid); // This is just sorting out the results from that specific account
    $q = $this->db->get();
    return $q->result_array();
}

看起来我需要将模型中的结果数组转换为 json/ajax，但不知道如何在生成表格后将其一直传递到页脚。如果您能提供任何帮助，我们将不胜感激。

---编辑---在查看了下面的答案并仔细思考后，我将内容更改为以下内容。下面是从 foreach 循环到结束的完整 View ，包括将内容放入“content”数组中的 Javascript:

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover display" id="dataTables-listlg">
        <thead>
            <th>ItemID</th>
            <th>Name</th>
            <th>Quantity</th>
            <th>Identified?</th>
            <th>Item Type</th>
            <th>Unique ID</th>
            <th>Details</th>
            <th>Options</th>
        </thead>
        <tbody>
            <?php foreach ($storage_items as $storageItem) { ?>
                <tr>
                    <td><?php echo $storageItem['nameid']; ?></td>
                    <td><?php echo $storageItem['name']; ?></td>
                    <td><?php echo $storageItem['amount']; ?></td>
                    <td><?php echo $storageItem['identify']; ?></td>
                    <td><?php echo $item_types[$storageItem['type']]; ?></td>
                    <td><?php echo $storageItem['unique_id']; ?></td>
                    <td class="details-control"></td>
                    <td>
                        <button type="submit" class="btn btn-success btn-sm <?php if ($check_perm['editstorageitem'] == 0) { echo "disabled"; } ?>" >Edit</button>&nbsp;
                        <button type="button" class="btn btn-danger btn-sm <?php if ($check_perm['editstorageitem'] == 0) { echo "disabled"; } ?>">Delete</button>
                    </td>
                </tr>
                <script>
                    var content = [];
                    content[<?php echo $storageItem["id"]; ?>] = '"'<?php echo form_open("/account/edititem", array("class" => "form-inline"), array("id" => $storageItem["id"], "item_loc" => "inventory", "acctid" => $acct_data->account_id)); ?> \
                            <div class="panel-body"> \
                                <div class="row"> \
                                    <div class="col-xs-2"> \
                                        <strong>Refine level:</strong>&nbsp;<input type="number" name="refine" class="form-control" value="<?php echo $storageItem["refine"]; ?>" <?php if ($storageItem["type"] != 4 && $storageItem["type"] != 5) { echo "readonly"; } ?> /> \
                                    </div> \
                                    <div class="col-xs-2"> \
                                        <strong>Broken?:</strong>&nbsp;<input type="checkbox" name="attribute" class="form-control" value="1" <?php if ($storageItem["attribute"] == 1) { echo "checked"; } if ($storageItem["type"] != 4 && $storageItem["type"] != 5) { echo "disabled"; } ?> /> \
                                    </div> \
                                    <div class="col-xs-2"> \
                                        <strong>Bound?:</strong>&nbsp;<input type="checkbox" name="bound" class="form-control" value="1" <?php if ($storageItem["bound"] == 1) { echo "checked"; } ?> /> \
                                    </div> \
                                </div> \
                                <br /> \
                                <div class="row"> \
                                    <div class="col-xs-2"> \
                                        <strong>Card 1:</strong>&nbsp;<input type="number" name="card0" class="form-control" value="<?php echo $storageItem["card0"]; ?>" <?php if ($storageItem["type"] != 4 && $storageItem["type"] != 5) { echo "readonly"; } ?> /></br> \
                                    </div> \
                                    <div class="col-xs-2"> \
                                        <strong>Card 2:</strong>&nbsp;<input type="number" name="card1" class="form-control" value="<?php echo $storageItem["card1"]; ?>" <?php if ($storageItem["type"] != 4 && $storageItem["type"] != 5) { echo "readonly"; } ?> /></br> \
                                    </div> \
                                    <div class="col-xs-2"> \
                                        <strong>Card 3:</strong>&nbsp;<input type="number" name="card2" class="form-control" value="<?php echo $storageItem["card2"]; ?>" <?php if ($storageItem["type"] != 4 && $storageItem["type"] != 5) { echo "readonly"; } ?> /></br> \
                                    </div> \
                                    <div class="col-xs-2"> \
                                        '<strong>Card 4:</strong>&nbsp;<input type="number" name="card3" class="form-control" value="<?php echo $storageItem["card3"]; ?>" <?php if ($storageItem["type"] != 4 && $storageItem["type"] != 5) { echo "readonly"; } ?> /></br> \
                                    </div> \
                                </div> \
                            <?php echo form_close(); ?> \
                        </div>'"';
                </script>
                <tr item_id="<?php echo $storageItem['id']; ?>">
                </tr>
            <?php } ?>
        </tbody>
    </table>
</div>

页脚中的 JavaScript 现在看起来像这样:

<script>
$(document).ready(function() {
    var table = $('#dataTables-listlg').DataTable({
        "responsive": true,
        "lengthMenu": [ [25, 50, 100, -1], [25, 50, 100, "All"] ],
        "searching": false,
        "defaultContent": "",
    });

// Add event listener for opening and closing details
    $('#dataTables-listlg tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(content[tr.attr('item_id')]).show();
            tr.addClass('shown');
        }
    });
 });
</script>

事实上，这个表中的‘unique_id’并不像我想象的那么“唯一”(我没有设计它，只是为其编写了后端)。然而，表“id”上有一个唯一的键，因此我用它来确保获得正确的值。

但是这不起作用。我在控制台中收到错误:

SyntaxError: missing ; before statement - 出现在以 content[<?php echo $storageItem["id"]; ?>] =... 开头的行上在 foreach 的每次迭代中

我还从有关 DataTables 的网页警告中收到错误:DataTables warning: table id=dataTables-listlg - Requested unknown parameter '0' for row 1. For more information about this error, please see http://datatables.net/tn/4

此外，子行不会下拉。我是否误解或犯了一个愚蠢的错误？

最佳答案

dataTables 子行动态地在表单上注入(inject)一行

<tr colspan="number of columns">
   <td>
      ... user content ... 
   </td>
</tr>

用户内容在调用时传递到注入(inject)行(来自示例):

row.child(<user content>).show();

你cannot使用隐藏行作为子行的基础。我建议您将循环中输出到隐藏行的所有内容收集到 JavaScript 数组中:

var content = [];

content[<? echo $storageItem['unique_id']; ?>] = '"'+<? echo form_open(...) + 来自您的 .hiddenRow 的一切。现在按照示例，填充每个 <tr>与 unique_id

<tr uniqueId="<? echo $storageItem['unique_id']; ?>">

通过添加 .details-control 专用一列来激活子行而不是调用函数 format()如示例中所示，执行

row.child(content[tr.attr('uniqueId')]).show();

<小时/>

更新。杰盖伊，怎么样？

1) 首先，只需插入简单的内容即可使您的代码正常工作。例如row.child('hello').show();这样您就会知道该部分正在工作。

2) 然后，构建 content分别数组。您不必在同一个 foreach() 中完成这一切。如果您将事情分解为“逻辑”操作，这可能会提高成功的机会。

3) 记得设置item_id关于<tr>的

4) 只要您使用 1.10.x，您的 dataTables 版本就不会在这种情况下过时

关于javascript - 包含来自 Codeigniter 的 PHP 数据的数据表子行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32852110/

文章推荐： C++ 最小值和最大值

文章推荐： c++ - 定义模板化类函数时出错

文章推荐： c++ - 仅针对单个函数的部分模板特化

文章推荐： javascript - 可折叠面板和空间填充

javascript - 在 Angular 数据表 rowCallback 函数上返回 Angular 数据表
我有一个带有嵌套数据的 angular 数据表，我正在尝试在行点击函数上创建另一个数据表。父数据表的 rowCallBack 函数。这是我的外部数据表 html；这是我生成数据表的方
数据表:在过滤器字符串中包含空格
我有一个字母数字列，其中包含诸如“1、2、2”之类的字符串。当我在搜索中输入“1, 2, 2”时，它似乎返回带有“1,”和“2,”的所有单元格。我该怎么做才能使搜索仅返回“1、2、2”？使用数据
数据表:如何使用附加参数重新加载服务器端数据
我有一个获取其数据服务器端的表，使用自定义服务器端初始化参数，这些参数因生成的报告而异。表格生成后，用户可以打开一个弹出窗口，他们可以在其中添加多个附加过滤器以进行搜索。我需要能够使用与原始表相同的初
数据表 + 隐藏所有列按钮
在 datatables我希望能够隐藏所有列，但似乎无法正确使用语法。这来自下面的代码和上面的链接，创建了一个显示所有列的按钮。有没有办法写这个以便我可以隐藏所有列？ {
数据表:根据值更改单元格颜色
我正在使用 DataTable 创建一个交互式表。我有 9 列，其中 5 列是值。我想根据它们的具体情况更改每个单元格的背景颜色。我已经开始尝试首先更改整行颜色，因为这似乎是一项更容易的任务。但是我
数据表 - 水平滚动时列标题不会移动
我有一个简单的例子来说明我的问题。我正在使用数据表 1.9。当数据表位于另一个 html 表内时，水平滚动时列标题不会移动。当它不在 html 表中时它工作正常。我的示例实际上取自他们的水平滚动示例，
数据表 - 使用嵌套独立表向下钻取行
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
数据表 + 如何将服务器端处理代码与文件导出代码结合起来
这是添加按钮以将数据导出到 csv、pdf、excel 的数据表示例...... fiddle here https://datatables.net/extensions/buttons/examp
angularjs - 数据表 - 更改按钮样式
是否有任何方法可以更改 angularjs 数据表中的按钮样式(colvis、copy、print、excel)。 vm.dtOptions = DTOptionsBuilder.newOptions
R 数据表 - 加入但过滤更新
我试图弄清楚如何加入 2 个数据表并更新第一个但应用了过滤器。 DT DT2 b c 1: 1 10 2: 2 10 3: 3 10 4: 4 10 5: 5 10 6: 6 10 7: 7 10
r - 数据表 - 从另一列按名称选择列的值
我有一个数据表，其中包含许多包含值的列。我还有另一列，它定义了我需要选择哪些列的值。我很难找到一种方法来做到这一点。这是一个简单的例子。 > d d value.1 value.2 name
r - 数据表 - 在几列上应用相同的函数来创建新的数据表列
我正在使用 data.table 包。我有一个数据表，表示用户在网站上的操作。假设每个用户都可以访问一个网站，并对其执行多项操作。我的原始数据表是 Action (每一行都是一个 Action )，我
r - 数据表。快速计算每列内更改次数的方法
我想知道每个变量在每个组中变化了多少次，然后将结果添加到所有组中。我是这样找到的: mi[,lapply(.SD, function(x) sum(x != shift(x), na.rm=T)
button - 数据表 - 添加按钮到页眉或页脚
有人可以向我解释一下如何向页眉或页脚添加按钮吗？Datatables 的开发者 Alan 说你必须离开网络服务器才能使用 Table Tools 来使用按钮。但我在独立计算机上离线运行 Datatab
R 数据表 - 使用当前行之前的所有行计算每一行
我希望按 id 和按顺序(时间)计算不同的东西。例如，与: dt = data.table( id=c(1,1,1,2,2,2,3,3,3), hour=c(1,5,5,6,7,8,23,23,23
jquery - 数据表:没有分页按钮
我正在尝试在 JIRA 小工具中使用数据表，但在我的表准备就绪后，没有可用的分页按钮。我有一个表，我正在以最简单的方式使用数据表:$("#mytableid").dataTable(); 浏览页面元素
jquery - 将输入值保存在子行中 - 数据表
我有 responsive 表单中的数据表。数据表生成 child rows在小型设备上。在这一行中，我有一些输入控件。这会导致两个问题。第一个问题:**隐藏子行中的值不会进入表单数据。** 第二
JQuery 数据表 Keydown
我在使用 JQuery DataTable 捕获 keydown 事件时遇到问题。我的目标是允许用户使用箭头键导航表的行。因此，当用户按下箭头键时，我想捕获 keydown 事件并移动表的选定行(这是
jQuery 数据表，以编程方式更改显示的行数
是否有任何方法可以以编程方式更改显示的行数，而无需从下拉列表中手动选择？我已经知道如何更改默认行数。当表首次加载时，我希望它加载所有行，然后“刷新”表以可能仅显示前 10 行。但我想以编程方式刷新表
jquery - 数据表 - 回调后保留选定的页码
我有一个数据表，我应该对其进行更改，例如我想更改内容的状态，但该内容位于表的第三页。当我更改它时，数据表会自行刷新到第一页。我想做的是保留选定的页码并在刷新后回调它。这可能吗？顺便说一句，我正在使用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 包含来自 Codeigniter 的 PHP 数据的数据表子行