Datatable Controls в заголовке/нижнем колонтитуле диалога

Question

У меня есть DataTable с 3 элементами управления; Общий поиск, разбиение на страницы и информация (т. Е. «Отображение от 1 до 10 из 88 записей»). Я хочу разместить эти элементы управления в верхнем и нижнем колонтитулах окна диалога jQuery.

DataTables предоставляет параметры, называемые sDOM, что позволяет указать, где разместить элементы управления DataTable. Но я хочу поместить элементы управления в верхний и нижний колонтитулы модального кода, что невозможно сделать с помощью sDOM.

Управление общим поиском может быть создано с помощью fnFilter, что достаточно просто.

Я думаю, что разбиение на страницы и информация потребует написания 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 в сноске (или любой другой)

forked fiddle ->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");