jquery - 如何使用 JQuery.DataTables() 制作列数和行数不确定的 N 表

Question

我在一个页面加载 onchange 选择事件中创建了许多数据表。

<!-- bootstrap 3-->
<div class="panel-body tabla1 ">  <!-- INICIO -->
    <a href="#item-0" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>  #1    </a>
    <div class="list-group collapse" id="item-0" data-id="0">


<table id="exampleTablaDinamica0" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-1" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>  #2  </a>
    <div class="list-group collapse" id="item-1" data-id="1">


<table id="exampleTablaDinamica1" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-2" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>  #3 </a>
    <div class="list-group collapse in" id="item-2" data-id="2" style="">


<table id="exampleTablaDinamica2" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-3" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>  #4   </a>
    <div class="list-group collapse in" id="item-3" data-id="3" style="">


<table id="exampleTablaDinamica3" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-4" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i> #5 </a>
    <div class="list-group collapse" id="item-4" data-id="4">


<table id="exampleTablaDinamica4" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-5" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>#6   </a>
    <div class="list-group collapse" id="item-5" data-id="5">


<table id="exampleTablaDinamica5" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-6" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>  #7 </a>
    <div class="list-group collapse" id="item-6" data-id="6">


<table id="exampleTablaDinamica6" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-7" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i> #8 </a>
    <div class="list-group collapse" id="item-7" data-id="7">


<table id="exampleTablaDinamica7" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
    <!-- INICIO -->
    <a href="#item-8" class="list-group-item" data-toggle="collapse">
      <i class="glyphicon glyphicon-chevron-right"></i>  #9  </a>
    <div class="list-group collapse" id="item-8" data-id="8">


<table id="exampleTablaDinamica8" class="table table-striped table-bordered dt-responsive" style="width:100%">
  <thead></thead><tbody></tbody><tfoot></tfoot></table>



    </div>
  </div>

在同一页面中之后，我在打开折叠时将事件堆叠在显示.bs.collapse 上，我希望用唯一 ID 填充空表并应用数据表响应函数。在测试中，表在打开折叠时保持为空。

    $("body").on('show.bs.collapse',".collapse",  function(){

    var selected = [];
    $('.mesesPresupuesto input:checked').each(function() {
        selected.push($(this).attr('value'));
    });


 urlToLoad = 'acciones/mostrarDatosTablaFechaAjax.php';   

    id = $(this).attr("data-id");

    $.ajax({
        type: 'GET',
        url: urlToLoad,
        data: 'meses='+selected+'&idPresupuesto=1',
        dataType: 'json',
        beforeSend: function () {
        //console.log("bs");
        },
        success:function(data){

          var columns = [];
          columns = (Object.keys(data.data[0]));

        if ( $.fn.DataTable.isDataTable('#exampleTablaDinamica'+ id) ) {
          $('#exampleTablaDinamica'+ id ).DataTable().destroy();
        }


        console.log(data);


          $('#exampleTablaDinamica'+id).DataTable({
              "responsive": true,
              "destroy": true,
              "processing" : true,
              "ajax": {
                  url: urlToLoad,
                  dataSrc : '',
                  contentType: "application/json",
                  data: {
                      "meses": selected,
                      "idPresupuesto": 1
                  }
              },
              "columns" : columns
          }).columns.adjust();

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log("Status: " + textStatus); alert("Error: " + errorThrown);
        }
      });

  });

如何通过 JSON 对列和行进行所有表的负责设置？

标签： jqueryjsonajaxdatatable