Javascript 不使用ajax显示Datatables按钮
我找了又找，但就是找不出答案。我在文档中读到，您需要添加initComplete来显示按钮，但我仍然没有运气 我错过什么了吗？我尝试过使用和不使用dom，添加按钮的不同方式，等等。如果没有ajax调用，我做这件事没有问题，效果很好。这里有些不同的东西我还没弄明白Javascript 不使用ajax显示Datatables按钮,javascript,jquery,ajax,datatables,Javascript,Jquery,Ajax,Datatables,我找了又找，但就是找不出答案。我在文档中读到，您需要添加initComplete来显示按钮，但我仍然没有运气 我错过什么了吗？我尝试过使用和不使用dom，添加按钮的不同方式，等等。如果没有ajax调用，我做这件事没有问题，效果很好。这里有些不同的东西我还没弄明白 !doctype html> <html lang="en" dir="ltr"> <head> <title>Forensics Sample Database</title
!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Forensics Sample Database</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1000, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oxygen:400,700">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/buttons.bootstrap.min.css">
<link rel="stylesheet" href="./layout.css">
<script charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"</script>
<script charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"</script>
<script charset="utf-8" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<script charset="utf-8" src="webapp.js"></script>
</head>
！doctype html>
取证样本数据库
所以我不确定这为什么有效，但它确实有效
$(document).ready(function(){
// On page load: datatable
var tablesamples = $('#tablesamples').DataTable({
'ajax': 'data.php?job=get_samples',
'dom': 'Bfrtip',
'buttons': [
{
text: 'Excel',
extend: 'excel',
exportOptions: {
modifier: {
page: 'current'
}
}
}
],
'columns': [
{ 'data': 'sample_id' },
{ 'data': 'storage_location' }
],
'oLanguage': {
'oPaginate': {
'sFirst': ' ',
'sPrevious': ' ',
'sNext': ' ',
'sLast': ' ',
},
'sLengthMenu': 'Records per page: _MENU_',
'sInfo': 'Total of _TOTAL_ records (showing _START_ to _END_)',
'sInfoFiltered': '(filtered from _MAX_ total records)'
},
'scrollX': true,
initComplete: function () {
var api = this.api();
console.log( api.buttons().container()[0].nodeName );
}
});
这对我很有用，请尝试根据您的需要进行定制：
var table = $( document ).ready(function() {
$('#clientTable').DataTable( {
"processing": false,
"dom": 'Bfrtip',
"serverSide": false,
"bSortable": true,
"lengthChange": true,
"responsive": true,
"ajax": {
"url": "../resources/models/jsonListClient.php",
"type": "POST",
"dataSrc": ""
},
"columns": [
{ "data": "nom" },
{ "data": "ville" },
{ "data": "ice" },
{ "data": "adresse" },
],
"language": {
"sProcessing": "Traitement en cours...",
"sSearch": "Rechercher :",
"sLengthMenu": "Afficher _MENU_ éléments",
"sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
"sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
"sInfoFiltered": "(filtré de _MAX_ éléments au total)",
"sInfoPostFix": "",
"sLoadingRecords": "Chargement en cours...",
"sZeroRecords": "Aucun élément à afficher",
"sEmptyTable": "Aucune donnée disponible dans le tableau",
"oPaginate": {
"sFirst": "Premier",
"sPrevious": "Précédent",
"sNext": "Suivant",
"sLast": "Dernier"
},
"oAria": {
"sSortAscending": ": activer pour trier la colonne par ordre croissant",
"sSortDescending": ": activer pour trier la colonne par ordre décroissant"
}
},
buttons: [
{
extend: 'print',
message: 'Imprimer',
text: 'Imprimer',
},
{
extend: 'copy',
message: 'Copier / Coller',
text: 'Copier',
},
{
extend: 'excelHtml5',
title: 'Export Liste'
},
{
extend: 'pdfHtml5',
title: 'Export Liste',
}
, {
extend: 'colvis',
text: 'Colonnes'
}
]
});
});
如果您可以使用示例数据设置JSFIDLE，我可以尝试一下。很抱歉，我很难用ajax做到这一点。：/不过我会继续努力的。谢谢。不用ajax，只需复制对象数组并将其作为变量内联即可。然后将“data”属性设置为该变量，而不是“ajax”属性。这将为我提供一个很好的示例，不幸的是，它似乎在JSFIDLE上工作，所以我不知道发生了什么，只是在您的原始帖子中注意到了代码中的一些东西。您在文档外部有“table.buttons（）.container（）.appendTo（'#tablesamples_wrapper.col-sm-6:eq（0）；”。就绪（…）。因此，它将在初始化表之前执行。这可能只是一个复制/粘贴错误，但我想我应该指出它以防万一
var table = $( document ).ready(function() {
$('#clientTable').DataTable( {
"processing": false,
"dom": 'Bfrtip',
"serverSide": false,
"bSortable": true,
"lengthChange": true,
"responsive": true,
"ajax": {
"url": "../resources/models/jsonListClient.php",
"type": "POST",
"dataSrc": ""
},
"columns": [
{ "data": "nom" },
{ "data": "ville" },
{ "data": "ice" },
{ "data": "adresse" },
],
"language": {
"sProcessing": "Traitement en cours...",
"sSearch": "Rechercher :",
"sLengthMenu": "Afficher _MENU_ éléments",
"sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
"sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
"sInfoFiltered": "(filtré de _MAX_ éléments au total)",
"sInfoPostFix": "",
"sLoadingRecords": "Chargement en cours...",
"sZeroRecords": "Aucun élément à afficher",
"sEmptyTable": "Aucune donnée disponible dans le tableau",
"oPaginate": {
"sFirst": "Premier",
"sPrevious": "Précédent",
"sNext": "Suivant",
"sLast": "Dernier"
},
"oAria": {
"sSortAscending": ": activer pour trier la colonne par ordre croissant",
"sSortDescending": ": activer pour trier la colonne par ordre décroissant"
}
},
buttons: [
{
extend: 'print',
message: 'Imprimer',
text: 'Imprimer',
},
{
extend: 'copy',
message: 'Copier / Coller',
text: 'Copier',
},
{
extend: 'excelHtml5',
title: 'Export Liste'
},
{
extend: 'pdfHtml5',
title: 'Export Liste',
}
, {
extend: 'colvis',
text: 'Colonnes'
}
]
});
});