从 table 获取 SQL 数据作为 JSON 到 Bootstrap Table 脚本

Question

由于 Excel 和 PDF 下载等功能，我想在我的网站上实现一些脚本。我在 bootstrap-table.com 找到了解决方案我未能检索到 table 数据，因为它们是脚本中的 json 源（数据-url） .我的 table 数据在 SQL 数据库中可用。我试图创建一个查询并创建一个 json 格式的输出，但我失败了。我正在寻求有关这一点的帮助。

这是我找到的基本代码：

<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/tableExport.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/export/bootstrap-table-export.min.js"></script>

<style>
#toolbar {
  margin: 0;
}
</style>

<div id="toolbar" class="select">
  <select class="form-control">
    <option value="">Export Basic</option>
    <option value="all">Export All</option>
    <option value="selected">Export Selected</option>
  </select>
</div>

<table id="table"
  data-show-export="true"
  data-pagination="true"
  data-side-pagination="server"
  data-click-to-select="true"
  data-toolbar="#toolbar"
  data-show-toggle="true"
  data-show-columns="true"
  data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data">
</table>

<script>
  var $table = $('#table')

  $(function() {
    $('#toolbar').find('select').change(function () {
      $table.bootstrapTable('destroy').bootstrapTable({
        exportDataType: $(this).val(),
        exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
        columns: [
          {
            field: 'state',
            checkbox: true,
            visible: $(this).val() === 'selected'
          },
          {
            field: 'id',
            title: 'ID'
          }, {
            field: 'name',
            title: 'Item Name'
          }, {
            field: 'price',
            title: 'Item Price'
          }
        ]
      })
    }).trigger('change')
  })
</script>

我的问题如前所述，我的数据在我的 SQL 数据库中可用。所以我检索我的数据，如：

$statement = $pdo->prepare("SELECT id, vorname, rolle FROM users WHERE cid = :cid");
$result = $statement->execute(array(':cid' => $user['cid']));
$users = $statement->fetch();

我想将数据 url 从这个 data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data" 更改为这个 data-url="<?=json_encode($users)?> 会起作用，但我的 table.[=19 中没有显示任何数据=]

有什么想法可以通过使用我的 PDO 查询使它正常工作吗？

Answer 1

我相信这会解决您的问题，首先将您页面的 headers 设置为 json，这应该在页面上的任何输出之前：

header('Content-type: application/json; charset=utf-8');

然后像往常一样获取您的用户。

$statement = $pdo->prepare("SELECT id, vorname, rolle FROM users WHERE cid = :cid");
$result = $statement->execute(array(':cid' => $user['cid']));
$users = $statement->fetch();

最终回显该结果：

echo $users

总而言之，您的脚本应如下所示：

<?php
   header('Content-type: application/json; charset=utf-8');

   $statement = $pdo->prepare("SELECT id, vorname, rolle FROM users WHERE cid = :cid");
   $result = $statement->execute(array(':cid' => $user['cid']));
   $users = $statement->fetch();

   echo json_encode($users);
?>

最终编辑

创建一个新的PHP文件，上面代码中的内容，我不知道你的URL是如何构建的，但你应该可以通过[=51访问这个文件=] 例如 http://yoursite.com/users/jsondata，如果您需要传递参数来改变结果，您可以使用查询参数例如 http://yoursite.com/users/jsondata?minprice=2&maxprice=10，并相应地改变您的数据。当您访问此 url 时，您应该能够看到您的数据结构类似于您在此处拥有的数据：https://examples.wenzhixin.net.cn/examples/bootstrap_table/data

那么在你的 table 你可以有：

<table id="table"
  ...
  data-url="http://yoursite.com/users/jsondata<?=($_GET['minprice'] ? '?minprice=' . $_GET['minprice'] : '').($_GET['maxprice'] ? '&maxprice=' . $_GET['maxprice'] : '')?>">
</table>

实际上，您可以做很多事情来让您的代码更加优雅，但这应该让您抢先一步。

编辑

看了你提供的例子 link 之后，我不得不想出这个。

$users = $statement->fetch();
$data = [
   'total' => count($users),
   'totalNotFiltered' => count($users),
   'rows' => $users,
];
echo json_encode($data, JSON_FORCE_OBJECT);

我相信这应该有效。

从 table 获取 SQL 数据作为 JSON 到 Bootstrap Table 脚本

GET SQL data from table as JSON into Bootstrap Table script

php

datatable

json

pdo