3

ここのdatatables Webサイトに実際の例があります： http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html

しかし、例ではjquery-ui 1.8を使用していると思いますが、この例はjquery-uiの新しいバージョンでは機能しません。具体的には、このコード:

"show": function(event, ui) {
  var table = $.fn.dataTable.fnTables(true);
  if ( table.length > 0 ) {
    $(table).dataTable().fnAdjustColumnSizing();
  }
}

「表示」イベントは廃止されたと思います： http://jqueryui.com/upgrade-guide/1.9/#deprecated-show-event-renamed-to-activate

「show」を「activate」に置き換えてみましたが、うまくいかないようです。他の誰かがこの問題を抱えていますか? 私はそれを機能させる方法を理解できません。

4

3 に答える 3

2

activateこれは、最新バージョンの jQuery と jQuery UI http://jsfiddle.net/5AavQ/3/を使用する実際の例です。外部リソースをチェックして、含まれているファイルを確認してください。すべての外部 .js ( jQuery、jQuery UI、DataTables ) および .css ( jQuery UI、DataTables Demo はオプション) ファイルを必ず含めてください。

于 2013-06-19T13:14:41.740 に答える
1

この問題の実用的な解決策を別のスレッドに投稿しました。複数のタブの複数のテーブルで動作します。コードは次のとおりです。

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
activate: function (event, ui) {
    var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
    if (oTable.length > 0) {
        oTable.fnAdjustColumnSizing();
    }
}
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
    { "sWidth": "10%", "aTargets": [-1] }
]
};
// initialize data table
$('table').dataTable(optDataTables);

});
于 2013-10-02T09:41:27.067 に答える