как изменить содержимое ячейки заголовка в dataTables? - PullRequest
Новая
       3

как изменить содержимое ячейки заголовка в dataTables?

4 голосов
/ 23 февраля 2012

Я использую плагин dataTables

В моих сортируемых столбцах я хочу заменить текст столбца кнопкой.

Однако, делая это: 

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

Я могу получить текст соответствующего столбца, НО 

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

Ничего не делает.

Может кто-нибудь сказать мне, почему я могу получать информацию из ячейки, но не редактировать ее содержимое? Не обязательно вопрос dataTables, но, возможно, кто-то столкнулся с чем-то похожим.

Спасибо за помощь!

РЕДАКТИРОВАТЬ: Это решение:
Внутри вашего вызова таблицы укажите, какие столбцы должны сортироваться = они получают .jqmSorter class 

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

Ответы [ 2 ]

2 голосов
/ 23 февраля 2012

Вы можете сделать это так:

При определении table columns (определите, не делаете ли вы это уже) и используйте атрибут sClass определения столбца таблицы (который находится в JSON).

После этого этот класс будет применен к столбцу таблицы.

После этого используйте функцию callback для таблиц: fnRowCallback

и установите HTML как 

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

Это будет вызываться при рендеринге каждой строки таблицы.

Если вы не хотите, чтобы это выполнялось в каждой строке, вы можете управлять этим с помощью условия if.

1 голос
/ 22 января 2014

Используйте fnRender в настройках aoColumns, используйте его для возврата 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'/>"
                 }
    }
]
...