带有 AJAX "Loading, please wait..."的引导表

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>

我试图安慰.log js函数中的一些测试，似乎它不是由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>