twitter-bootstrap-3 - 引导表：从远程源添加数据 ID

Question

我有一个包含来自远程源的数据的引导表，但我找不到如何将数据添加到 . 这是我的源数据：

$ajax[] = array(
    "qta" => $row['qta'],
    "name" => $row['name'],
    "description" => $row['description']
);

但我想拥有它：

$ajax[] = array(
    "id" => $row['id'], //123
    "qta" => $row['qta'],
    "name" => $row['name'],
    "description" => $row['description']
);

为了让我的表格行像：

<tr data-pk="123">
    <td>...qta...</td>
    <td>...name...</td>
    <td>...description...</td>
</tr>

我怎么能做到这一点？也许一些responseHandler？我对 BS Table 很陌生。

Answer 1

使用 数据表

HTML 表格

<table id="data" class="display table table-striped table-bordered">
  <thead>
    <tr>
      <th>Row 1</th>
      <th>Row 2</th>
      <th>Row 3</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

服务器端

//List list = new LinkedList();
rs1 = s1.executeQuery("select * from somewhere");
obj = new JSONObject();
obj.put("row1", rs1.getString("rowfromdb1"));
obj.put("row2", rs1.getString("rowfromdb2"));
obj.put("row3", rs1.getString("rowfromdb3"));

//list.add(obj);
//return obj;
//return list

和用于填充数据的 JavaScript

//settings for your datatable
$(document).ready(function() {
  $('#data').DataTable({
    "columns": [{
      "data": "row1",
      "width": "30%"
    }, {
      "data": "row2",
      "width": "30%"
    }, {
      "data": "row3",
      "width": "40%"
    }]
  });
});
//ajax call which fill up your table on load of your page/change value of some object
$.ajax({
  type: "GET",
  url: "myScript",
  data: "param1=" + value,
  success: function(msg) {
    $('#data').dataTable().fnClearTable();
    $('#data').dataTable().fnAddData(
      JSON.parse(msg.trim())
    );
  }
}
});

希望对你有帮助