将列添加到数据表

Question

即时通讯使用Zend和Datatables（jQuery插件）。我有一个表像：

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="customerTable"> 
    <thead> 
     <tr> 
      <th><?php $this->trans('ID') ?></th> 
      <th><?php $this->trans('Name') ?></th> 
      <th><?php $this->trans('Comment') ?></th> 
      <th><?php $this->trans('Options') ?></th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
    <tfoot> 
     <tr> 
      <th><?php $this->trans('ID') ?></th> 
      <th><?php $this->trans('Name') ?></th> 
      <th><?php $this->trans('Comment') ?></th> 
      <th><?php $this->trans('Options') ?></th> 
     </tr> 
    </tfoot> 
</table> 

我创建我的数组这样的：

public function jsonAction() { 
    $this->_helper->layout->disableLayout(); 
    $albums = new Application_Model_DbTable_Customers(); 
    $albums = $albums->fetchAll()->toArray(); 

    foreach($albums as $entry) { 
     $x[] = array($entry['id'], $entry['name'], $entry['comment'], ''); 
    } 
    $this->view->json = json_encode(array("aaData" => $x)); 
} 

正如你看到的，即时通讯创造，我编码为JSON之后的数组。对于选项字段，我只是添加了''。

在选项字段，我想要一些编辑图标等等。我怎样才能到，很容易？不知怎的，这个解决方案似乎并不像它那么好。

我在想是这样的，预定义我的表没有选项字段。所以我的JSON匹配它。那么，这样做：

$('#myTable').datatables({ 
    'optionsColumn' : {path/to/icon.jpg, /url/it/calls, 
         second icon etc} 
}); 

或者只是像addColumn（HTML），它被重复每个条目。我不想将HTML放入我的动作中，然后通过JS糟糕的方式添加它。

感谢

Answer 1

我已经试过类似的东西，前几天，但我注意到数据表不喜欢你编辑表格的DOM已经初始化之后。但是，如果您的标签已经就位，您可以将其添加到td-elements中而不会出现问题。

所以我建议创建虚拟列（S）。你可以在DataTables初始化后隐藏它们（没有测试过，但我会假设在初始化之前隐藏它们也会起作用）。

Answer 2

我用大量的数据表中我的应用程序，我也做了图标的行为经常。我选择的解决此问题的方法是将它们作为正确转义的字符串包含在数组foreach中，然后按照您显示的方式将混乱信息以JSON形式输出到数据表。通常情况下，前两次它将不起作用，它会以静默方式失败或者出现“编码”错误，如“aData null”或“未知的sEcho”。你必须做的第一件事情是以某种方式输出JSON（我选择的方法是发送电子邮件），然后通过运行100次100次，你的图像将不正确地逃脱。

这当然是可以附加到使用fnUpdate现有的数据，但它会是一个evgen较慢的过程。

我会鼓励你遥遥领先于这一任务的想法。我最初使用DataTables DOM方法完成了所有表格，然后像用户开始抱怨加载时间缓慢时那样快速移动到JSON。随着我们的发展和用户开始添加比我预期更多的数据，这种方法变得太慢了，所以我们不得不切换到服务器端的DataTable事务。如果您希望一次处理超过1000条记录，我建议使用server side solution而不是这条路线。

Answer 3

有很多方法可以做到这一点。这是一个。现在，对于示例代码，注意到我的数据作为3D对象而不是2D数组进入“aaData”可能很重要。我不确定mDataProp甚至aColumns是否可用于2D数据。

2D（不我在用的）：

['column1', 'column2', 'column3'], ['moreColumn1', 'moreColumn2', 'moreColumn3] … etc … 

3D（这是我在用的）：

[{'key1': 'column1', 'key2': 'column2', 'key3': 'column3'}, {'key1': 'moreColumn1', … etc …}] 

要使用小工具添加一列，你只需要使用aColumns，并创建一个mDataProp为null的条目。您可以添加一个类到它（作为一个JavaScript函数的挂钩），并添加任何其他默认的内容（如一个或多个编辑图标，文本，或其他）：

"aoColumns": [ 
    { 
     "mDataProp": null, 
     "bSortable": false, 
     "sClass": "editControl", 
     "sDefaultContent": '<span class="editIcon"></span>' 
    }, 
    { 
     "mDataProp": "key1" 
    }, 
    { 
     "mDataProp": "key2" 
    }, 
    { 
     "mDataProp": "key3" 
    } 
] 

在这个例子中，图标被添加为span类的背景图像（CSS未显示）。还有其他方法可以实现此目标，并且我同意以前的发布者可能只想发送一个“占位符”列。这绝对适用于二维数组。如果您打算使用占位符专栏，那么您正在步入“混合关注”领域，但如果它是空白的，那么这可能是一个值得的折衷。

如果这是你走的路，我会在fnRowCallback中添加图像等。

"fnRowCallback": function(nRow, aData) { 

     // let's imagine we are sending a URL in one of the columns and we want it to 
     // be stored in a clickable first column. 

     var theLink = aData[1]; 

     $('td:eq(0)', nRow).addClass('clickable editIcon').attr('href', theLink); 

     return nRow; 
    } 

同样，图标本身将作为背景图像来创建，在这种情况下为TD元件。您可以使用.html()并添加所需的任何标记，但是，您可以改为使用图像元素。这只是一个例子......并非所有的浏览器都支持href作为td的属性。但希望它能以正确的想法为出发点。