对话框页眉/页脚中的数据表控件

Question

我有一个带有3个控件的DataTable;一般搜索，分页和信息（即“显示88个条目中的1到10个”）。我想将这些控件放在jQuery Dialog窗口的页眉/页脚中。

DataTables提供了一个名为sDOM的选项，可以指定DataTable控件的放置位置。但是，我想将控件放在模态的页眉和页脚中，这不能用sDOM来完成。

可以使用fnFilter创建常规搜索控件，这很容易。

我认为Pagination和Info需要写一个custom pagination plugin，我想避免。

这是我目前在jsFiddle上取得的进展。

$('#modal').dialog({
modal: true,
    "height": 570,
    "width": 1170,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
    $(".myDialog").append('<div id="dialogFooter" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><div class="dataTables_info" id="DataTables_Table_X_info"></div></div>');
    }
});

var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers",
    "sDom": 'it<\"F\"p>"',
});

$("#modal").dialog("open");

Answer 1

你正在倒退：）

1. 创建dataTable
2. 创建模态
3. 将自动生成的控件从dataTable移动到页脚（或其他任何内容）
分叉小提琴 - ＆gt;的 http://jsfiddle.net/xK3TK/

我在示例中将页脚放在顶部并包含jQuery UI css（并且您忘记了BTW关闭模式标记</div>）

var dataTableJS = $('#dataTable').dataTable({
    "sPaginationType": "full_numbers"
    //"sDom": 'it<\"F\"p>"',
});

$('#modal').dialog({
    modal: true,
        "height": 570,
        "width": 770,
    autoOpen: false,
    auto: true,
    dialogClass: "myDialog",
    create: function () {
        $("#dataTable_info").detach().appendTo('#dialogFooter');
        $("#dataTable_paginate").detach().appendTo('#dialogFooter');
        $("#dataTable_length").detach().appendTo('#dialogFooter');
        $("#dataTable_filter").detach().appendTo('#dialogFooter');
    }
});

$("#modal").dialog("open");