jQuery datatable 没有打印所有页面
jQuery datatable doesn't print all the pages
我正在使用 jQuery 数据表(jQuery version:jquery-3.1.1.min.js)。我需要打印表格中的所有数据(在我的场景中,我有 56 行,每页 10 条记录,然后变成 6 页)。但它只打印部分数据(36 条记录)。但我有 pdf 函数 also.it 工作正常。当点击 pdf 按钮时,它会生成包含所有重新编码的 pdf
<script type="text/javascript" src="<c:url value='/static/js/jquery-3.1.1.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/jquery.dataTables.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/dataTables.buttons.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/buttons.print.min.js' />"></script>
<script>
$(document).ready(function(){
$('#adTable').DataTable({
dom: 'Bfrtip',
buttons: [
'pdf', 'print'
]
});
});
</script>
<table id="adTable" class="table table-hover">
<thead>
<tr>
<th>Index</th>
<th>Subject</th>
<th>Category</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<c:forEach var="obj" items="${list}" varStatus="loop">
<tr>
<td>${loop.index+1}</td>
<td>${obj.subject}</td>
<td>${obj.category}</td>
<td>${obj.status}</td>
</tr>
</c:forEach>
</tbody>
</table>
嘿,你可以使用下面的代码 print all
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
text: 'Print all',
exportOptions: {
modifier: {
selected: null
}
}
},
{
extend: 'print',
text: 'Print selected'
}
],
select: true
} );
} );
我发现 solution.the 问题是由我的 CSS 文件引起的。
有一个 css 文件覆盖了我的 html 正文标签 overflow-x
我的外部 css 文件如下所示
body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
color: #4f5f6f;
overflow-x: hidden; }
我改成下面这样了
body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
color: #4f5f6f;
overflow-x: visible; }
我正在使用 jQuery 数据表(jQuery version:jquery-3.1.1.min.js)。我需要打印表格中的所有数据(在我的场景中,我有 56 行,每页 10 条记录,然后变成 6 页)。但它只打印部分数据(36 条记录)。但我有 pdf 函数 also.it 工作正常。当点击 pdf 按钮时,它会生成包含所有重新编码的 pdf
<script type="text/javascript" src="<c:url value='/static/js/jquery-3.1.1.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/jquery.dataTables.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/dataTables.buttons.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/buttons.print.min.js' />"></script>
<script>
$(document).ready(function(){
$('#adTable').DataTable({
dom: 'Bfrtip',
buttons: [
'pdf', 'print'
]
});
});
</script>
<table id="adTable" class="table table-hover">
<thead>
<tr>
<th>Index</th>
<th>Subject</th>
<th>Category</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<c:forEach var="obj" items="${list}" varStatus="loop">
<tr>
<td>${loop.index+1}</td>
<td>${obj.subject}</td>
<td>${obj.category}</td>
<td>${obj.status}</td>
</tr>
</c:forEach>
</tbody>
</table>
嘿,你可以使用下面的代码 print all
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
text: 'Print all',
exportOptions: {
modifier: {
selected: null
}
}
},
{
extend: 'print',
text: 'Print selected'
}
],
select: true
} );
} );
我发现 solution.the 问题是由我的 CSS 文件引起的。 有一个 css 文件覆盖了我的 html 正文标签 overflow-x
我的外部 css 文件如下所示
body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
color: #4f5f6f;
overflow-x: hidden; }
我改成下面这样了
body {
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
font-family: 'Open Sans', sans-serif;
color: #4f5f6f;
overflow-x: visible; }