bootstrap-table (wenzhixin) -->数据由Ajax提供
bootstrap-table (wenzhixin) -->数据由Ajax提供
提问于 2017-03-17 03:16:31
我想使用文智信(http://bootstrap-table.wenzhixin.net.cn/)的引导表库，但我的技能似乎不够好，无法让脚本运行。
我希望通过ajax为该表提供数据。
以下是运行正常的代码(来自源页面的示例)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SL Time</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Table -->
<link href="css/bootstrap-table.css" rel="stylesheet">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Table -->
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-de-DE.js"></script>
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>
<script>
// your custom ajax request here
function ajaxRequest(params) {
// data you need
console.log(params.data);
// just use setTimeout
setTimeout(function () {
params.success({
total: 100,
rows: [{
"nummer": 0,
"name": "Item 0",
}]
});
}, 1000);
}
但是我想要来自我的页面"ajax_loader.php“的数据，它看起来像这样：
<?php
$data=array();
array_push($data, array('nummer' => '1', 'name' => 'daniel'));
array_push($data, array('nummer' => '2', 'name' => 'thomas'));
echo json_encode($data);
?>但是我如何让下面这段代码来填充表(就像示例函数一样)：
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
success: function(data) {
// At this position my knowledge ends ;-(
}
});有没有人能帮我把这玩意儿修好？
诚挚的问候
丹尼尔
回答 2
Stack Overflow用户
发布于 2017-04-10 22:49:07
文档是您的朋友^^ (另外还有一个示例：http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/custom-ajax.html)。
说真的，以下是解决方案：
HTML：
<div class="container">
<table id="table"
data-toggle="table"
data-height="460"
data-search="true"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="nummer">Nummer</th>
<th data-field="name">Name</th>
</tr>
</thead>
</table>
</div>脚本：
// your custom ajax request here
function ajaxRequest(params) {
// data you may need
console.log(params.data);
$.ajax({
type: "POST",
url: "ajax_loader.php",
data: "user-id=1",
// You are expected to receive the generated JSON (json_encode($data))
dataType: "json",
success: function (data) {
params.success({
// By default, Bootstrap table wants a "rows" property with the data
"rows": data,
// You must provide the total item ; here let's say it is for array length
"total": data.length
})
},
error: function (er) {
params.error(er);
}
});
}Stack Overflow用户
发布于 2020-02-01 10:42:26
params.success是函数！您需要更多参数，如下所示
function ajaxRequest(params) {
$.ajax({
type: "POST",
url: "/gruzin/getdb",
success: function (data) {
console.log(data);
params.success({
"rows": data,
"total": data.length
},null,{});
},
error: function (er) {
params.error(er);
}
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42843001
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号