如何在数据表中使用Ajax返回的json数据并在每一行中都有一个表单 [英] How to consume ajax returned json data in DataTables and have a form in each row
问题描述
我想在我的 JQuery DataTables 中使用ajax返回的数据.我创建了循环来查看每一行，还需要为它们添加一个查看按钮.我将所有数据传递到 JQuery DataTables .我不知道该怎么做.
I want to consume ajax returned data in my JQuery DataTables. I have created loop to view every row and also need to add a view button for them. I pass all data to JQuery DataTables. I cannot understand how to do that.
这是我的ajax请求
<script>
$(document).ready(function () {
$("#searchArea").show();
var uID = $("#userName").val();
var tableProduct = $('#dataTbl').DataTable({
"bSort": false
, "oLanguage": {"sZeroRecords": "", "sEmptyTable": ""}
});
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath}/restservice/viewApplication/' + uID,
success: function (result) {
var jString = JSON.stringify(result);
var jdata = JSON.parse(jString);
for (var x = 0; x < jdata.length; x++) {
var td1 = jdata[x].snumber;
var td2 = jdata[x].date;
var td3 = jdata[x].slsNo + " in " + jdata[x].slsiUnit;
var td4 = jdata[x].productDesc;
var td5 = jdata[x].status;
var td6 = "view btn1";
var td7 = "view btn2";
var td8 = "view btn3";
tableProduct.row.add([td1, td2, td3, td4, td5, td6, td7, td8]).draw(true);
}
}
});
});
</script>
我想为每一行添加此代码.我该怎么办?
I want to add this code for every row. How can I do that ?
<form method="post" action="${pageContext.request.contextPath}/viewApplication" target="_blank">
<input type="hidden" name="snumber" value="jdata[x].snumber"/>
<input type="submit" class="btn btn-primary btn-block" value="View" />
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
推荐答案
在DataTables中使用Ajax数据
数据表中已经有一个方便的功能，可以从ajax提取数据并在配置表时使用它们.只需使用ajax选项，并告知您要使用的数据源
Consuming Ajax data in DataTables
There is already a handy feature in DataTables to fetch data from ajax and consume them as you configure your table. Just use the ajax option and tell about the data source you want to consume
$('#dataList').DataTable({
ajax: {
url: 'url',
type: 'GET',
dataSrc: ''
}
}
有关完整指南，请参见此文档.
See this documentation for complete guideline.
注意:在此处将dataSrc选项传递为 empty 告诉dataTable期望数组而不是来自ajax响应的对象
Note: here passing dataSrc option as empty tells dataTable to expect an array rather than objects from ajax response
以下是一个示例，该示例描述了将数据表配置为使用api响应的senario.出于演示目的，我使用了一个公共虚拟api服务，该服务返回了一个json数组.请参见此虚拟api响应.
Following is a example that depicts a senario where datatable is configured to consume a api response. For demonastration purpose I used a public dummy api service that returned an json array. See this dummy api response.
$(function() {
var columnArray = [{
title: "Photo ID",
data: "id",
targets: 0
},
{
title: "Photo Title",
data: "title",
targets: 1
}
];
$('#dataList').DataTable({
ajax: {
url: 'https://jsonplaceholder.typicode.com/photos',
type: 'GET',
dataSrc: ''
},
bBootstrapLayout: true,
columns: columnArray,
columnDefs: [{
render: function(data, type, row) {
return data + ' (' + row['albumId'] + ')';
},
targets: 0
}, {
render: function(data, type, row) {
var html = '<button>view</button>';
return html;
},
targets: 2
}]
});
});
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<head>
<body>
<br>
<br>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-6">
<div>
<table id="dataList" class="table" data-page-length="1" cellspacing="0" width="100%" />
</div>
</div>
</div>
</body>
在数据表中，您可以配置每个列呈现逻辑.像您要处理的情况一样，您希望按钮的单独列充当表单提交.
您应该在columnDefs选项中将此告知传递定义数组.
In your datatable you can configure each column rendering logic. Like the case you are dealing, you want separate columns of button behave as form submission.
You should tell this in columnDefs option as passing an array of definations.
在上面的代码片段中，我还展示了如何实现这一目标.在该示例中，我通过定义其渲染逻辑添加了第三列(target: 2).在render回调中，您可以返回应放置在该列中的html.我只添加了<button>view</button>，但是如您所见，您可以返回带有输入字段和按钮的任何类似html的表单，而没有什么. render选项采用data, type, row参数提供的功能.因此，您可以利用这些数据来呈现列html或任何逻辑.那就是很大的灵活性，不是吗?
In the code snippet above I also showed how you can achive that. In that example I added 3rd column (target: 2) by defining its rendering logic. In render callback you can return html that should be placed in that column. I only added <button>view</button> but as you see you can return any html like forms with input fields and buttons and whats not. render option takes a function that is provided with data, type, row parameters. Hence you can exploit these data for rendering your column html or any logic you what. Thats a lot of flexibility, isn't it ?
您可以从此 columnDefs 文档中找到补充指南.
You will find a complementary guildline from this columnDefs documentation.
这篇关于如何在数据表中使用Ajax返回的json数据并在每一行中都有一个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
