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

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

我有HTML / PHP来生成表格并立即用数据填充它。 数据从我的模型发送到控制器并发送到此视图：

 
 
 
ItemID
 
Name
 
Quantity
 
Identified?
 
Item Type
 
Unique ID
 
Details
 
 
  
 
 
 
 
 
 
 
<a data-toggle="collapse" data-parent="#accordion" href="#storagedetails">
 
  'form-inline'), array('id' => $storageItem['id'], 'item_loc' => "inventory", 'acctid' => $acct_data->account_id)); ?> 
 
 
 
 <div id="storagedetails" class="panel-collapse collapse"> 
 
 
 Refine level: <input type="number" name="refine" class="form-control" value=""  /> 
 
 Broken?: <input type="checkbox" name="attribute" class="form-control" value="1"  /> 
 
 Bound?: <input type="checkbox" name="bound" class="form-control" value="1"  /> 
 
 
 
 
 Card 1: <input type="number" name="card0" class="form-control" value=""  />
 
 
 Card 2: <input type="number" name="card1" class="form-control" value=""  />
 
 
 Card 3: <input type="number" name="card2" class="form-control" value=""  />
 
 
 Card 4: <input type="number" name="card3" class="form-control" value=""  />
 
 
  
  
 
  
 
  

我现在用来制作表的javascript是：

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

在

地方，我想让子行下拉（在显示附加信息的条目下）。 我已经看过这个例子，但我不知道如何将我的数据转换成适当的格式，以便将它放入数据表中以及它应该去哪里。 以下是具有相关部分的控制器：

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

 
   var content = []; content[] = '"' "form-inline"), array("id" => $storageItem["id"], "item_loc" => "inventory", "acctid" => $acct_data->account_id)); ?> \ 
 \ 
 \ 
 \ Refine level: <input type="number" name="refine" class="form-control" value=""  /> \ 
 \ 
 \ Broken?: <input type="checkbox" name="attribute" class="form-control" value="1"  /> \ 
 \ 
 \ Bound?: <input type="checkbox" name="bound" class="form-control" value="1"  /> \ 
 \ 
 \ 
 \ 
 \ 
 \ Card 1: <input type="number" name="card0" class="form-control" value=""  />
 \ 
 \ 
 \ Card 2: <input type="number" name="card1" class="form-control" value=""  />
 \ 
 \ 
 \ Card 3: <input type="number" name="card2" class="form-control" value=""  />
 \ 
 \ 
 \ 'Card 4: <input type="number" name="card3" class="form-control" value=""  />
 \ 
 \ 
 \  \ 
'"';  <tr item_id=""> 
 
 
ItemID
 
Name
 
Quantity
 
Identified?
 
Item Type
 
Unique ID
 
Details
 
Options
 
 
  
 
 
 
 
 
 
 
 
 <button type="submit" class="btn btn-success btn-sm " >Edit  <button type="button" class="btn btn-danger btn-sm ">Delete 
 
  
 
  

并且我的页脚中的javascript现在看起来像这样：

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

实际上，这个表中的’unique_id’并不像我想象的那样“独特”（我没有设计它，只是为它编写后端）。 然而，表’id’上有一个唯一的键，所以我正在使用它来确保我得到正确的值。

然而，这不起作用。 我在控制台中收到错误：

SyntaxError: missing ; before statement SyntaxError: missing ; before statement – 出现在启动content[] =...的行content[] =... 在foreach的每次迭代中， content[] =...

我也从关于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

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

Answer 1

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

   ... user content ...   

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

 row.child().show(); 

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

 var content = []; 

content[] = content[] = '"'+ + .hiddenRow所有内容。现在按照示例，使用unique_id填充每个

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

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

---

更新 。 Jguy，怎么样

1）只需插入简单的内容，使代码工作。 例如row.child('hello').show(); 通过这个你会知道那部分是有效的。

2）然后，separetely建立content数组。 您不必在同一个foreach()完成所有操作。 如果您在“逻辑”操作中拆分，这可能会提高成功的机会。

3）记得在

上设置item_id

4）只要您使用1.10.x，您的dataTables版本就不能在此上下文中过时