將列添加到數據表

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的屬性。但希望它能以正確的想法爲出發點。