Datatables按钮不显示与ajax

我已经搜查和搜查，但只是无法弄清楚这一点。我在文档中读到需要添加initComplete才能使按钮出现，但我仍然没有运气。Datatables按钮不显示与ajax

我错过了什么吗？我试过用和不用dom，添加按钮的不同方法等。我没有问题，没有ajax调用，这很好。这里有一些我不明白的地方。

!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>

，并在我的webapp.js文件

$(document).ready(function(){ 

    // On page load: datatable 
    var tablesamples = $('#tablesamples').DataTable({ 
    "ajax": "data.php?job=get_samples", 
    "columns": [ 
     { "data": "sample_id" }, 
     { "data": "storage_location" }, 
     { "data": "depositor" }, 
     { "data": "sample_name",  "sClass": "sample_name" }, 
     { "data": "date_received" }, 
     { "data": "supplier" }, 
     { "data": "source" }, 
     { "data": "concentration" }, 
     { "data": "volume" }, 
     { "data": "prep_exp" }, 
     { "data": "age" }, 
     { "data": "gender" }, 
     { "data": "ethnicity" }, 
     { "data": "draw_date" }, 
     { "data": "extraction_date" }, 
     { "data": "screened" }, 
     { "data": "collection_tube" }, 
     { "data": "matrix" }, 
     { "data": "notes" }, 
     {"data": "functions", "sClass": "functions"}  
    ], 
    "dom": '<"top"i>rt<"bottom"flp><"clear">', 
// "dom": 'Blfrtp', 
    "scrollY": 400, 
    "scrollX": true, 
    buttons: [ 'excel '], 
     "initComplete": function(settings, json) { 
    alert('DataTables has finished its initialisation.'); 
    } 


    /* initComplete: function(){ 
      var api = this.api(); 

      new $.fn.dataTable.Buttons(api, { 
      buttons: [ 
       { 
        'excel' 
        } 
       } 
      ] 
      }); 
      api.buttons().container().appendTo('tablesamples' + api.table().container().id + ' .col-sm-6:eq(0)'); 
      */ 
    }); 
table.buttons().container() 
    .appendTo('#tablesamples_wrapper .col-sm-6:eq(0)'); 

    enter code here

来源

2016-11-21 aligenie

如果你能设置与我可以样本数据的jsfiddle在这一点上采取一些措施。 – Adrian

对不起，我正在努力与ajax做到这一点。：/我会继续尝试。谢谢。 – aligenie

而不是ajax只是复制你的对象数组并将其作为一个变量内联。然后，而不是“ajax”属性将“数据”属性设置为此变量。这会给我一个很好的例子。 – Adrian

所以我不知道为什么这工作，但它确实

$(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); 
} 
});

来源

2016-11-24 06:38:14 aligenie

刚刚注意到您的原始文章中的代码中的东西。你有“table.buttons（）。container（） .appendTo（'#tablesamples_wrapper .col-sm-6：eq（0）'）;”在document.ready（...）之外。所以它会在表被初始化之前执行。这可能只是一个复制/粘贴错误，但我想我应该指出，以防万一 – Adrian

谢谢！是的，这是一个复制/粘贴错误。 – aligenie

Datatables按钮不显示与ajax

回答

相关问题