如何更改dataTables中的標題單元格的內容？

我正在使用dataTables插件如何更改dataTables中的標題單元格的內容？

在我的可排序列上，我想用按鈕替換列文本。

但是這樣做：

$(oSettings.aoColumns[i].nTh).text();

我可以檢索各個欄的文本，但

$(oSettings.aoColumns[i].nTh).text("some text"); 
$(oSettings.aoColumns[i].nTh).html("<a href='#'>some button</a>");

沒有做任何事情。

有人可以告訴我爲什麼我可以從單元中檢索信息但不能編輯它的內容嗎？不一定是數據表的問題，但也許有人遇到類似的事情。

感謝您的幫助！

編輯：這是解決方案：
內，您的表調用指定，哪些列應該是排序=這些獲得.jqmSorter類

"aoColumns": [ 
    /* Select */ {"bSortable": false }, 
    /* Type */  {"sClass": "jqmSorter"}, 
    /* From */  {"bSortable": false }, 
    /* Status */ {"bSortable": false }, 
],

然後調用fnHeaderCallback其中我用JQM按鈕替換標題單元格內容：

"fnHeaderCallback": function(nHead) {  
     $(nHead).closest('thead').find('.jqmSorter').each(function() { 
      var sortTitle = $(this).text(), 
      sortButton = 
      $(document.createElement("a")).buttonMarkup({ 
        shadow: false, 
        corners: false, 
        theme: 'a', 
        iconpos: "right", 
        icon: "ui-icon-radio-off" 
        }) 
      sortButton.find('.ui-btn-text').text(sortTitle); 
      $(this).html(sortButton) 
      sortButton.addClass("colHighTrigger");    
      }); 
     }

來源

2012-02-23 frequent

你想在數據表呈現的時候這樣做，或者你想在呈現自己的時候這樣做嗎？ – linuxeasy 2012-02-23 11:53:37

它應該只發生一次，當datatable呈現。該按鈕僅用於視覺效果（Jquery Mobile圖標專用按鈕，我根據排序順序切換圖標類） – frequent 2012-02-23 11:58:32

您可以這樣做：

在定義table columns（定義是否您已經在做）時，並使用表列定義（使用JSON）的sClass屬性。

之後，該類將應用於表列。

在此之後，使用數據表的callback功能：fnRowCallback

，並在此設置的HTML作爲

$(nRow, '.your_class').html('Your HTML Values');

當表的每一行被渲染這將被調用。

如果你不希望它在每一行都做，你可以用if條件來控制它。

來源

2012-02-23 12:04:44 linuxeasy

很酷。讓我們看看我是否得到這個工作。 – frequent 2012-02-23 12:09:11

謝謝！有效。儘管我使用了fnHeaderCallBack。你也可以在你的答案中改變它。最後一個問題。你知道在兩行標題中選擇標題單元格的人嗎？上面的解決方案只抓取第一個標題行。 – frequent 2012-02-23 12:28:49

也發現了這一點。可以了，好了。 Thx再次。 – frequent 2012-02-23 12:52:20

在你的aoColumns設置中使用fnRender，用它返回特定單元格的HTML代碼，下拉菜單，複選框，任何你想要的東西都可以在那裏工作。

"aoColumns": [ 
    /*Col 1*/ 
    { 
    "mData": "RowID", 
    "bSortable": false, 
    "sClass": "jqmSorter", 
    "fnRender": function(obj){ 
        return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>" 
       } 
    }, 
    /*Col 2*/ 
    { 
    "bSortable": false, 
    "sClass": "jqmSorter", 
    "fnRender": function(obj){ 
        return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>" 
       } 
    } 
]

來源

2014-01-22 13:45:13 Pierre

如何更改dataTables中的標題單元格的內容？

回答

相關問題