带有 AJAX 的引导表“正在加载，请稍候...”答案

【问题标题】：Bootstrap table with AJAX "Loading, please wait..."带有 AJAX 的引导表“正在加载，请稍候...”
【发布时间】：2019-11-26 09:32:15
【问题描述】：

我正在尝试使用带有 ajax 请求的引导表，如下例所示： https://examples.bootstrap-table.com/#options/table-ajax.html

但是，就像在示例中一样，我的数据没有加载，我只收到一条消息“加载中，请稍候...”。我尝试使用 bootstrapTable('hideLoading'); 隐藏消息，但我只得到“未找到匹配记录”。

您有什么想法为什么官方网站上的示例不起作用？

查看一些代码：

function ajaxRequest(params) {
  $.ajax({
    type: "GET",
    url: "getAjax.php",
    dataType: "json",
    success: function(data) {
      params.success({
        "rows": data,
        "total": data.length
      })
    },
    error: function(er) {
      params.error(er);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
  id="rtcapi">

  <thead class="thead-light">
    <tr>
      <th data-field="id">#</th>
      <th data-field="status">Status</th>
      <th data-field="ln_demander">Last name</th>
      <th data-field="fn_demander">First name</th>
    </tr>
  </thead>

我试图在 js 函数中 console.log 一些测试，它似乎没有被 html 调用...

感谢您的回答！

【问题讨论】：

getAjax.php 如果在浏览器中打开，是否返回任何数据？另外，您的函数似乎没有在任何地方被调用，请尝试将其放入 pageload on page ready 函数中。
是的，我的 getAjax.php 打开时会返回一些 json 数据...
好的，我刚刚找到了解决方案，非常感谢！！该函数在 $(document).ready(function() {} 中并且没有被有效调用...谢谢！

标签： javascript jquery ajax bootstrap-table

【解决方案1】：

你添加了 Bootstrap 和 table JS 吗？

<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

【讨论】：

【解决方案2】：

是的，我添加了所有这些 css 和 js 脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
  <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

【讨论】：

【解决方案3】：

请补充

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>

jquery.min.js之后

function ajaxRequest(params) {
  $.ajax({
    type: "GET",
    url: "getAjax.php",
    dataType: "json",
    success: function(data) {
      params.success({
        "rows": data,
        "total": data.length
      })
    },
    error: function(er) {
      params.error(er);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
  id="rtcapi">

  <thead class="thead-light">
    <tr>
      <th data-field="id">#</th>
      <th data-field="status">Status</th>
      <th data-field="ln_demander">Last name</th>
      <th data-field="fn_demander">First name</th>
      <th data-field="date_request">Date request</th>
      <th data-field="name">Name application</th>
      <th data-field="irn">IRN</th>
      <th data-field="internal">Internal/External</th>
      <th data-field="description">Description</th>
      <th data-field="users">Users</th>
      <th data-field="country">Country</th>
      <th data-field="valid_proof">Validation</th>
      <th data-field="date_prod">Date for prod</th>
    </tr>
  </thead>

【讨论】：