JQuery Datatable将分页移到顶部

Question

我想把分页属性移动到表格的右上角。我知道我必须使用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 可以使这些选项出现在顶部，但是分页出现在表格底部。希望能获得理解上的任何帮助。谢谢。

- Mary

Answer 1

由于您正在使用旧版API (<= 1.9.x)，因此需要确保对于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">'
});

- David Barker

Answer 2

请在 CSS 中添加以下代码：``.dataTables_wrapper .pagination { float: left !important; }``，同时还需要添加以下内容。

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

- aditya Patial

---

“bottam” 不是打错了吗？ - Roko C. Buljan

Answer 3

DOM选项的文档有一个很好的例子。

Length和filter在表格上方; 信息和分页在表格下方:

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

诀窍在于了解这个疯狂的dom选项，并知道lftrip到底是什么意思。

- Jess