将表中的 SQL 数据作为 JSON 获取到 Bootstrap Table 脚本中

Posted 2023-02-15

【中文标题】将表中的 SQL 数据作为 JSON 获取到 Bootstrap Table 脚本中

【英文标题】：GET SQL data from table as JSON into Bootstrap Table script

【发布时间】：2022-01-20 05:09:01

【问题描述】：

由于 Excel 和 PDF 下载等功能，我想在我的网站上实现一些脚本。我在 bootstrap-table.com 上找到了一个解决方案，我无法检索表数据，因为它们是脚本中的 json 源（data-url）。我的表数据在 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();

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

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

【问题讨论】：

比较你从json_encode($users)得到的结果和结构与examples.wenzhixin.net.cn/examples/bootstrap_table/data的数据的样子，然后相应地调整你的php使其输出相同的结构。

【参考方案1】：

我相信这会解决你的问题，首先将页面的标题设置为 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 是如何构成的，但是如果你需要传递参数，你应该可以通过一个 URL 访问这个文件，例如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 id="table"
  ...
  data-url="http://yoursite.com/users/jsondata<?=($_GET['minprice'] ? '?minprice=' . $_GET['minprice'] : '').($_GET['maxprice'] ? '&maxprice=' . $_GET['maxprice'] : '')?>">
</table>

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

编辑

查看您提供的示例链接后，我不得不想出这个。

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

我相信这应该可行。

【讨论】：

first of all set the headers for your page as json...这是有道理的，只是您编写的代码不会输出 JSON。事实上，它很可能会产生关于尝试将数组转换为字符串的警告。你忘了json_encode 部分吗？此外，这不会以与 OP 尝试替换的 JSON 相同的结构创建 JSON，因此他们尝试将其提供给的 bootsrap 插件可能无法接受。

@ADyson 对不起，我错过了那部分，我已经编辑了我的答案，你能支持我的投票吗？

如果我设置标题，我将在我的网站而不是表格上获得 json 数据的输出。

@3m1n3n3 输出格式仍然会出错。查看 OP 链接到的链接中的 JSON

@MischaMustermann 将生成 json 的脚本放在单独的页面上，然后在 data-url 中提供指向该页面的链接