数据库子行与来自Codeigniter的PHP数据 [英] Datatables child row with PHP data from Codeigniter

查看:257
本文介绍了数据库子行与来自Codeigniter的PHP数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



我有HTML / PHP生成表,并用数据填充它。数据从我的模型发送到控制器并到达这个视图:

 < div class =table-responsive> 
< table class =table table-striped table-bordered table-hoverid =dataTables-listlg>
< thead>
< th> ItemID< / th>
< th>名称< / th>
< th>数量< / th>
< th>已识别?< / th>
< th>项目类型< / th>
< th>唯一ID< / th>
< th>详细信息< / th>
< / aad>
< tbody>
<?php foreach($ storage_items as $ storageItem){?>
< tr>
< td><?php echo $ storeItem ['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 =collapsedata-parent =#accordionhref =#storagedetails<?php echo $ storageItem ['id'];?& >< button type =buttonclass =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 =8class =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>精简级别:< / strong>& nbsp;< input type =numbername =refineclass =form-controlvalue =<?php echo $ storageItem ['refine'];?> <?php if($ storageItem ['type']!= 4&& $ storageItem ['type']!= 5){echoreadonly; }?> />
< / div>
< div class =col-xs-2>
< strong> Broken?:< / strong>& nbsp;< input type =checkboxname =attributeclass =form-controlvalue =1 ($ storageItem ['attribute'] == 1){echochecked; } if($ storageItem ['type']!= 4&& $ storageItem ['type']!= 5){echodisabled; }?> />
< / div>
< div class =col-xs-2>
< strong>绑定?:< / strong>& nbsp;< input type =checkboxname =boundclass =form-controlvalue =1 ($ storageItem ['bound'] == 1){echochecked; }?> />
< / div>
< / div>
< br />
< div class =row>
< div class =col-xs-2>
< strong>卡1:< / strong>& nbsp;< input type =numbername =card0class =form-controlvalue =<?php echo $ storageItem ['card0'];?> <?php if($ storageItem ['type']!= 4&& $ storageItem ['type']!= 5){echoreadonly; }?> />< / br>
< / div>
< div class =col-xs-2>
< strong>卡2:< / strong>& nbsp;< input type =numbername =card1class =form-controlvalue =<?php echo $ storageItem ['card1'];?> <?php if($ storageItem ['type']!= 4&& $ storageItem ['type']!= 5){echoreadonly; }?> />< / br>
< / div>
< div class =col-xs-2>
< strong>卡3:< / strong>& nbsp;< input type =numbername =card2class =form-controlvalue =<?php echo $ storageItem ['card2'];?> <?php if($ storageItem ['type']!= 4&& $ storageItem ['type']!= 5){echoreadonly; }?> />< / br>
< / div>
< div class =col-xs-2>
< strong>卡4:< / strong>& nbsp;< input type =numbername =card3class =form-controlvalue =<?php echo $ storageItem ['card3'];?> <?php if($ storageItem ['type']!= 4&& $ storageItem ['type']!= 5){echoreadonly; }?> />< / br>
< / div>
< / div>
<?php echo form_close(); ?>
< / div>
< / div>
< / td>
< / tr>
<?php}?>
< / tbody>
< / table>
< / div>

我现在使用的表格是:

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

其中< td colspan =8class =hiddenRow > is,是我想让子行下拉(在显示附加信息的条目下)。我看到了这个例子,但我不知道如何获取我的数据到正确的格式把它放入datatable和它应该去。下面是具有相关部分的控制器:

  $ data ['storage_items'] = $ this-> accountmodel-> get_storage_items($ aid); 
$ this-> load-> view('account / details',$ data);
$ this-> load-> view('footer'); // javascript在上面

和模型:

  function get_storage_items($ aid){
$ this-> db-> select('*');
$ this-> db-> from('storage') - > order_by('storage.id','asc');
$ this-> db-> where('storage.account_id',$ aid); //这只是整理出特定帐户的结果
$ 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 displayid =dataTables-listlg>
< thead>
< th> ItemID< / th>
< th>名称< / th>
< th>数量< / th>
< th>已识别?< / th>
< th>项目类型< / th>
< th>唯一ID< / th>
< th>详细信息< / th>
< th>选项< / 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 =submitclass =btn btn-success btn-sm<?php if($ check_perm ['editstorageitem'] == 0){echodisabled;}? >编辑< / button>& nbsp;
< button type =buttonclass =btn btn-danger btn-sm<?php if($ check_perm ['editstorageitem'] == 0){echodisabled;}?& >删除< / 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& / strong>& nbsp;< input type =numbername =refineclass =form-controlvalue =<?php echo $ storageItem [refine]; ?><?php if($ storageItem [type]!= 4&& $ storageItem [type]!= 5){echoreadonly;}?> /> \
< / div> \
< div class =col-xs-2> \
< strong> Broken?:< / strong>& nbsp ;< input type =checkboxname =attributeclass =form-controlvalue =1<?php if($ storageItem [attribute] == 1){echochecked;} if($ storageItem [type]!= 4&& $ storageItem [type]!= 5){echodisabled;}?> /> \
< / div ; \
< div class =col-xs-2> \
< strong>绑定?:< / strong>& nbsp;< input type = name =boundclass =form-controlvalue =1<?php if($ storageItem [bound] == 1){echochecked;}?> />
< / div> \
< / div> \
< br /> \
< div class =row> \
< div class =col-xs-2> \
< strong>卡1:< / strong>& nbsp;< input type =numbername =card0class =form-controlvalue =<?php echo $ storageItem [card0];?> <?php if($ storageItem [type]!= 4&& $ storageItem [type]!= 5){echoreadonly; }?> />< / br> \
< / div> \
< div class =col-xs-2> \
< strong>卡2:< / strong>& nbsp;< input type =numbername =card1class =form-controlvalue =<?php echo $ storageItem [card1];?> <?php if($ storageItem [type]!= 4&& $ storageItem [type]!= 5){echoreadonly; }?> />< / br> \
< / div> \
< div class =col-xs-2> \
< strong>卡3:< / strong>& nbsp;< input type =numbername =card2class =form-controlvalue =<?php echo $ storageItem [card2];?> <?php if($ storageItem [type]!= 4&& $ storageItem [type]!= 5){echoreadonly; }?> />< / br> \
< / div> \
< div class =col-xs-2> \
'< strong>卡4:< / strong>& nbsp;< input type =numbername =card3class =form-controlvalue =<?php echo $ storageItem [card3];?> <?php if($ storageItem [type]!= 4&& $ storageItem [type]!= 5){echoreadonly; }?> />< / 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:,
});

//为开始和结束细节添加事件监听器
$('#dataTables-listlg tbody')。on('click','td.details-control',function(){
var tr = $(this).closest('tr');
var row = table.row(tr);

if(row.child.isShown()){
//此行已经打开 - 关闭它
row .child.hide();
tr.removeClass('shown');
}
else {
//打开此行
row.child tr.attr('item_id')])。show();
tr.addClass('shown');
}
});
});
< / script>

事实上,这个表中的'unique_id'不像我想象的没有设计它,只是为它写后端)。然而在表'id'上有一个唯一的键,所以这是我使用,以确保我得到正确的值。



这不工作。我在控制台中收到错误:



语法错误:missing; before语句 - 出现在开始内容的行[<?php echo $ storageItem [id];



我也收到了关于DataTables的网页警告的错误: DataTables警告:表id = dataTables-listlg - 请求行1的未知参数'0'。有关此错误的详细信息,请参阅http://datatables.net/tn/4



此外,子行不会下拉。

解决方案

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

 < tr colspan =number of columns> 
< td>
...用户内容...
< / td>
< / tr>

用户内容在调用时传递到注入的行(从示例中):

  row.child(< user content>)。s​​how(); 

不能使用隐藏行作为基为子行。我建议你收集你输出的所有内容到循环中的隐藏行到一个javascript数组:

  var content = [] ; 

content [< ;? echo $ storageItem ['unique_id']; ?>] = ''+< ;? echo form_open(...) + 。现在按照示例,使用 unique_id 填充每个< tr> / p>

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

专用一列激活子行c> .details-control ,而不是像示例中那样调用 format(),请执行

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




更新。Jguy,



1)fist使你的代码只通过插入简单的内容工作,例如 row.child('hello')。show();



2)然后,建立内容数组separetely。在 foreach()中这样做可以提高成功的机会,如果你在逻辑操作中拆分。



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

4)您的dataTables版本不能在此上下文中过期,只要使用1.10.x


I have a datatable that is displaying 6 total columns of data from my database. The 7th column is a "+" button that expands down and displays a further 7 pieces of data about that specific entry. I am also using Codeigniter for my framework. Originally I was using colspan to make the row hidden and squeeze down, and found out that was a no-no, so I looked into Datatables child rows here: https://datatables.net/examples/api/row_details.html but it appears that the data needs to be there after the generation of the table.

I have the HTML/PHP to generate the table and populate it with data now. The data is sent from my model to controller and to this 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>

The javascript I'm using now to make the table is:

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

Where the <td colspan="8" class="hiddenRow"> is, is where I want to make the child row drop down (UNDER the entry showing the additional information). I've seen the example but I have no idea how to get my data into the proper format to put it into the datatable and where it should go. Here is the controller with the relevant part:

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

And the model:

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

It looks like I need to get my array of results from my model into json/ajax but have no idea how I'd get this all the way to my footer AFTER the table is generated. Any help you can provide would be appreciated.

---Edit--- After looking over the answer below and mulling over thoughts, I have changed things to the following. Here is the complete view from foreach loop to the end, including the Javascript to put stuff in the 'content' array:

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

and my javascript in the footer looks like this now:

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

In fact, the 'unique_id' in this table is not as "unique" as I thought (I didn't design it, just writing the backend for it). There is however a unique key on the table 'id', so that's what I'm using to make sure I get the right value.

This however is not working. I am getting an error in the console:

SyntaxError: missing ; before statement - appears on the line that starts content[<?php echo $storageItem["id"]; ?>] =... in each iteration of the foreach

I'm also getting the error from the webpage warning about 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

Additionally, the child row doesn't drop down. Did I misunderstand or make a silly mistake?

解决方案

dataTables child rows dynamically injects a row on the form

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

user content is passed to the injected row upon the call (from the example) :

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

You cannot use hidden rows as a base for child rows. I would suggest you collect all the content you output to hidden rows in the loop into a javascript array :

var content = [];

content[<? echo $storageItem['unique_id']; ?>] = '"'+<? echo form_open(...) + everything from your .hiddenRow. Now follow the example, populate each <tr> with the unique_id

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

dedicate one column to activate the child row by adding a .details-control and instead of calling the function format() as in the example, do a

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


Update. Jguy, what about

1) fist make your code to work only by inserting simple content. For example row.child('hello').show(); By that you will know that part is working.

2) Then, build up the content array separetely. You do not have to do it all in the same foreach(). This may improve the chance of success if you split the things up in "logical" operations.

3) remember to set an item_id on the <tr>'s

4) your dataTables version cannot be outdated in this context as long as you are using 1.10.x

这篇关于数据库子行与来自Codeigniter的PHP数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆