JQuery Datatable 将分页移到顶部答案

【问题标题】：JQuery Datatable moving the pagination to the topJQuery Datatable 将分页移到顶部
【发布时间】：2014-09-04 15:43:00
【问题描述】：

我正在尝试将分页属性移动到表格的右上角。我知道我必须使用 dom 属性。

 $(document).ready( function () {   
    $('#myTbl').dataTable({   
        "bInfo":true,
        "bJQueryUI": true,
        "bProcessing": true,
         "bPaginate" : true,
         "aLengthMenu": [[50,100,150,200,250,300,-1], [50,100,150,200,250,300,"All"]],
        "iDisplayLength": 50,
        "sPaginationType": "full_numbers",
        "dom": '<"top"flp>rt<"bottom"i><"clear">'           

    });
});

我认为通过在顶部使用 flp 会使这些选项出现在顶部，但是分页出现在表格的底部。会感谢任何帮助理解这一点。谢谢。

【问题讨论】：

标签： jquery jquery-pagination

【解决方案1】：

当您使用旧 API (dom 的匈牙利符号，它是一个字符串，所以它是 sDom。

$('#myTbl').dataTable({   
    "bInfo":true,
    "bJQueryUI": true,
    "bProcessing": true,
    "bPaginate" : true,
    "aLengthMenu": [[50,100,150,200,250,300,-1], [50,100,150,200,250,300,"All"]],
    "iDisplayLength": 50,
    "sPaginationType": "full_numbers",
    "sDom": '<"top"flp>rt<"bottom"i><"clear">'
});

【讨论】：

【解决方案2】：

放入 css ``.dataTables_wrapper .pagination { 浮动：左！重要； }`

还添加`

   $('#tableid').dataTable({       
        "pagingType": "full_numbers",
        "ordering": false,
        "bLengthChange": false,
        "searching": false,
        "info": false,
        "dom": '<bottam>p',  (this line only)
    });`

【讨论】：

bottam 不是错字吗？

【解决方案3】：

dom option 的文档有一个很好的例子。

Length 和filter 在table、information 和pagination 上方：

$('#example').dataTable( {
  "dom": '<lf<t>ip>'
} );

诀窍在于了解这个疯狂的 dom 选项并了解 lftrip 的含义。

【讨论】：