如何更改数据表中标题单元格的内容？答案

【问题标题】：how to change the content of a header cell in dataTables?如何更改数据表中标题单元格的内容？
【发布时间】：2012-03-13 19:44:27
【问题描述】：

我正在使用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");             
             });
       }

【问题讨论】：

你想在渲染数据表时这样做还是想在渲染自身时这样做？
它应该只发生一次，当数据表被渲染时。该按钮仅用于视觉外观（Jquery Mobile 仅图标按钮，我根据排序顺序切换图标类）

标签： javascript jquery html datatables innerhtml

【解决方案1】：

你可以这样做：

在定义 table columns 时（如果您还没有这样做，请定义），并使用表列定义的 sClass 属性（在 JSON 中）。

之后，该类将应用于表格列。

之后，使用数据表的callback函数：fnRowCallback

在此，将 html 设置为

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

在渲染表格的每一行时都会调用它。

如果您不希望它在每一行上执行，您可以使用 if 条件来控制它。

【讨论】：

谢谢！有效。我虽然使用了 fnHeaderCallBack。您可能也想在答案中更改这一点。最后一个问题。你知道谁在两行标题中选择标题单元格。上面的解决方案只抓取第一个标题行。
也发现了这一点。搞定。再次感谢。

【解决方案2】：

在您的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'/>"
                 }
    }
]

【讨论】：