从rest api查询数据表，而无需在html中预先定义表

我想通过从其他API的post请求来查询JSON：

http://localhost/post1  
param1='1'

返回以下内容：

{
"json_table": [
{
"date": 123,
"test": "hello2"
},
{
"date": 19,
"test": "hello"
},
}

然后，它应该自动填充到一个jquery数据表中，就像这里描述的那样：

$('#myTable').DataTable( {
ajax: '/api/myData'
} );

我不明白的是：

如何告诉它使用参数发出post请求
我如何创建表而不必在HTML中预定义它，这样它就完全不知道JSON返回了什么，并且只相应地显示表，无论"JSON_table"记录(它是从熊猫数据帧df.to_JSON(orient='records'(中生成的(中有什么
如何使它每15秒刷新一次(再次查询(并更新表

欢迎提出任何建议。

要使用参数发出post请求，U可以做以下操作：

$.ajax({
type: 'POST',
dataType: "json", #define the response type as Json
url: url,
data: data,  # make a post request with a parameter you want
success: success
});

U可以用json数据创建表，如下所示：

<script type="text/javascript">
var myContacts = [{ "name": "Parvez Ansari", "email": "ansariparvez@gmai.com", "mobile":"9998979695" },
{ "name": "Tayyeb Shaikh", "email": "tshaikh1981@gmai.com", "mobile":"9091929394" },
{ "name": "Ashfaque Shaikh", "email": "ashly786@gmai.com", 
"mobile":"8081828384" }
];

li>U可以参考此代码每隔15分钟刷新一次：检查此Ans

从任意JSON创建动态DataTable当然是可能的，但它可能会变得复杂，这取决于您尝试使用的DataTables的功能数量。

此外，如果您可以控制从服务器发送的JSON，您可以让事情变得更容易。我假设您确实对以下内容有这样的控制。

静态示例

假设我们从这个简单的静态示例开始：

服务器发送以下JSON数据：

{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architext",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421",
"toggle": "off"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "1278",
"toggle": "on"
}
]
}

我们有一个简单的DataTables定义，如下所示：

<body>
<div style="margin: 20px;">
<table id="example" class="display" style="width:100%"></table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": { 
"url": "http://localhost:7000/employees",
"dataSrc": "data",
"type": "GET", 
},
"columns": [
{ "data": "name",
"title": "Name" },
{ "data": "position",
"title": "Position" },
{ "data": "office",
"title": "Office" },
{ "data": "extn",
"title": "Extn." },
{ "data": "start_date",
"title": "Start Date" },
{ "data": "salary",
"title": "Salary" },
]
} );
} );
</script>
</body>

增强JSON

为了让我们自己更容易，我们可以增强从服务器发送的JSON，以包含有关数据记录中列的元数据：

{
"response": [
{
"columns": [
{
"data": "name",
"title": "Name"
},
{
"data": "position",
"title": "Position"
},
{
"data": "office",
"title": "Office"
},
{
"data": "extn",
"title": "Extn."
},
{
"data": "start_date",
"title": "Start Date"
},
{
"data": "salary",
"title": "Salary"
}
]
},
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architext",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421",
"toggle": "off"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "1278",
"toggle": "on"
}
]
}
]
}

JSON中这个新的columns部分基本上与第一个DataTables定义中硬编码的信息相同。

当我们从服务器接收JSON时，我们可以将其读取到一个变量中，然后在DataTables配置中使用该变量。

我们也可以对数据记录做同样的事情：

var tableData = [];
var tableColumns = [];
...
$('#example').DataTable( {
"data": tableData,
"columns": tableColumns
} );

为了获得更大的灵活性，ajax请求可以从DataTables:中分离出来

<script type="text/javascript">
var tableData = [];
var tableColumns = [];
function ajax1() {
return $.ajax({
url: "http://localhost:7000/employees",
success : handleData,
type: "POST",
data: { "foo": "bar" }
});
}
function handleData(data) {
tableData = data.response[1].data;
//console.log(JSON.stringify(tableData));
tableColumns = data.response[0].columns;
}
$(document).ready(function() {
$.when(ajax1()).done(function(a1){
$('#example').DataTable( {
"data": tableData,
"columns": tableColumns
} );
});
} );
</script>

组装所需内容的最简单方法是(我认为(编写数据表的硬编码版本，然后开始用动态创建的变量替换部分。

带参数的POST

上面的ajax示例包括以下几行：

type: "POST",            // request type (watch out for CORS!)
data: { "foo": "bar" }   // request body (form parameters)

这意味着ajax请求将是POST，并且在本例中包含一个包含foo=bar的请求体。你当然可以把你需要的东西放进去。这是标准表单数据。服务器将以其使用的任何标准方式读取这些数据(例如，请求上下文表单参数(。

自动刷新

我自己还没有这样做，但有一些使用setInterval的解决方案——类似于这样的：

setInterval( function () {
console.log("reloading");
}, 2000 ); // milliseconds

最后一点注意-只是重申一下-这将无法处理您向其抛出的任何JSON。如果您无法控制JSON结构，那么一个负载和下一个负载之间可能存在太多差异。

但是，如果您控制JSON，并且想要定义更多的功能(例如，默认排序、隐藏列(，则可以开始将这些功能作为额外的元数据项添加到JSON中。

希望这能帮助你，或者至少能给你一些建议。

顺便说一句，通常不需要使用操纵DOM的代码(例如，构建HTML字符串或操纵标记(。这与DataTables的工作方式背道而驰。您应该尽可能使用DataTables对象本身

静态示例

增强JSON

带参数的POST

自动刷新

相关内容

最新更新

热门标签：