2

Estoy Utilizando el plugin datatables.js para mostrar los datos obtenidos de una consulta en una tabla, actualmente las columnas que se muestran en la tabla son fijas y las muestro con el siguiente codigo:


            $('#example').DataTable({
                "ajax": 'php/resultados_adquiridos.json',
                "columns": [
                    { "data": "ID" },
                    { "data": "FECHA"},
                    { "data": "T1" },
                    { "data": "T2" },
                    { "data": "T3" },
                    { "data": "T4" },
                    { "data": "T5" },
                    { "data": "T6" },
                    { "data": "T7" },
                    { "data": "T8" },
                    { "data": "T9" },
                    { "data": "T10" },
                    { "data": "T11" },
                    { "data": "T12" },
                    { "data": "T13" },
                    { "data": "T14" },
                    { "data": "T15" },
                    { "data": "T16" },
                    { "data": "T17" },
                    { "data": "T18" },
                    { "data": "T19" },
                    { "data": "T20" },
                    { "data": "T21" },
                    { "data": "T22" },
                   
                ],

pero ahora me solicitan que cada checkbox represente una columna y si el checkbox esta seleccionado esa columna se tiene que mostrar al presionar el boton submit,pero no tengo idea de como realizar esto,alguien podria indicarme que camino podria tomar,gracias

                    <li><input type="checkbox"  name='checkbox[]' value='T2'/><label for="text1">T2</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T3'/><label for="text1">T3</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T4'/><label for="text1">T4</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T5'/><label for="text1">T5</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T6'/><label for="text1">T6</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T7'/><label for="text1">T7</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T8'/><label for="text1">T8</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T9'/><label for="text1">T9</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T10'/><label for="text1">T10</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T11'/><label for="text1">T11</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T12'/><label for="text1">T12</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T13'/><label for="text1">T13</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T14'/><label for="text1">T14</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T15'/><label for="text1">T15</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T16'/><label for="text1">T16</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T17'/><label for="text1">T17</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T18'/><label for="text1">T18</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T19'/><label for="text1">T19</label></li>
                    <li><input type="checkbox"  name='checkbox[]' value='T20'/></td><label for="text1">T20</label></li>
                    <li><input type='checkbox'  name='checkbox[]' value='T21'/></td><label for="text1">T21</label></li>
                    <li><input type='checkbox'  name='checkbox[]' value='T22'/></td><label for="text1">T22</label></li>
                    <button id="enviar" type="submit" class="btn btn-primary  ">Obtener datos</button>

1 respuesta 1

1

ACTUALIZACIÓN

Una vez aclarada la duda, he actualizado mi ejemplo:

var dataUrl = "https://my-json-server.typicode.com/SagnalracSO/repoJD/employees";

function mostrarTabla() {

    $("#example").show();

    var table = $('#example').DataTable({
        ajax: {
          url: dataUrl,
          dataSrc: ''
        },
        destroy: true,
        columns: [
          { 
             data: 'id',
             visible: $("#cbId").is(":checked")
          },
          { 
             data: 'firstName',
             visible: $("#cbFirstName").is(":checked")
          },
          { 
             data: 'lastName',
             visible: $("#cbLastName").is(":checked")
          },
          { 
             data: 'position',
             visible: $("#cbPosition").is(":checked")
          },
          { 
             data: 'office',
             visible: $("#cbOffice").is(":checked")
          },
          { 
             data: 'age',
             visible: $("#cbAge").is(":checked")
          },
          { 
             data: 'startDate',
             visible: $("#cbDate").is(":checked")
          }
        ]
      });
}
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<input type="checkbox" id="cbId" checked="checked" />
<label for="cbId">Mostrar/Ocultar Id</label><br>
<input type="checkbox" id="cbFirstName" checked="checked" />
<label for="cbFirstName">Mostrar/Ocultar First Name</label><br>
<input type="checkbox" id="cbLastName" checked="checked" />
<label for="cbLastName">Mostrar/Ocultar Last Name</label><br>
<input type="checkbox" id="cbPosition" checked="checked" />
<label for="cbPosition">Mostrar/Ocultar Position</label><br>
<input type="checkbox" id="cbOffice" checked="checked" />
<label for="cbOffice">Mostrar/Ocultar Office</label><br>
<input type="checkbox" id="cbAge" checked="checked" />
<label for="cbAge">Mostrar/Ocultar Age</label><br>
<input type="checkbox" id="cbDate" checked="checked" />
<label for="cbDate">Mostrar/Ocultar Start Date</label><br>
<br>
<button onclick="mostrarTabla()">Mostrar Tabla</button>
<br><br>
<table id="example" class="display" style="width:100%; display: none;">
  <thead>
    <tr>
      <th>Id</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start Date</th>
    </tr>
  </thead>
</table>
<br>

10
  • creo que no me explique bien,he modificado la pregunta,ojala sea mas comprensible,gracias por la ayuda!!!
    – Luis LIRE
    Commented el 8 sept. 2020 a las 14:45
  • @LuisLIRE: Disculpa la confusión, ya actualicé mi ejemplo. Es eso lo que estabas buscando?
    – Sagnalrac
    Commented el 8 sept. 2020 a las 15:37
  • mas o menos,exactamente lo que busco,es que antes de mostrar la tabla con los datos,el usuario tenga que seleccionar los checkboxes correspondientes a las columnas que desea consultar y en base a ellos,se muestren las columnas deseadas
    – Luis LIRE
    Commented el 8 sept. 2020 a las 15:51
  • @LuisLIRE: Ah ok! Era al momento de su inicialización. He vuelto a editar mi respuesta. Dicen que la tercera es la vencida ;)
    – Sagnalrac
    Commented el 8 sept. 2020 a las 16:22
  • ejecute el codigo de ejemplo pero me da problemas,y no he podido ver si el funcionamiento );
    – Luis LIRE
    Commented el 8 sept. 2020 a las 16:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.