DataTable添加导出按钮后分页不显示的解决方法咨询

我使用的DataTable具备导出PDF、Excel及打印按钮，但分页功能未显示。查阅同类示例后发现，添加按钮后普遍存在该问题，请问如何解决？相关DataTable的JS代码如下：

var oTable = $('#datatables').dataTable({ 
    destroy: true, 
    "bSort": false, 
    dom: 'Bfrtip', 
    buttons: [ 
        { 
            extend: 'excelHtml5', 
            footer: true , 
            exportOptions: { columns: [0, 1, 2, 3, 4,5,6,7] } 
        }, 
        { 
            extend: 'pdfHtml5', 
            exportOptions: { columns: [0, 1, 2, 3, 4, 5] }, 
            customize: function (doc) { 
                //Remove the title created by datatTables 
                doc.content.splice(0, 1); 
                //Create a date string that we use in the footer. Format is dd-mm-yyyy 
                var now = new Date(); 
                var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear(); 
                // doc.pageMargins = [20, 60, 20, 30]; 
                // Set the font size fot the entire document 
                doc.defaultStyle.fontSize = 9; 
                // Set the fontsize for the table header 
                doc.styles.tableHeader.fontSize = 9; 
                // Create a header object with 3 columns 
                // Left side: Logo 
                // Middle: brandname 
                // Right side: A document title 
                doc['header'] = (function () { 
                    return { 
                        columns: [ 
                            { alignment: 'left', italics: true, text: 'dataTables', fontSize: 18, margin: [10, 0] }, 
                            { alignment: 'right', fontSize: 14, text: $("#drpIller option:selected").text() + " " + $("#drpIlceler option:selected").text() } 
                        ], 
                        margin: 20 
                    } 
                }); 
                doc['footer'] = (function (page, pages) { 
                    return { 
                        columns: [ 
                            { alignment: 'left', text: ['Oluşturulma tarihi: ', { text: jsDate.toString() }] }, 
                            { alignment: 'right', text: ['page ', { text: page.toString() }, ' / ', { text: pages.toString() }] } 
                        ], 
                        margin: 20 
                    } 
                }); 
                var objLayout = {}; 
                objLayout['hLineWidth'] = function (i) { return .5; }; 
                objLayout['vLineWidth'] = function (i) { return .5; }; 
                objLayout['hLineColor'] = function (i) { return '#aaa'; }; 
                objLayout['vLineColor'] = function (i) { return '#aaa'; }; 
                objLayout['paddingLeft'] = function (i) { return 4; }; 
                objLayout['paddingRight'] = function (i) { return 4; }; 
                doc.content[0].layout = objLayout; 
            } 
        }, 
        { extend: 'print' } 
    ], 
    "responsive": true, 
    "data": data, 
    "columns": [ 
        { "data": "A", "autoWidth": true}, 
        { "data": "S", "autoWidth": true}, 
        { "data": "D", "autoWidth": true }, 
        { "data": "E", "autoWidth": true}, 
        { "data": "F", "autoWidth": true }, 
        { "data": "G", "autoWidth": true } 
    ], 
    "bAutoWidth": false 
}); 

这个问题我之前也踩过坑，核心原因是DataTables的dom配置项没有正确处理分页组件的渲染逻辑，或者组件排列顺序导致分页控件被隐藏了。

为什么会出现这个问题？ #

DataTables的dom参数是用来控制表格所有功能组件（按钮、搜索框、分页、信息提示等）的显示和排列顺序的。你当前设置的dom: 'Bfrtip'，虽然看起来包含了分页对应的p标识，但这种紧凑的排列方式可能让分页控件被按钮容器挤到了不可见的区域，或者因为缺少容器包裹导致渲染异常。

默认情况下，DataTables的dom是lfrtip，包含了这些组件：

• l：每页条数选择器
• f：搜索框
• r：加载提示
• t：表格主体
• i：数据信息提示
• p：分页控件

当你添加按钮组件B时，需要把它合理整合到dom配置里，同时确保分页的p标识能被正常渲染。

具体解决方法 #

推荐用自定义容器布局的dom配置，这样能清晰控制各个组件的位置，避免互相挤压：

dom: '<"top"Bf>rt<"bottom"ip><"clear">'

这个配置的意思是：

• 顶部容器：放置按钮(B)和搜索框(f)
• 中间区域：放置加载提示(r)和表格主体(t)
• 底部容器：放置数据信息(i)和分页控件(p)
• 最后用clear清除浮动，避免布局错乱

修改后的完整代码示例 #

我还帮你修正了Excel导出里的列索引错误（你表格只有6列，原配置写了8列会报错）：

var oTable = $('#datatables').dataTable({ 
    destroy: true, 
    "bSort": false, 
    // 用自定义容器布局，避免组件挤压
    dom: '<"top"Bf>rt<"bottom"ip><"clear">', 
    buttons: [ 
        { 
            extend: 'excelHtml5', 
            footer: true , 
            // 修正列索引，和表格实际列数匹配
            exportOptions: { columns: [0, 1, 2, 3, 4,5] } 
        }, 
        { 
            extend: 'pdfHtml5', 
            exportOptions: { columns: [0, 1, 2, 3, 4, 5] }, 
            customize: function (doc) { 
                //Remove the title created by datatTables 
                doc.content.splice(0, 1); 
                //Create a date string that we use in the footer. Format is dd-mm-yyyy 
                var now = new Date(); 
                var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear(); 
                // doc.pageMargins = [20, 60, 20, 30]; 
                // Set the font size fot the entire document 
                doc.defaultStyle.fontSize = 9; 
                // Set the fontsize for the table header 
                doc.styles.tableHeader.fontSize = 9; 
                // Create a header object with 3 columns 
                // Left side: Logo 
                // Middle: brandname 
                // Right side: A document title 
                doc['header'] = (function () { 
                    return { 
                        columns: [ 
                            { alignment: 'left', italics: true, text: 'dataTables', fontSize: 18, margin: [10, 0] }, 
                            { alignment: 'right', fontSize: 14, text: $("#drpIller option:selected").text() + " " + $("#drpIlceler option:selected").text() } 
                        ], 
                        margin: 20 
                    } 
                }); 
                doc['footer'] = (function (page, pages) { 
                    return { 
                        columns: [ 
                            { alignment: 'left', text: ['Oluşturulma tarihi: ', { text: jsDate.toString() }] }, 
                            { alignment: 'right', text: ['page ', { text: page.toString() }, ' / ', { text: pages.toString() }] } 
                        ], 
                        margin: 20 
                    } 
                }); 
                var objLayout = {}; 
                objLayout['hLineWidth'] = function (i) { return .5; }; 
                objLayout['vLineWidth'] = function (i) { return .5; }; 
                objLayout['hLineColor'] = function (i) { return '#aaa'; }; 
                objLayout['vLineColor'] = function (i) { return '#aaa'; }; 
                objLayout['paddingLeft'] = function (i) { return 4; }; 
                objLayout['paddingRight'] = function (i) { return 4; }; 
                doc.content[0].layout = objLayout; 
            } 
        }, 
        { extend: 'print' } 
    ], 
    "responsive": true, 
    "data": data, 
    "columns": [ 
        { "data": "A", "autoWidth": true}, 
        { "data": "S", "autoWidth": true}, 
        { "data": "D", "autoWidth": true }, 
        { "data": "E", "autoWidth": true}, 
        { "data": "F", "autoWidth": true }, 
        { "data": "G", "autoWidth": true } 
    ], 
    "bAutoWidth": false 
}); 

内容的提问来源于stack exchange，提问作者mfg