Question

当我在桌面打印中包含bootstrap时，我遇到了问题。我正在使用javascript函数在每个页面中显示总值。但是当我包含bootstrap css时，这很糟糕（行重叠）。

没有bootrap https://jsfiddle.net/hydridz/2337h5kt/3/

使用bootrap https://jsfiddle.net/hydridz/9dk0u1y6/

function printSubtotals(table, columns) {
    var
      tbody = table.tBodies[0],
      row = tbody.rows[0];
    if(!row)
      return;
    var cellCount = row.cells.length;
    if(!cellCount)
      return;
    var
      subtotals = [],
      rows = table.rows,
      thead = table.tHead,
      caption = table.querySelector('caption'),
      colgroup = table.querySelector('colgroup'),
      emptyTable = table.cloneNode(false),
      emptyRow = row.cloneNode(true),
      printDiv = document.createElement('div'),
      overlap = document.createElement('div'),
      subtotalCount = columns.length,
      rowCount = rows.length - 1,
      cells, subtotalCells, i, r;
    if(colgroup && colgroup.parentNode === table)
      emptyTable.appendChild(colgroup.cloneNode(true));
    emptyTable.appendChild(tbody.cloneNode(false));
    printDiv.className = /MSIE /.test(navigator.userAgent) ? 'print fixIE' : 'print';
    overlap.className = 'overlap';
    for(i = subtotalCount; i--; subtotals.push(0));
    for(i = cellCount; i--; emptyRow.cells[i].innerHTML = '');
    for(r = row.rowIndex; r < rowCount; r++) {
      printDiv.appendChild(overlap.cloneNode(true));
      tbody = printDiv.appendChild(emptyTable.cloneNode(true)).tBodies[0];
      cells = tbody.appendChild(rows[r].cloneNode(true)).cells;
      subtotalCells = tbody.appendChild(emptyRow.cloneNode(true)).cells;
      for(i = subtotalCount; i--;) {
        subtotals[i] += parseFloat(cells[columns[i]].innerHTML);
        subtotalCells[columns[i]].innerHTML = '<b>Total: ' + subtotals[i] + '</b>';
      }
    }
    printDiv.removeChild(printDiv.children[0]);
    tbody = printDiv.children[0].tBodies[0];
    if(caption && caption.parentNode === table)
      tbody.parentNode.insertBefore(caption.cloneNode(true), tbody);
    if(thead)
      tbody.parentNode.insertBefore(thead.cloneNode(true), tbody);
    table.parentNode.insertBefore(printDiv, table);
  }

  printSubtotals(document.querySelector('.data'), [0,1]);

Answer 1

以下代码可以帮助您解决问题，很容易

使用此代码复制并粘贴到您的编辑器中保存filename.html然后打开试试它正在运行

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
</head>
<body>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>


        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

<script src="https://code.jquery.com/jquery-1.12.4.js" charset="UTF-8"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" charset="UTF-8"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js" charset="UTF-8"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js" charset="UTF-8"></script>
<script>
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
    } );
} );
</script>
</body>
</html>

此处找到原始示例Print button Datatables Bootstrap。告诉我它是否对你有帮助。

带有表格打印问题的Bootstrap问题

1 个答案: