jquery-ui button внутри jquery datatable

Question

Я использую jQuery datatables с поддержкой ролика темы, и я хотел бы поместить кнопку jquery-ui в столбце для каждой строки. Для того, чтобы сделать это, я использую следующий код:

oTable = $('#balances').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "bJQueryUI": true, 
    ... 
    "aoColumns": [ 
     ... 
     { 
      "mData": null, 
      "mRender": function(data, type, row) { 
       return $("<div />") 
        .append($("<button id='detail'>Details</button>").button()) 
        .html(); 
      } 
     } 
    ] 
}); 

Кнопки рисуются и я могу прикрепить события к ним, но мне кажется, что я что-то не хватает (например, эти кнопки не» t анимация при перемещении мыши над ними). Как я могу это исправить? Есть ли лучший способ сделать это? Спасибо заранее.

Answer 1

Поскольку использование нескольких одинаковых Идентификаторы не рекомендуется, я предложил бы использовать класс вместо этого, и перемещение .button() вызов дальше в коде:

oTable = $('#balances').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "bJQueryUI": true, 
    ... 
    "aoColumns": [ 
     ... 
     { 
      "mData": null, 
      "mRender": function(data, type, row) { 
       return $("<div />") 
        .append($("<button class='detail'>Details</button>")) 
        .html(); 
      } 
     } 
    ] 
}); 
$("button.detail").button();