DataTable模式TableTool按钮不起作用

时间:2016-03-04 19:36:24

标签: jquery datatables bootstrap-modal tabletools

过去,我已经成功创建了显示动态数据的DataTables。我还添加了TableTools插件,以便能够将数据导出到CSV,Excel,Copy / Pase等。

然而,当我添加一个bootstrap modaldialog框并将表放在里面时,这些按钮不起作用(除了打印按钮......)。所有Web浏览器都是如此。

以下是我的问题的缩小版jsFiddle:http://jsfiddle.net/h3WDq/1210/

HTML CODE     

  <h3>Modal TableTool Example</h3>

  <!-- Button to trigger modal -->
  <div>
    <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
  </div>

  <!-- Modal -->
  <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Standard Selectpickers</h3>
    </div>
    <div class="modal-body">

      <table class="table table-striped table-hover table-bordered" id="tblResults">
        <thead>
          <tr>
            <th>ID</th>
            <th>Date</th>
            <th>Event Code</th>
          </tr>
        </thead>
      </table>

    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>

</div>

<style>

JS CODE

$(document).ready(function() {

  var dataSet = [
    ["1", "2016/03/01", "Test 1"],
    ["2", "2016/03/02", "Test 2"],
    ["3", "2016/03/03", "Test 3"],
    ["4", "2016/03/04", "Test 4"],
    ["5", "2016/03/05", "Test 1"],
    ["6", "2016/03/06", "Test 2"],
    ["7", "2016/03/07", "Test 3"],
    ["8", "2016/03/08", "Test 4"],
    ["9", "2016/03/09", "Test 1"],
    ["10", "2016/03/10", "Test 2"],
    ["11", "2016/03/11", "Test 3"],
    ["12", "2016/03/12", "Test 4"],
  ];

  var table = $('#tblResults').DataTable({
    data: dataSet,
    columns: [{
      title: "ID"
    }, {
      title: "Date"
    }, {
      title: "Event Code"
    }]
  });

  var tableTools = new $.fn.dataTable.TableTools(table, {
    'sSwfPath': 'http://datatables.net/release-datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf',
    'aButtons': ['copy',
      'csv', {
        'sExtends': 'xls',
        sFileName: '*.xls'
      },
      'pdf',
      'print'
    ],
  });

  $(tableTools.fnContainer()).insertBefore('#tblResults_wrapper');

});

任何帮助都将不胜感激。

0 个答案:

没有答案