jQuery Javascript HTML 5导出按钮不会出现并删除其他按钮
我目前正试图添加一些导出按钮到我的数据表中。jQuery Javascript HTML 5导出按钮不会出现并删除其他按钮
我已加载例如所有正确的JS和CSS文件
<!--Table JS & CSS-->
<script src="../plugins/DataTables/DataTables-1.10.12/js/jquery-1.12.3.js"></script>
<script src="../plugins/DataTables/DataTables-1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="../plugins/DataTables/DataTables-1.10.12/css/jquery.dataTables.min.css"/>
<!--Button JS & CSS-->
<script src="../plugins/DataTables/DataTables-1.10.12/js/dataTables.buttons.min.js"></script>
<script src="../plugins/DataTables/DataTables-1.10.12/js/jszip.min.js"></script>
<script src="../plugins/DataTables/DataTables-1.10.12/js/pdfmake.min.js"></script>
<script src="../plugins/DataTables/DataTables-1.10.12/js/vfs_fonts.js"></script>
<script src="../plugins/DataTables/DataTables-1.10.12/js/buttons.html5.min"></script>
<link rel="stylesheet" type="text/css" href="../plugins/DataTables/DataTables-1.10.12/css/buttons.dataTables.min.css"/>
当我加载JS时,它删除了我的“条目”功能和“模糊搜索”功能。
它也没有显示HTML5按钮?
的JavaScript是如下
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example thead th').each(function() {
var title = $(this).text();
$(this).append('<input type="text" class="filter_box" placeholder="Filter" />');
});
// DataTable
var table = $('#example').DataTable(
{
//Set display length
"iDisplayLength": 100
}
);
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.header()).on('click', function(e) {
e.stopPropagation();
});
$('input', this.header()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
如果我删除下面的JavaScript,然后在页面加载OK例如以“项”功能和“模糊搜索”的功能,但显然没有任何HTML5按钮
//Set Button settings
dom: 'lBfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
数据来自HTML表格例如
<table width="100%" class="compact stripe hover row-border order-column" id="example">
<thead class="results_thead">
<tr>
<th>W/h<br></th>
<th>Product<br></th>
<th>Description<br></th>
<th>Free Stock<br></th>
<th>On Order Qty<br></th>
<th>Make or Buy<br></th>
<th>Last Trans Date<br></th>
<th>Last Trans Type<br></th>
<th>Analysis B<br></th>
<th>Next Order No<br></th>
<th>Next On Order Qty<br></th>
<th>Next Date Req<br></th>
</tr>
</thead>
<tbody class="results_tbody">
<tr style="text-align: center">
<td>'.$row['warehouse'].'</td>
<td>'.$row['product'].'</td>
<td>'.$row['description'].'</td>
<td>'.$row['negative_free_stock'].'</td>
<td>'.$row['on_order_qty'].'</td>
<td>'.$row['make_or_buy'].'</td>
<td>'.$row['last_transaction_date'].'</td>
<td>'.$row['last_transaction_type'].'</td>
<td>'.$row['analysis_b'].'</td>
<td>'.$row['next_order_no'].'</td>
<td>'.$row['next_on_order_qty'].'</td>
<td>'.$row['next_date_required'].'</td>
</tr>';
</tbody>
</table>
因此,我认为问题在于上面的代码?
任何想法非常赞赏
Bepster
I have solve the problem by changing html table structure
you can see the Demo
@bepster请通过演示,它会帮助你了解错误!也看到我已经包含的Js&CSS文件。你想在哪里搜索数据表顶部或底部的功能?提前致谢!!! –
喜迪帕克, 我需要的搜索代码保持,因为它把过滤器框位于页面的顶部,它也从当您单击按钮内部排序停止过滤箱。 我仍然留有问题,我的代码工作正常,但只要我添加单行: “dom:'lBfrtip',”它删除我的条目选项和模糊搜索选项。 – bepster
@bepster我解决您的问题,请点击此链接此http://jsfiddle.net/dipakthoke07/ebRXw/2215/访问链接 –
创建演示再现问题。应该能够得到一个CDN – charlietfl
喜Cherlietfl所需的所有资源, 谢谢你的建议我重建使用CDN的路径,而不是我的网页,并重新尝试,它工作得很好所以就一个接一个通过JS和CSS文件和redownloaded他们和检查一次,问题现在已经解决!随意添加一个答复沿CDN来源和病号的支票检查作为正确的答案,可能会帮助其他人正在查看此 – bepster