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

Question

我有一个数据table，它显示了我数据库中总共 6 列的数据。第 7 列是一个“+”按钮，向下展开并显示关于该特定条目的另外 7 条数据。我也在为我的框架使用 Codeigniter。最初我使用 colspan 隐藏行并向下压缩，发现这是不行的，所以我在这里查看了 Datatables 子行：https://datatables.net/examples/api/row_details.html 但看起来数据需要在 table.

生成之后存在

我有 HTML/PHP 来生成 table 并现在用数据填充它。数据从我的模型发送到控制器和这个视图：

<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>

我现在用来制作 table 的 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"> 所在的位置是我要使子行下拉的位置（在显示附加信息的条目下方）。我看过这个例子，但我不知道如何将我的数据转换成正确的格式以将其放入 datatable 以及它应该去哪里。这是带有相关部分的控制器：

$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，但不知道在生成 table 之后如何将它一直放到页脚.如果您能提供任何帮助，我们将不胜感激。

---编辑--- 查看下面的答案并仔细考虑之后，我将内容更改为以下内容。这是从 foreach 循环到结束的完整视图，包括将内容放入 '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>

其实这个table里面的'unique_id'并不是我想的"unique"（我没有设计它，只是给它写了后台）。但是 table 'id' 上有一个唯一键，所以这就是我用来确保获得正确值的键。

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

SyntaxError: missing ; before statement - 出现在 foreach

的每次迭代中开始 content[<?php echo $storageItem["id"]; ?>] =... 的行上

我也从关于数据表的网页警告中得到错误：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

此外，子行不会下拉。我是误会了还是犯了愚蠢的错误？

Answer 1

dataTables子行在表单上动态插入一行

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

用户内容在调用时传递到注入的行（来自示例）：

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

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

var content = [];

content[<? echo $storageItem['unique_id']; ?>] = '"'+<? echo form_open(...) + 来自你 .hiddenRow 的一切。现在按照示例，用 unique_id

填充每个 <tr>

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

通过添加 .details-control 来指定一列来激活子行，而不是像示例中那样调用函数 format()，而是执行

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

更新。 Jguy，怎么样

1) 首先让您的代码仅通过插入简单的内容来工作。例如 row.child('hello').show(); 通过它您将知道该部分正在工作。

2) 然后，单独建立content数组。您不必在同一个 foreach() 中完成所有操作。如果您在 "logical" 操作中将事情分开，这可能会提高成功的机会。

3) 记得在 <tr> 的

上设置一个 item_id

4) 只要您使用的是 1.10.x

，您的 dataTables 版本就不会在此上下文中过时

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

Datatables child row with PHP data from Codeigniter

javascript

php

datatable

jquery

codeigniter