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

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

2D（不我正在使用的内容）：

['column1', 'column2', 'column3'], ['moreColumn1', 'moreColumn2', 'moreColumn3] &hellip; etc &hellip;

3D（这个就是我正在使用的）：

[{'key1': 'column1', 'key2': 'column2', 'key3': 'column3'}, {'key1': 'moreColumn1', &hellip; etc &hellip;}]

要添加带有窗口小部件的列，您只需要使用aoColumns，并创建一个mDataProp为null的条目。您可以向其添加一个类（作为JavaScript函数的钩子）并添加任何其他默认内容（例如一个或多个编辑图标，文本或其他内容）：

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

在此示例中，图标被添加为span类的背景图像（CSS未显示）。还有其他方法可以实现这一目标，我同意早期的海报，您可能只想发送一个“占位符”列。这肯定适用于2D阵列。如果您打算使用占位符列，那么您将进入“混合关注点”区域，但如果它是空白则可能是值得的权衡。

如果这是你的方式，我会在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的属性。但希望它能以正确的想法为出发点。

Answer 2

我几天前尝试过类似的东西，但是我注意到DataTables不喜欢你在初始化后编辑表的DOM。但是，如果您的代码已经到位，您可以毫无问题地向td元素添加内容。

所以我建议创建虚拟列。您可以在初始化DataTables之后隐藏它们（尚未测试它，但我会假设在初始化之前隐藏它们也可以工作）。

Answer 3

我在我的应用程序中广泛使用DataTables，而且我也经常使用行动的图标。我选择的攻击此问题的方法是将它们作为正确转义的字符串包含在数组foreach中，然后以您显示的方式将混乱作为JSON输出到Datatables。通常，前几次它将无法工作，它将无声地失败或者出现“编码”错误，如“aData null”或“sEcho unknown”。你需要做的第一件事就是以某种方式输出JSON（我选择的方法是发送电子邮件），然后通过jsonlint.com运行99次，100次，你的图像将被不正确地转义。

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

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

将列添加到数据表

3 个答案: