Bootstrap 3 DataTable экспортирует в Excel, не экспортируя данные таблицы - PullRequest
Новая
       1

Bootstrap 3 DataTable экспортирует в Excel, не экспортируя данные таблицы

0 голосов
/ 09 июня 2018

Я пытаюсь экспортировать содержимое таблицы в 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."$ ('# JoinTable'). DataTable ();"нахождение в «.done (function (responseJson1a)» вызывает ошибку. Ниже работает, пока «$ ('joinTable'). 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);
    });
});

Ответы [ 2 ]

0 голосов
/ 19 июня 2018

Основные пункты разрешения: 

var table = $('#joinedTable').DataTable( {

table.clear();
table.rows.add(responseJson1a).draw();

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 class="table table-hover table-bordered" id="joinedTable">
                                        <thead>
                                            <tr>
                                              <th>Section</th>
                                              <th>Joined</th>
                                            </tr>
                                        </thead>
                                        <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(); 

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



    $("#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) {

            $('#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.');

                }
                $("#startDate").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}]

                 table.clear();
                 table.rows.add(responseJson1a).draw();
            })
        }
    })

}); // 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);
    });
});
0 голосов
/ 10 июня 2018

Вы инициализируете 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);
    });
});

Другая альтернатива, которая избавляет вас от заполнения таблицы, - это непосредственная передача url в фид JSON.к плагину dataTable и пусть таблица обрабатывает ajax и совокупность данных.Контроллер должен возвращать данные в указанном формате here

    $('#example').DataTable( {
        "ajax": 'pathToYourController',
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...