javascript - DataTables 警告：表（id）无法重新初始化 DataTable。（在服务器上有错误，但在 localhost 上没有）

Question

我实现了表的创建（基于 od Datatables 库）。奇怪的是，我在服务器端收到 DataTables 警告：(table id=scoringTableI - Cannot reinitialize DataTable on my server) 但在本地主机上一切正常。下面的文字是 PrintScreen 和我的源代码。有谁知道问题出在哪里？

评分DetailView.js

/*
timer to reinit datatable after it is properly loaded
 */
var reinitInterval;
var scoreDown = false;
const scaleHeight = 20; // Height of the canvases on which to draw the score scales
const sliderHeight = 15; // Height of the slider controlling the scores

$(document).ready(function() {
  console.log('document ready');
  initTables();
  reinitScoringTable();
  initSliders();

  $('.alert-dismissable').delay(2500).fadeOut();

  $('[data-toggle="popover"]').popover();

  $(document).keydown(function(event) {   // bind function called when key is released
    if (event.keyCode == 16){
      scoreDown = true;
    }
  });
  $(document).keyup(function() {  // click method to call keydown() function
    scoreDown = false;
  });
});

/*
 init all tables for the first time
 */
function initTables(){
  $( ".table-bordered" ).each(function( index ) {
    var id = '#' + this.getAttribute('id');
    initTable(id);
      console.log(id);
    if($(this).has('input.score-slider').length){
      // Add event listener to recalculate slider size on data table column width change
      $(this).on('column-sizing.dt', function (){
        initSliders();
      });
    }

    // reinit table page to avoid empty buttons
    $(id).on( 'page.dt', function () {
      var reinitInterval = setInterval(function(){ reinitScoringTable() }, 10);
    });

    //reinit table on click of the first field.
    //If the table shrunk due to the responsiveness the expanding buttons
    //is placed there
    $(id).DataTable().on( 'select', function ( e, dt, type, indexes ) {
      dt.deselect();
      if ( dt[0][0].column == 0) {
        reinitScoringTable();
      }
    });

  });
}

/*
 options of one single table
 */
function initTable(id){
  console.log('initTable(id=' + id + ')');
  $(id).DataTable({
    paging      : true,
    lengthChange: true,
    pageLength  : 10,
    searching   : true,
    ordering    : true,
    info        : true,
    autoWidth   : false,
    responsive  : true,
    aaSorting       : [],
      language: {
      paginate: {
        previous: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
        next: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
      }
    },
    lengthMenu  : [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
    select: {
            style: 'single',
            items: 'cell'
        },
    dom: "<'row'<'col-12 col-sm-12 col-md-12 col-lg-12 additional-buttons'B><'float-right col-12 col-sm-8 col-md-8 col-lg-8'f><'col-12 col-sm-4 col-md-4 col-lg-4'l>>" +
          "<'row'<'col-md-12't>><'row'<'col-md-12'ip>>",
    buttons: [

            {
                      extend: 'pdf',
                      className: 'btn btn-default h-spacer-3',
                      exportOptions: {
                          columns: ':visible'
                      }
                    },
                    {
                      extend: 'print',
                      className: 'btn btn-default h-spacer-3',
                      exportOptions: {
                          columns: ':visible'
                      }
                    },
                    {
                      extend: 'excel',
                      className: 'btn btn-default h-spacer-3',
                      exportOptions: {
                          columns: ':visible'
                      }
                    },
                    {
                      extend: 'csv',
                      className: 'btn btn-default h-spacer-3',
                      exportOptions: {
                          columns: ':visible'
                      }
                    },
                    {
                      extend: 'copy',
                      className: 'btn btn-default h-spacer-3',
                      exportOptions: {
                          columns: ':visible'
                      }
                    },
      ]
  });

  console.log('initTable(id=' + id + ')' + ' finished');
}

/*
 fixes detached buttons, corrects displayed values in table buttons,
 recalculates responsive table
 */
function reinitScoringTable() {
  console.log('reinitScoringTable()');
  clearInterval(reinitInterval);

  $( ".table-bordered" ).each(function( index ) {
    var id = '#' + this.getAttribute('id');
    $(id).DataTable().columns.adjust().responsive.recalc();
  });

  //rebind all buttons. Used for AOI scoring
  $('.btn-scoring').unbind();
  $('.btn-scoring').click(function() {
    var form = $($(this).attr('form-id'));
    var typeId = form.attr('type-id');
    var min = parseFloat(form.attr('min'));
    var max = parseFloat(form.attr('max'));
    var stepsize = parseFloat(form.attr('stepsize'));
    var view = $(this).attr('view');

    //will only be executed in the beginning and will update all scores to minimum
    if(isNaN(parseFloat(form.val()))){
      var newVal = min;
      //updates the rest of the row
      $('.' + form.attr('class').split(' ').join('.')).each(function( index ) {
        $(this).val(parseFloat($(this).attr('min')));
        updateButtons();
      });
    }else{
      //normal increment by stepsize
      var val  = parseFloat(form.val()) == 0 ? form.val() : parseFloat(form.val()) || min;

      if(scoreDown){
        a = val-min-stepsize
        b = max-min+stepsize
        var newVal = ((a%b)+b)%b+min;
      }else {
        var newVal = (val-min+stepsize)%(max-min+stepsize)+min;
      }
    }

    form.val(newVal);
    updateSystemScores(form.attr('class'), form, view);
    setTypeLabel(typeId, (newVal-min)/stepsize, this, newVal);
  });

  // Slider for image scoring
  $('.score-slider').off("input change");
  $('.score-slider').on('input change', function(){
    var newVal = $(this).val();
    var form = $($(this).attr('form-id'));
    var typeId = form.attr('type-id');
    var min = parseFloat($(this).attr('min'));
    var stepsize = parseFloat($(this).attr('step'));
    var label = $($(this).parent().parent().find('.score-label'));
    // If no score was saved yet, initialise all to minimum
    if(isNaN(parseFloat(form.val()))){
      $('.' + form.attr('class').split(' ').join('.')).each(function(){
        $(this).val(parseFloat($(this).attr('min')));
      });
      // Set the current one to the new value
      form.val(newVal);
      updateSliderLabels();
    } else {
      form.val(newVal);
    }

    setTypeLabel(typeId, (newVal-min)/stepsize, label, newVal);
    // The saving of the new score is only done on slider release
    if(event.type == 'change'){
      var view = $(this).attr('view');
      updateSystemScores(form.attr('class'), form, view);
    }
  })

  updateButtons();

  updateAllSystemScorings();
}

//set values of all buttons in table
function updateButtons(){
  $( ".btn-scoring" ).each(function( index ) {
    var form = $($(this).attr('form-id'));
    if(isNaN(parseFloat(form.val()))){
      $(this).html('n.d.');
    }else{
      var typeId = form.attr('type-id');
      var val = parseFloat(form.val()) || 0;
      var min = parseFloat(form.attr('min'));
      var max = parseFloat(form.attr('max'));
      var stepsize = parseFloat(form.attr('stepsize'));
      setTypeLabel(typeId, (val-min)/stepsize, this, val);
    }
  });
}

/*
* Set values for all slider labels
*/
function updateSliderLabels(){
  $('.score-slider').each(function(){
    var form = $($(this).attr('form-id'));
    var label = $($(this).parent().parent().find('.score-label'));
    // If no value for this type yet, label is 'n.d.'
    if(isNaN(parseFloat(form.val()))){
      label.html('n.d.');
    } else { // Else set label to current value
      var val = parseFloat(form.val()) || 0;
      setTypeLabel(form.attr('type-id'), (val - parseFloat($(this).attr('min'))/parseFloat($(this).attr('step'))), label, val);
    }
  })
}

// recalc responsive on resizing
$(window).resize( function(){
  if(document.readyState === 'complete'){
    reinitScoringTable();
  }
});

/*
  Save type scores, recalculate system score and load the result
 */
function updateSystemScores(rowClass, form, view){
  $('.active .scoring-status-symbol').attr( "class" , 'fa fa-spinner fa-spin scoring-status-symbol');
  var data = $('.' + rowClass.split(' ').join('.')).serialize() + "&imageId=" + $('#image_id').attr('value');
  if(form[0].hasAttribute('subSystem-id')){
    data = data + '&subSystemId=' + form.attr('subSystem-id');
  }
  $.ajax({
    type: 'POST',
    url: "/scoring/systemscore",
    data: data,
    success: function(data, textStatus, xhr){
      if(xhr.status == 200){
        var scores = data[0];
        var summary = data[1];
        // Refill the score system scores with the new calculated scores
        for (var score in scores) {
          $(form.attr('score-ref') + '_' + scores[score]['score_system_id']).attr('value',scores[score]['result']);
        }
        updateAllSystemScorings();
        // Reload summary view
        $("#summary-pane" + view).html(summary);
        $('.active .scoring-status-symbol').attr( "class" , 'fa fa-check scoring-status-symbol');
      }else{
        $('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
      }

   },
   error: function() {
     console.log("AJAX save failed")
     $('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
   }
  });
}

/**
 * sets right system scores in scoring tables
 */
function updateAllSystemScorings(){
  $( ".lab-scoring" ).each(function( index ) {
    var form = $($(this).attr('form-id'));
    var val = form.attr('value');
    $(this).html(val);
  });
}

/*
 reinit on tab change
 */
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  reinitScoringTable();
});

/**
* Delete image (div_id = I) or AOI (div_id = AOI) scores
* @param String div_id, indicates if request for deletion is coming from AOI or Image
* @param Int subSystemId potential subSystem to delete the scores from
*/
function deleteScores(div_id, subSystemId = null){
  if(subSystemId){
    var url = '/scoring/deletetimepointscores/';
    url = url + $('#image_id').attr('value') + '/' + subSystemId;
  } else {
    var url = (div_id.indexOf('AOI') !== -1) ? '/scoring/deleteaoiscores/' : '/scoring/deleteimgscores/';
    url = url + $('#image_id').attr('value');
  }
  $('.active .scoring-status-symbol').attr('class', 'fa fa-spinner fa-spin scoring-status-symbol');
  $.ajax({
    type: 'POST',
    url: url,
    success: function(data, textStatus, xhr){
      console.log('Ajax successful');
      $('.active .scoring-status-symbol').attr('class', 'fa fa-exclamation scoring-status-symbol');
      if(xhr.status == 200){
        var summary = data[0];
        var score_labels = data[1];
        $('#summary-pane' + div_id).html(summary);
        $('#scoringTable' + div_id).find('.btn-scoring').each(function(index){
          var form = $($(this).attr('form-id'));
          // Reset buttons to n.d
          $(this).html('n.d.');
          form.val('n.d');
          // Reset labels to minimum values
          for (var score_label in score_labels) {
            $(form.attr('score-ref') + '_' + score_labels[score_label][0]).attr('value', score_labels[score_label][1]);
          }
        });
        if(subSystemId){
          var scoringTableId = '#scoringTable' + subSystemId;
        } else {
          var scoringTableId = '#scoringTable' + div_id;
        }
        $(scoringTableId).find('.score-slider').each(function(index){
          var form = $($(this).attr('form-id'));
          var typeId = form.attr('type-id');
          // Set slider to minimun
          setSliderToMin($(this));
          form.val('n.d');
          $($(this).parent().parent().find('.score-label')).html('n.d.');
          for (var score_label in score_labels) {
            $(form.attr('score-ref') + '_' + score_labels[score_label][0]).attr('value', score_labels[score_label][1]);
          }
        })
        updateAllSystemScorings();
        $('.active .scoring-status-symbol').attr( "class" , 'fa fa-check scoring-status-symbol');
      }else{
        $('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
      }
    },
    error: function(){
      console.log('Ajax failed');
      $('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
    }
  });


}

/*
* Display modal for delete confirm and callback the delete function
* @param element: button triggering the function
* @param text: description text to display in the delete modal
* @param title: title for the delete modal
* remark: text and title should not be undefined, otherwise the modal message will not be related to its function anymore
*/
function ConfirmDeleteScores(element, text, title)
{
  setUpDeleteScoresModal(text, title);
  var div_id = (element.id).replace('delete-scores', ''); // check if AOI or image scores

    $('#confirm-delete-modal').find('.modal-footer #modal-delete-btn').on('click', function(){
      $("#confirm-delete-modal").modal("hide");
    deleteScores(div_id, element.getAttribute('subSystem'));
    return true;
    });
  return false;
}


$("#delete-scoresAOI").unbind();
$("#delete-scoresI").unbind();

文档.blade.php

@if($scoreConfig->scoring_enabled)
    <div class="row">
     <div class="card ml-2" style="width: 100%;">
         <div class="card-body" id="score-button-small" style="height: 10px;">

                <button class="btn btn-box-tool collapse-tab-content float-right" href="#note-tabs">
                    <i style="color: #1e88e5;" class="fa fa-minus"></i>
                </button>

        </div>  
     <div class="card-body">
        <div class="row">
        <div class="nav-tabs-custom nav-tabs-documentation" style="width: 100%;">
            <ul class="nav nav-tabs customtab" id="score-tabs">
                @php
                    $activePane = "active";
                @endphp
                @if($scoreConfig->scoring_enabled && $scoreConfig->image_based_score)
                    <li class="nav-item {{$activePane}}">
                        @php
                            $activePane = "";
                        @endphp
                        <a class="nav-link active" href="#{{trans('scoring.scoring')}}" data-toggle="tab" aria-expanded="true">
                                    <span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_img')}}">
                                    <span class="hidden-lg-up">ScI <i class="fa fa-check scoring-status-symbol"></i></span> </span>
                                    <span class="hidden-md-down">{{trans('scoring.scoring_per_img')}} <i class="fa fa-check scoring-status-symbol"></i></span> 

                        </a>
                    </li>
                    @if(in_array(\Auth::user()->userGroup->id,config('usergroups.summaryScoring')))
                        <li class="nav-item">   
                            <a class="nav-link" href="#summary-paneI" data-toggle="tab" aria-expanded="true">
                                <span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_img')}}">
                                <span class="hidden-lg-up">SuI</span> </span>
                                <span class="hidden-md-down">{{trans('scoring.summary_per_img')}}</span> 
                            </a>
                        </li>
                    @endif
                @endif
                @if($scoreConfig->scoring_enabled && $scoreConfig->aoi_based_score)
                    <li class="nav-item {{$activePane}}">
                        <a class="nav-link" href="#{{trans('scoring.scoring')}}-aoi" data-toggle="tab" aria-expanded="true">
                            <span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_AOI')}} ">
                            <span class="hidden-lg-up">ScA <i class="fa fa-check scoring-status-symbol"></i></span> </span>
                            <span class="hidden-md-down">{{trans('scoring.scoring_per_AOI')}} <i class="fa fa-check scoring-status-symbol"></i></span>  
                        </a>
                    </li>
                    @if(in_array(\Auth::user()->userGroup->id,config('usergroups.summaryScoring')))
                        <li class="nav-item ">
                            <a class="nav-link" href="#summary-paneAOI" data-toggle="tab" aria-expanded="true">
                                <span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_AOI')}} ">
                                <span class="hidden-lg-up">SuA</span> </span>
                                <span class="hidden-md-down">{{trans('scoring.summary_per_AOI')}}</span>    

                            </a>
                        </li>
                    @endif
                @endif
                <div class="box-tools ml-auto" id="score-button-big">
                    <button class="btn btn-box-tool collapse-tab-content" href="#note-tabs">
                        <i style="color: #1e88e5;" class="fa fa-minus"></i>
                    </button>
                </div>
            </ul>

        <div class="tab-content" id="note-tabs">
            @php
                $activePane = "active";
            @endphp
            @if($scoreConfig->scoring_enabled && $scoreConfig->image_based_score)
                <div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}">
                    @php
                        $activePane = "";
                    @endphp
                    @if($scoreConfig->scoreSuperSystem)
                        @include('scoring.image.subsystem')
                    @elseif($scoreConfig->types->isEmpty()) 
                        @include('scoring.demo.scoring')
                    @else
                        @include('scoring.image.scoring')
                    @endif
                </div>
                <div class="tab-pane" id="summary-paneI">
                    @if($scoreConfig->scoreSuperSystem)
                        @include('scoring.image.subsystemsummary')
                    @elseif($scoreConfig->types->isEmpty())
                        @include('scoring.demo.summary')
                    @else
                        @include('scoring.image.summary')
                    @endif
                </div>
            @endif
            @if($scoreConfig->scoring_enabled && $scoreConfig->aoi_based_score)
            @php
                $demoAOI = 1;
            @endphp
            <div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}-aoi">
                @if($scoreConfig->types->isEmpty())
                    @include('scoring.demo.scoring')
                @else
                    @include('scoring.aoi.scoring')
                @endif
            </div>
            <div class="tab-pane" id="summary-paneAOI">
                @if($scoreConfig->types->isEmpty())
                    @include('scoring.demo.summary')
                @else
                    @include('scoring.aoi.summary')
                @endif
            </div>
            @endif
            </div>
        </div>
    </div>
@endif      
            </div>  
        </div>
    </div>

<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/bootstrap4.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/datatables.min.css') }}"/>
<script src="{{asset('/plugins/DataTablesBootstrap4/jquery.dataTables.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.responsive.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/plugins/datatables/1.10.16/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.flash.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/jszip.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/pdfmake.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/vfs_fonts.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.print.min.js') }}"></script>
    <script src="{{ asset('/js/jquery.form.js') }}"></script>
        <script src="{{ asset('/js/scoring/scoringDetailView.js?v=2.25.0') }}"></script>
        <script src="{{ asset('/js/scoring/scoring.js?v=2.25.0') }}"></script>

评分.blade.php

<style>
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;

}
.dataTables_wrapper {
    width: 100%;
}
</style>

{!! Form::open(['route' => ['documentation.scoring.scoring',$image->id], 'onSubmit' => '$.fn.showPleaseWait();', 'id' => 'scoringFormI']) !!}

<div style='position: absolute; visibility: hidden'>
  @foreach ($scoreConfig->types as $type)
        {!! Form::number('scoring',
           $value = $prevScoresI->isEmpty() ? 'n.d.' : $prevScoresI->get($type->id)->score ,
           ['min' => $type->min, 'max' => $type->max,'stepsize' => $type->stepsize,
           'class' => 'btn btn-default btn-datarow-image',
           // id : id which is set as form-id in the according button,
           // number code is the same as in the name field
           'id' => 'scores'.$type->id,
           // href to the system score div
           'score-ref' => '#systemScoreImage',
           // array field in which the score is saved
           'name' => 'scores['.$type->id.']',
           'type-id' => $type->id,
           'style' => 'outline: none; visibility: hidden','required','readonly']) !!}
  @endforeach

  @if ($systemScoresI->count())
    @foreach ($systemScoresI as $key => $scoreI)
      <div id="systemScoreImage_{{$scoreI->systemScore->scoreSystem->id}}" style="visibility: hidden;" value="
        {{ $scoreI->systemScore->result($scoreI, $scoreI->systemScore->scoreSystem->style->name) }}"></div>
    @endforeach
  @else
    @foreach ($scoreConfig->scoreSystems as $key => $systems)
      <div id="systemScoreImage_{{$systems->id}}" style="visibility: hidden;" value="
        {{$systems->scoreSystemScores[0]->result(NULL, $systems->style->name)}}"></div>
    @endforeach
  @endif
</div>
<div class="card-body">
  <div class="row">
   <div class="table-responsive"> 
    <table id='scoringTableI' class="table table-striped table-bordered">
      <thead>
        <tr>
          <th style="width: 30%">{{trans('scoring.parameter')}}</th>
          <th>{{trans('scoring.score')}}</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($scoreConfig->types as $type)
          <tr>
            <!-- If the type has a description, show it, otherwise show the name -->
            @if(isset($type->description))
              <th title="{{$type->name}}">{{$type->description}} ({{$type->min}}-{{$type->max}})</th>
            @else
              <th>{{$type->name}} ({{$type->min}}-{{$type->max}})</th>
            @endif
            <td>
              <div class="row">
                <!-- The JS of this view relies on the position of the slider and its label in the DOM.
                    If the DOM structure is changed, please update the JS file accordingly
                    regarding the slider event listener which also updates the label -->
                @php
                  if($prevScoresI->isEmpty()){
                    $savedScore = 'n.d.';
                    $hasScore = false;
                  } else {
                    $savedScore = $prevScoresI->get($type->id)->score;
                    $hasScore = true;
                  }
                  $savedScore = $prevScoresI->isEmpty() ? 'n.d.' : $prevScoresI->get($type->id)->score;
                @endphp

                <div class="col-lg-9 col-md-6 col-sm-6 col-xs-12">
                  <canvas class="score-scale" style="position: absolute"></canvas>
                  <input style="position: inherit; width: 80%;" class="score-slider" type="range" min="{{$type->min}}" max="{{$type->max}}" step="{{$type->stepsize}}" value="@if($hasScore){{$savedScore}}@else{{$type->min}}@endif" style=" position: absolute;" view="I" form-id="{{'#scores'.$type->id}} "class="form-control-range">
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                  <label class="score-label float-right">{{$savedScore}} @if(count($type->labels) && $hasScore)({{$type->labels->where('type_index', ($savedScore - $type->min) / $type->stepsize)->pluck('label')->first()}})@endif </label>
                </div>
              </div>
            </td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
 </div> 
  @if($scoreConfig->scoreSystems->count())
  <div class="row">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th style="width: 30%">{{trans('scoring.scoreSystem')}}</th>
          <th>{{trans('scoring.score')}}</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($scoreConfig->scoreSystems as $key => $system)
          <tr>
            <td>{{$system->name}}</td>
            <td><label class="lab-scoring" form-id="#systemScoreImage_{{$system->id}}"></label></td>
          </tr>
        @endforeach
      </tbody>
    </table>
  </div>
  @endif
</div>
{!! Form::close() !!}
<div class ='card-footer' style="background-color: white;">
   <div class="row justify-content-center">
    <div class='col-md-2'>
      <button id='delete-scoresI' class='btn btn-default btn-2icons btn-wrapper' onclick="return ConfirmDeleteScores(this, '{{trans('modals.delete_current_image_scores')}}', '{{trans('modals.delete_current_image_scores_title')}}')" data-toggle='tooltip' data-placement='top' title="{{trans('tooltips.delete_current_image_scores')}}">
        <i class='fa fa-trash'></i>
      </button>
    </div>
  </div>
</div>

标签： javascriptjquerydatatable