2同一页面上两个不同数据表上的Excel按钮

时间:2017-03-21 17:58:31

标签: jquery c#-4.0 datatables

我有一个带有2个Web方法的Web服务,用于从SQL中提取数据并将其显示在同一网页上的两个数据表中。

当我只有一个“Excel”按钮时,按下按钮时,我将获取excel中的数据。但是,如果我有2个按钮,那么第一个数据表按钮正在工作,但第二个数据表excel按钮不起作用,并将其保存为电子表格。如果我放置任何其他按钮,例如'pdf','csv',..那么第二个按钮也可以工作,相应地将数据保存到指定的格式。

我的2 jQuery DataTable实现:

$(document).ready(function() {
       $.ajax({
           url: 'Service.asmx/LoadReport',
           method: 'post',
           dataType: 'json',
           success: function(data) {
         $('#datatable').dataTable({
                   data: data,
                   dom: 'Bfrtip', 
                   buttons: [
                     //    //'copy', 'csv', 'excel', 'pdf', 'print'
                     //    'excel'
                     { extend: 'excel', text: 'Save as Excel', filename: "SubmissionStatus" }
                   ],
                   columns:  ….
         }); 
           }
       }); 
   });

和我的第二次实施:

$(document).ready(function()
   {
       $.ajax({
           url: 'Service.asmx/LoadTars',
           method: 'post',
           dataType: 'json',
           success: function(data) {
               $('#datatable2').dataTable({
                   data: data,
                   dom: 'Bfrtip',
                   buttons: [ 
                        'excel'
                     //    { extend: 'excel', text: 'Save as Excel'}
                   ],
                   columns: ….
               });
           }
       });
   });

这些是我引用的CDN:

script src =“http://code.jquery.com/jquery-1.10.2.js”type =“text / javascript”>               

 <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
 <script type="text/javascript" src="http://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
 <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
 <script type="text/javascript" src="http://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js"></script>
 <script type="text/javascript" src="http://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
 <script type="text/javascript" src="http://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
 <script type="text/javascript" src="http://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script> 

你能指出为什么我的第二个excel按钮没有将数据保存到指定的格式吗?

2 个答案:

答案 0 :(得分:1)

不确定您的问题是什么。我在jsbin上设置了两个表,它运行正常。 here

请记住,如果您在serverSide模式下运行,则只会导出您在客户端中看到的内容,因此如果您回调到服务器,则只能在Excel中获得一页。

   $(document).ready(function () {

        $('#example').DataTable({
            "data": dataStore.data1,
            "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
            ], dom: 'Bfrtip',
            buttons: ['excelHtml5']
        });


        $('#example2').DataTable({
            "data": dataStore.data2,
            "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
            ], dom: 'Bfrtip',
            buttons: [

            'excelHtml5'
            ]
        });
    });

答案 1 :(得分:0)

我发现了罪魁祸首 - 我引用jquery [ code.jquery.com/jquery-1.10.2.js ]的旧版js导致了这个问题问题,2个不同的数据表在同一页面上没有2个excel按钮。

  

正确的JS参考[ here ]解决了这个问题。