最受欢迎

来自Codeigniter的带有PHP数据的数据表子行

Datatables child row with PHP data from Codeigniter

本文关键字：数据表 数据 Codeigniter 来自 PHP | 更新日期: 2023-09-27

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

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

<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">所在的位置是我想使子行下拉的位置(在显示附加信息的条目下)。我已经看到了这个例子，但我不知道如何把我的数据转换成适当的格式，把它放入数据表和它应该去的地方。以下是带有相关部分的控制器:

$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循环到结束的完整视图，包括将内容放入'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 -在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

另外，子行不会下拉。是我误解了还是犯了愚蠢的错误?

datatable的子行动态地向表单中注入一行

<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();

。那

呢?

1)首先让你的代码只通过插入简单的内容来工作。例如row.child('hello').show();，这样你就会知道那部分正在工作。

2)然后，分别构建content数组。您不必在同一个foreach()中完成所有操作。如果你把这些东西分成"逻辑"操作，这可能会提高成功的几率。

3)记住在<tr>上设置item_id

4)在这种情况下，只要你使用的是1.10，你的datatable版本就不会过时。x

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习