Question

我试图将引导表与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调用...

谢谢您的回答！

Answer 1

您添加了Bootstrap和表JS吗？

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

Answer 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">

Answer 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>

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

3 个答案: