He podido hacer que un archivo JSON se cargue en una tabla bien, pero quiero tener varios archivos JSON y cambiar cuál se carga en la tabla según el botón que se ha presionado. Pensé que podría hacer que cambiara la variable data, pero luego la tabla sigue siendo la misma (supongo que tiene que actualizarla de alguna manera).

Además, en una nota al margen, ¿es posible que los precios tengan un espacio entre ellos?

test.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <meta name="description" content="Hello World">
  <!-- Latest compiled and minified CSS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css">
  <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>
  <script src="data1.json"></script>
  <script src="data2.json"></script>

  <script>
  $(function () {
    $('#table').bootstrapTable({
      data: data_one
    });

    $('#data1').on('click', function(event) {
      $('#table').bootstrapTable({
        data: data_one
      });
    });

    $('#data2').on('click', function(event) {
      $('#table').bootstrapTable({
        data: data_two
      });
    });
  });
  </script>
</head>

<body>
  <header>
    <div class="jumbotron">
      <div class="container">
        <h3>Test</h3>
      </div> 
    </div> 
  </header>
  <div class="container">
    <div class="row">
      <div class="text-center">
      <a class="btn btn-large btn-success" id="data1">Data 1</a>
      <a class="btn btn-large btn-success" id="data2">Data 2</a>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <table id="table" class="table table-bordered" data-search="true" data-show-toggle="true">
        <thead>
          <tr>
            <th data-field="id" data-sortable="true">ID</th>
            <th data-field="name" data-sortable="true">Name</th>
            <th data-field="prices" data-sortable="true">Price</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>


  <footer>
    <div class="container">
      <hr>
      <p><small><a href="www.google.com">Google</a> didn't help me</small></p>
    </div>
  </footer>
</body> 
</html>

data1.json:

var data_one = [
  {
    "id": 0,
    "name": "test0",
    "prices": [
      "$0",
      "$5"
    ]
  },
  {
    "id": 1,
    "name": "test1",
    "prices": [
      "$4",
      "$1"
    ]
  },
  {
    "id": 2,
    "name": "test2",
    "prices": [
      "$2",
      "$3"
    ]
  },
];

data2.json:

var data_two = [
  {
    "id": 4,
    "name": "test4",
    "prices": [
      "$1",
      "$2"
    ]
  },
  {
    "id": 5,
    "name": "test5",
    "prices": [
      "$6",
      "$5"
    ]
  },
  {
    "id": 6,
    "name": "test6",
    "prices": [
      "$9",
      "$7"
    ]
  },
];
0
user5368737 14 may. 2016 a las 13:19

3 respuestas

La mejor respuesta

Debe especificar el método de 'carga' al actualizar los datos en la tabla:

<script>
  $(function () {
    $('#table').bootstrapTable({ data: data_one });

    $('#data1').on('click', function(event) {
      $('#table').bootstrapTable('load', { data: data_one });
    });

    $('#data2').on('click', function(event) {
      $('#table').bootstrapTable('load', { data: data_two });
    });
  });
</script>

Por alguna razón, no puede cargar inicialmente los datos con el método de carga, solo actualice. También puede agregar datos con el método "agregar" y hacer muchas cosas interesantes. Consulte la documentación aquí: Bootstrap Table Documentation

2
jetpackpony 14 may. 2016 a las 11:07

1) No necesita todas las funciones ready, solo una (las funciones que se parecen a $(function () {..}).

2) Además, no estás llamando al complemento en ese elemento nuevamente cuando haces clic en un botón, tienes que hacerlo explícitamente.

3) Finalmente, no ha agregado un detector de eventos a su segundo botón; agregó un detector duplicado a su primer botón.

4) Debe eliminar los onclick="data1()" y onclick="data2()" en línea de sus botones HTML.

$(function () {

  $('#table').bootstrapTable({
    data: data_one
  });

  $('#data1').on('click', function(event) {
    $('#table').bootstrapTable({
      data: data_one
    });
  });

  $('#data2').on('click', function(event) {
    $('#table').bootstrapTable({
      data: data_two
    });
  });

});
1
Andy 14 may. 2016 a las 10:46

No está integrando la función data2 (). Puede escribir su código de la siguiente manera.

$(function () {
    $('#table').bootstrapTable({
      data: data_one
    });
  });

function data1(){
    $('#table').bootstrapTable({
      data: data_one
    });
}
function data2(){
    $('#table').bootstrapTable({
      data: data_two
    });
}
0
Krishna 14 may. 2016 a las 10:46