Question

我在我的PHP项目中使用过bootstrap服务器端数据表它就像一个魅力但我的问题是表的最后一列是单独的边框，它没有显示我不知道为什么

打印页面中数据表的另一个问题，列的标题与列不同。

最后一栏单独的边框未显示：

在打印视图列和标题中不相同：

Html代码：

<table class="table table-bordered cell-border" width="100%" cellspacing="0" id="patientsReport">
                    <thead>
                        <tr>
                            <th class="text-center">تاریخ</th>
                            <th class="text-center">نام</th>
                            <th class="text-center">وضیت روحی</th>
                            <th class="text-center">انرژی</th>
                            <th class="text-center">تغذیه</th>
                            <th class="text-center">ورزش</th>
                            <th class="text-center">خستگی</th>
                            <th class="text-center">فعالیت</th>
                            <th class="text-center">خواب</th>
                            <th class="text-center">عوامل تاثیرگذار بر خواب</th>
                            <th class="text-center">سایر علائم</th>
                            <th class="text-center">یادداشت</th>
                        </tr>
                    </thead>
         </table>

Javascript代码：

$('#patientsReport').dataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copy',
                titleAttr:'کپی' ,
                text: '<i class="fa fa-files-o"></i>',
                columns: ':visible'
            },
            {
                text: '<i class="fa fa-print"></i>',
                action: function ( e, dt, node, config ) {
                    window.onafterprint = function(){
                        $('.dt-buttons').show();
                    };
                    $('.dt-buttons').hide();
                    window.print();
                }
            },
            {
                extend: 'excel',
                text: '<i class="fa fa-file-excel-o"></i>',
                columns: ':visible'
            },
        ],

        "processing": true,
        "serverSide": true,
        "paging": false,
        "searching": false,
        "info": false,
        "ordering": false,
        'ajax': '<?php echo $rdr_str ?>',
        'language': {
            url : 'Resources/lang/Persian.json'
        },
        scrollX:        true,
        scrollCollapse: true,
        columnDefs: [

        ],
        fixedColumns: false,
        "columns": [
            { data: "15", },
            { data: "1" },
            { data: "9", visible: <?php echo $chkMental ?> },
            { data: "6", visible: <?php echo $chkEnergy ?> },
            { data: "12", visible: <?php echo $chkNutrition ?> },
            { data: "10", visible: <?php echo $chkSport ?> },
            { data: "7", visible: <?php echo $chkFatigue ?> },
            { data: "11", visible: <?php echo $chkActivity ?> },
            { data: "5", visible: <?php echo $chkSleep ?> },
            { data: "18", visible: <?php echo $chkSleep2 ?> },
            { data: "8", visible: <?php echo $chkOther ?> },
            { data: "17", visible: <?php echo $chkNote ?> },
            // { data: "16" },

        ]
    });

Answer 1

尝试在单元格中添加 html空白，看看是否可以解决问题，或者它可能与您的第二个问题有关。
您正在使用scrollX: true,，这实际上会导致插件为标题和正文创建 2个单独的表，然后将它们对齐以获得窗口宽度。

有时候，这两个表中的列可能不完全匹配，但略有不等。但是从你的截图来看，我会说渲染时会出现 javascript错误。

另外，尝试调整浏览器大小以查看列是否会对齐。如果是这样，您可以尝试在init 之后重新加载标题：

$('#patientsReport').on('init', function(){
     $('#patientsReport').fixedHeader.adjust();
});

Answer 2

确保包含所有资源，例如dataTables.bootstrap.min.js

您可以通过添加类来解决边框问题。

.yourtable_container table, th, td {border: 1px solid #ddd !important; }

或将类添加到特定的coloumn

"columnDefs": [{className: "your-class", "targets": [0]}]

for printview尝试此选项

exportOptions: {stripHtml: false}

或者您可以按照这样的类自定义printview。也可以尝试header callback

    buttons: [
        {
            extend: 'print',
            exportOptions: {
                stripHtml: false
            },
            text: '<i class="fa fa-print"></i> Print',
            customize: function (win) {

                $(win.document.body).find('table')
                        .addClass('compact')
                        .css('font-size', 'inherit');

            }
        }
    ]

Answer 3

请通过{data：＆＃34; 15＆＃34;，visible：}，{data：＆＃34; 1＆＃34;，visible：}而不是{data：＆＃34; 15＆＃34;， }，{data：＆＃34; 1＆＃34; }，

Answer 4

您可以尝试以下链接中的解决方案：Align Data Headings with Column Headings

Bootstrap数据表头和列不相同

4 个答案: