个人中心
gpt4 book ai didi

java - Bootstrap 3 DataTable导出到Excel不导出表数据

转载 作者：行者123 更新时间：2023-11-30 02:08:29 24 4
gpt4 key购买 nike

我正在尝试使用以下示例将表的内容导出到 MS Excel:https://datatables.net/extensions/buttons/examples/styling/bootstrap.html

页面上的所有内容都正确显示；但是，当我导出时，我只得到标题和列标题。我正在用 java 生成表内容。

页面图片:

[![在此处输入图像描述][1]][1]

输出:

[![在此处输入图像描述][2]][2]

-------------------------------------------------------- ------------------------------------------第二次尝试

我改变了我的方法，现在正在传递 json。但是，现在按钮未显示，表格也未格式化。控制台日志中没有错误。

-------------------------------------------------------- ------------------------------------------第三次尝试

好的，我已经弄清楚如何传递 JSON 并使用 AJAX 来填充表。但是，导出到 Excel 仍然只导出名称和表格标题。

-------------------------------------------------------- ------------------------------------------第四次尝试

我正在尝试:

$('#joinedTable').DataTable( {
   "ajax": responseJson1a,
} );

我也尝试过:

$('#joinedTable').DataTable( {
   "ajax": JSON.stringify(responseJson1a),
} );

我已经清理了库。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Group Summary</title>
        <meta http-equiv=Content-Type content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A Scout award tracking application">
        <meta name="author" content="Glyndwr (Wirrin) Bartlett">

        <!-- JQuery -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- Validate -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

        <!-- Bootstrap -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

        <!-- Bootstrap Date Picker-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

        <!-- DataTables -->
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


        <!-- Le styles -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- DataTables -->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
    </head>

  <body>

    <div id="groupSummary"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">

        <div id="includedContent"></div>

        <form data-toggle="validator" role="form" id="showGroupSummaryForm">
            <div class="row">
                <div class="container-fluid">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="jumbotron">
                            <h3>Group Summary</h3>

                            <div class="container">

                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <div class="form-group">
                                        <div class="input-group date" id="datepicker1">
                                            <input type="text" id="startDate" class="form-control" placeholder="Start Date">
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <div class="form-group">
                                        <div class='input-group date' id='datepicker2'>
                                            <input type='text' id="endDate" class="form-control" placeholder="End Date">
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <button id='submit' class='btn btn-primary btn-lg'>Display Details</button>

                            </div>
                            <div class="container" id=joined>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <table id="joinedTable" class="display" style="width:100%">
                                        <thead>
                                            <tr>
                                              <th>section</th>
                                              <th>subSection</th>
                                              <th>metric</th>
                                              <th>metricTotal</th>
                                            </tr>
                                        </thead>
                                    </table>
                                    <div style="text-align: center;">
                                        <span id="ajaxGetUserServletResponse1" style="color: red;"></span>
                                    </div>
                                </div>
                            </div><!-- /container -->

                        </div>
                    </div>
                </div>
            </div><!-- /row -->
        </form>

    </div> <!-- /container -->



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

    <script src="js/groupSummary-ajax.js"></script>

  </body>
</html>

Ajax :

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 

//  $('#joinedTable').DataTable( {
//      "paging":   false,
//        "ordering": false,
//        "info":     false,
//        "searching": false,
//        dom: 'Bfrtip',
//        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
//    } );



    $("#showGroupSummaryForm").validate({
        //debug: true,

        rules: {
            startDate: {
                required: true
            },

            endDate: {
                required: true
            }
        },

        messages: {
            startDate: {
                required: "Please select a start date."
            },

            endDate: {
                required: "Please select an end date."
            }
        },

        submitHandler : function(showGroupSummaryForm) {

            $('#joinedTable tbody > tr').remove();
            $('#ajaxGetUserServletResponse1').text('');

            var dataToBeSent  = {
                    ssAccountID : sessionStorage.getItem('ssAccountID'),
                    startDate : $("#startDate").val(),
                    endDate: $("#endDate").val()
            };

            //Joined
            $.ajax({
                url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
                data : dataToBeSent, 
                type : 'POST',  
            })
            .fail (function(jqXHR, textStatus, errorThrown) {
                //alert(jqXHR.responseText);
                if(jqXHR.responseText.includes('No members joined in this date range')){
                    $('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
                }else{
                    $('#ajaxGetUserServletResponse1').text('Error getting joined data.');

                }
                $("#datepicker1").focus();
            })
            .done(function(responseJson1a){
                dataType: "json";
//              alert(JSON.stringify(responseJson1a)); 
//              Result of alert is:
//                  [{"section":"Cub","subSection":"Explorer","metric":"Joined","metricTotal":5},{"section":"Cub","subSection":"Pioneer","metric":"Joined","metricTotal":8},{"section":"Joey","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Leader","subSection":"blank","metric":"Joined","metricTotal":5},{"section":"Rover","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Scout","subSection":"blank","metric":"Joined","metricTotal":2}]
                $('#joinedTable').DataTable( {
                    "ajax": responseJson1a,
                } );

            })
        }
    })

}); // end document.ready

$(function(){
    $("#includedContent").load("Menu.html");

    $('#datepicker1').datepicker({
        format: 'dd/mm/yyyy',
            });
    $('#datepicker2').datepicker({
        useCurrent: false, //Important! See issue #1075
        format: 'dd/mm/yyyy',
    });
    $("#datepicker1").on("dp.change", function (e) {
        $('#datepicker2').data("DatePicker").minDate(e.date);
    });
    $("#datepicker2").on("dp.change", function (e) {
        $('#datepicker1').data("DatePicker").maxDate(e.date);
    });
});

这在控制台中给我一个错误:

Uncaught TypeError: $(...).DataTable is not a function
    at Object.<anonymous> (groupSummary-ajax.js:70)
    at i (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:2:27449)
    at Object.fireWith [as resolveWith] (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:2:28213)
    at y (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:4:22721)
    at XMLHttpRequest.c (eval at globalEval (jquery-2.2.4.min.js:2), <anonymous>:4:26925)

-------------------------------------------------------- ------------------------------------------缩小错误范围

该错误不是由于 HTML 表是从 JSON 填充的。 “$('#joinedTable').DataTable();”位于“.done(function(responseJson1a)”中会导致错误。下面的代码一直有效，直到“$('#joinedTable').DataTable();”未被注释。但是，只有 

<tr>
   <td>Cubs</td>
   <td>3</td>
</tr>
<tr>
   <td>Scouts</td>
   <td>5</td>
</tr>

已导出。不是

<tr>
   <td>Cubs</td>
   <td>9</td>
</tr>
<tr>
   <td>Scouts</td>
   <td>10</td>
</tr>

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Group Summary</title>
        <meta http-equiv=Content-Type content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A Scout award tracking application">
        <meta name="author" content="Glyndwr (Wirrin) Bartlett">

        <!-- JQuery -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

        <!-- Validate -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

        <!-- Bootstrap -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

        <!-- Bootstrap Date Picker-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

        <!-- DataTables -->
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


        <!-- Le styles -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <!-- DataTables -->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
    </head>

  <body>

    <div id="groupSummary"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">

        <div id="includedContent"></div>

        <form data-toggle="validator" role="form" id="showGroupSummaryForm">
            <div class="row">
                <div class="container-fluid">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="jumbotron">
                            <h3>Group Summary</h3>

                            <div class="container">

                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <div class="form-group">
                                        <div class="input-group date" id="datepicker1">
                                            <input type="text" id="startDate" class="form-control" placeholder="Start Date">
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <div class="form-group">
                                        <div class='input-group date' id='datepicker2'>
                                            <input type='text' id="endDate" class="form-control" placeholder="End Date">
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <button id='submit' class='btn btn-primary btn-lg'>Display Details</button>

                            </div>
                            <div class="container" id=joined>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    <table class="table table-hover table-bordered" id="joinedTable">
                                        <thead>
                                            <tr>
                                              <th>Section</th>
                                              <th>Joined</th>
                                            </tr>
                                        </thead>
                                            <tbody id="mytablebody">
                                                <tr>
                                                    <td>Cubs</td>
                                                    <td>3</td>
                                                  </tr>
                                                  <tr>
                                                    <td>Scouts</td>
                                                    <td>5</td>
                                                  </tr>
                                             </tbody>
                                        <!--<tbody id="mytablebody"></tbody> -->
                                    </table>
                                    <div style="text-align: center;">
                                        <span id="ajaxGetUserServletResponse1" style="color: red;"></span>
                                    </div>
                                </div>
                            </div><!-- /container -->

                        </div>
                    </div>
                </div>
            </div><!-- /row -->
        </form>

    </div> <!-- /container -->



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

    <script src="js/DataTable.js"></script>

  </body>
</html>

AJAX:

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 

    $('#joinedTable').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false,
        "searching": false,
        dom: 'Bfrtip',
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
    } );



    $("#showGroupSummaryForm").validate({
        //debug: true,

        rules: {
            startDate: {
                required: true
            },

            endDate: {
                required: true
            }
        },

        messages: {
            startDate: {
                required: "Please select a start date."
            },

            endDate: {
                required: "Please select an end date."
            }
        },

        submitHandler : function(showGroupSummaryForm) {

            $('#joinedTable tbody > tr').remove();
            $('#ajaxGetUserServletResponse1').text('');

            var dataToBeSent  = {
                    ssAccountID : sessionStorage.getItem('ssAccountID'),
                    startDate : $("#startDate").val(),
                    endDate: $("#endDate").val()
            };

            //Joined
            $.ajax({
                url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
                data : dataToBeSent, 
                type : 'POST',  
            })
            .fail (function(jqXHR, textStatus, errorThrown) {
                //alert(jqXHR.responseText);
                if(jqXHR.responseText.includes('No members joined in this date range')){
                    $('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
                }else{
                    $('#ajaxGetUserServletResponse1').text('Error getting joined data.');

                }
                $("#datepicker1").focus();
            })
            .done(function(responseJson1a){
                dataType: "json";

//              alert(JSON.stringify(responseJson1a)); 
//              Result of alert is:
//                  [{"section":"Cub","subSection":"Explorer","metric":"Joined","metricTotal":5},{"section":"Cub","subSection":"Pioneer","metric":"Joined","metricTotal":8},{"section":"Joey","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Leader","subSection":"blank","metric":"Joined","metricTotal":5},{"section":"Rover","subSection":"blank","metric":"Joined","metricTotal":1},{"section":"Scout","subSection":"blank","metric":"Joined","metricTotal":2}]

                 var tablebody2 = '          <tr>' + 
                    '<td>Cubs</td>' +
                    '<td>9</td>' +
                  '</tr>' +
                  '<tr>' +
                    '<td>Scouts</td>' +
                    '<td>10</td>' +
                  '</tr>';

                 $("#mytablebody").empty();
                 $("#mytablebody").append(tablebody2);
//               $('#joinedTable').DataTable(); // Uncomment this and the error happens
            })
        }
    })

}); // end document.ready

$(function(){
    $("#includedContent").load("Menu.html");

    $('#datepicker1').datepicker({
        format: 'dd/mm/yyyy',
            });
    $('#datepicker2').datepicker({
        useCurrent: false, //Important! See issue #1075
        format: 'dd/mm/yyyy',
    });
    $("#datepicker1").on("dp.change", function (e) {
        $('#datepicker2').data("DatePicker").minDate(e.date);
    });
    $("#datepicker2").on("dp.change", function (e) {
        $('#datepicker1').data("DatePicker").maxDate(e.date);
    });
});

最佳答案

您正在填充表之前初始化dataTable，这就是为什么它看不到您通过ajax获取的任何动态数据。将初始化代码放在数据表渲染之后(参见下面的 -- INIT --)

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();

    // push the init code 

    $("#showGroupSummaryForm").validate({
        //debug: true,

        rules: {
            startDate: {
                required: true
            },

            endDate: {
                required: true
            }
        },

        messages: {
            startDate: {
                required: "Please select a start date."
            },

            endDate: {
                required: "Please select an end date."
            }
        },

        submitHandler : function(showGroupSummaryForm) {

            $('#joinedTable tbody > tr').remove();
            $('#ajaxGetUserServletResponse1').text('');

            var dataToBeSent  = {
                    ssAccountID : sessionStorage.getItem('ssAccountID'),
                    startDate : $("#startDate").val(),
                    endDate: $("#endDate").val()
            };

            //Joined
            $.ajax({
                url : 'GroupSummaryJoinedView', // Your Servlet mapping or JSP(not suggested)
                data : dataToBeSent, 
                type : 'POST',
                dataType: 'JSON',
            })
            .fail (function(jqXHR, textStatus, errorThrown) {
                if(jqXHR.responseText.includes('No members joined in this date range')){
                    $('#ajaxGetUserServletResponse1').text('No members joined in this date range.');
                }else{
                    $('#ajaxGetUserServletResponse1').text('Error getting joined data.');

                }
                $("#datepicker1").focus();
            })
            .done(function(responseJson1a){
                // JSON response to populate the joined table
                populateTable(responseJson1a)

                // -- INIT -- 
                // initialize the table
                // after the data has loaded
                $('#joinedTable').DataTable( {
                    dom: 'Bfrtip',
                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                    serverSide: true,
                    initComplete : function () {
                    table.buttons().container()
                       .appendTo( $('#joinedSpace .col-sm-6:eq(0)'));
                    },
                });
            })
        }
    });
}); // end document.ready

function populateTable(object) {

    var obj = object;
    var table = $("<table id='joinedTable'/>");
    table[0].border = "1";
    var columns = Object.keys(obj[0]);
    var columnCount = columns.length;
    var row = $(table[0].insertRow(-1));
    for (var i = 0; i < columnCount; i++) {
        var headerCell = $("<th />");
        headerCell.html([columns[i]]);
        row.append(headerCell);
    }

    for (var i = 0; i < obj.length; i++) {
        row = $(table[0].insertRow(-1));
        for (var j = 0; j < columnCount; j++) {
            var cell = $("<td />");
            cell.html(obj[i][columns[j]]);
            row.append(cell);
        }
    }

    var dvTable = $("#joinedSpace");
//    dvTable.html("");
    dvTable.append(table);
}

$(function(){
    $("#includedContent").load("MenuGL.html");

    $('#datepicker1').datepicker({
        format: 'dd/mm/yyyy',
            });
    $('#datepicker2').datepicker({
        useCurrent: false, //Important! See issue #1075
        format: 'dd/mm/yyyy',
    });
    $("#datepicker1").on("dp.change", function (e) {
        $('#datepicker2').data("DatePicker").minDate(e.date);
    });
    $("#datepicker2").on("dp.change", function (e) {
        $('#datepicker1').data("DatePicker").maxDate(e.date);
    });
});

另一种避免您自己填充表格的方法是将 JSON feed 的 url 直接传递给 dataTable 插件，并让表格处理 >ajax 和数据群体。 Controller 必须以指定的格式返回数据here 

    $('#example').DataTable( {
        "ajax": 'pathToYourController',
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );

关于java - Bootstrap 3 DataTable导出到Excel不导出表数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50771785/

24 4 0
文章推荐： c++ - map - 找到最近的值？
文章推荐： C++头文件包含错误
文章推荐： c++ - 在特定 Windows 凭据中调用 API
文章推荐： java - 从字符串中获取子字符串(我从文本文件中获取字符串)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com