如何更改dataTables中的标题单元格的内容？ [英] how to change the content of a header cell in dataTables?

问题描述

我使用 dataTable 插件

在我的可排序的列我想用按钮替换列文本。

然而，这样做：

  $（oSettings.aoColumns [i] .nTh）.text（）; 
  

我可以检索相应列的文本，但

  $（oSettings.aoColumns [i] .nTh）.text（some text）; 
 $（oSettings.aoColumns [i] .nTh）.html（< a href ='＃'>一些按钮< / a>）; 
  

不做任何事。

可以有人告诉我为什么我可以从单元中检索信息，但不能编辑它的内容？不一定是dataTables的问题，但也许有人遇到了类似的问题。

感谢您的帮助！

编辑：这是解决方案：

在表格调用中指定哪些列应该可排序=这些获取 .jqmSorter 类

 aoColumns：[
 / *选择* / {bSortable：false}，
 / *类型* / {sClass：jqmSorter}，
 / *从* / {bSortable：false}，
 / *状态* / {bSortable：false}，
]， 
  

然后调用我要替换标题单元格内容的 fnHeaderCallback 使用JQM按钮：

$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' （）.add'）。find（'。jqmSorter'）。each（function（）{
var sortTitle = $（this）.text（），
sortButton =
$（document.createElement a））.buttonMarkup（{
阴影：假，
角：假，
主题：'a'，
iconpos：右，
图标：ui-icon-radio-off
）}
sortButton.find（'。ui-btn-text'）。text（sortTitle）;
$（this）.html（sortButton）
sortButton.addClass（colHighTrigger）;
}）;

解决方案

你可以这样做：

定义 表列 （定义你是否已经这样做了），并使用表列定义（JSON中的）的 sClass 属性。

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

在此之后，使用 callback datatables函数： fnRowCallback $ b

，在这里，将html设置为

  $（nRow，'.your_class'）。html（'您的HTML值'）; 
  

当表格的每一行都被渲染时，将会调用它。

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

I'm using the dataTables plugin

On my sortable columns I want to replace the column text with a button.

However doing this:

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

I can retrieve the text of the respective column, BUT

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

Does not do anything.

Can somebody tell me why I can retrieve info from a cell but not edit it's content? Not necessarily a dataTables question, but maybe someone has run into something similar.

Thanks for help!

EDIT: This is the solution:
Inside your table call specify, which columns should be sortable = these get a .jqmSorter class

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

Then call the fnHeaderCallback in which I'm replacing the header cell content with a JQM button:

   "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");             
             });
       }

解决方案

You can do it this way:

While defining table columns (define if you not doing it already), and use the sClass attribute of the table column definition (which is in JSON).

After this, that class will be applied to the table column.

After this, use the callback function of datatables : fnRowCallback

and in this, set the html as

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

This will be called when each row of the table is rendered.

If you don't want it to do on each row, you can control that with an if-condition.

这篇关于如何更改dataTables中的标题单元格的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！