javascript Jquery 数据表在表单发布后填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15886197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Datatables populate after form post
提问by Danny Gloudemans
I'm trying to do a form submit (POST) with some parameters and based on the parameters I want to populate my datatable. But I'm not very good with Javascript (My language is Java), so I'm trying to do it with an Ajax call. But it won't work for me. Everything works for me, except doing a POST with parameters to the servlet. The datatable always populate automatically, but it should populate after the form submit.
我正在尝试使用一些参数并根据我想要填充数据表的参数进行表单提交（POST）。但是我不太擅长使用 Javascript（我的语言是 Java），所以我尝试通过 Ajax 调用来完成。但这对我不起作用。除了对 servlet 执行带有参数的 POST 之外，一切都对我有用。数据表总是自动填充，但它应该在表单提交后填充。
Does someone know an example of my case? I read a lot of form posts here and tutorials, but none of this case (?).
有人知道我的案例吗？我在这里阅读了很多表格帖子和教程，但没有一个案例（？）。
My code is now as follows, this works for me. Except I can't sort or search anymore in this table. What is missing?
我的代码现在如下，这对我有用。除了我不能在这个表中排序或搜索了。缺什么？
Thank you.
谢谢你。
<script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"></script>
<form name="myform" id="myform" action="" method="POST">
<label for="season">Season:</label>
<input type="text" name="season" id="season" value=""/> <br />
<label for="type">Type:</label>
<input type="text" name="type" id="type" value=""/> <br/>
<input type="button" id="btnSubmit" name="btnSubmit" value="Search">
</form>
<table class="display" id="example">
<thead>
<tr>
<th>Name</th>
<th>NationId</th>
<th>RegionId</th>
<th>Attendance</th>
</tr>
</thead>
<tbody>
<!-- data goes here -->
</tbody>
</table>
<script>
$("#btnSubmit").click( function() {
var formData = "season=" + $("input#season").val() + "&type=" + $("input#type").val();
$('#example').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"bDestroy": true,
"sAjaxSource": "/servlets/service/competitions/",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = ${esc.d}.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": formData,
"success": fnCallback
} );
}
} );
} );
</script>
回答by William Ballesteros
Ok, this is the full answer for you question
好的，这是您问题的完整答案
You need to make three events, the first load the database information in your datatable, the second event inserts the new information on the database, and the third refresh the datatable content.
你需要做三个事件，第一次加载你的数据表中的数据库信息，第二次事件插入数据库中的新信息，第三次刷新数据表内容。
<html>
<head>
<script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
//Global variables
var otable;
var dataTab;
$(document).ready(function () {
chargeData();
$('#btnSubmit').click(function () {
insertData();
});
});
// 1. charge all data
function chargeData() {
$.ajax({
type: "POST",
//create a method for search the data and show in datatable
url: "/servlets/service/competitions/",
contentType: "application/json; charset=utf-8",
data: '{ }',
dataType: "json",
success: AjaxGetFieldDataSucceeded,
error: AjaxGetFieldDataFailed
});
}
function AjaxGetFieldDataSucceeded(result) {
if (result != "[]") {
dataTab = $.parseJSON(result);
//instance of datatable
oTable = $('#example').dataTable({
"bProcessing": true,
"aaData": dataTab,
//important -- headers of the json
"aoColumns": [{ "mDataProp": "season" }, { "mDataProp": "type" }],
"sPaginationType": "full_numbers",
"aaSorting": [[0, "asc"]],
"bJQueryUI": true,
});
}
}
function AjaxGetFieldDataFailed(result) {
alert(result.status + ' ' + result.statusText);
}
// 2. this function only insert the data in your database
function insertData() {
var email = $("#season").val();
var evento = $("#type").val();
$.ajax({
type: "POST",
//in this method insert the data in your database
url: "/servlets/service/competitions/",
contentType: "application/json; charset=utf-8",
data: '{ season : "' + season + '", type : "' + type + '"}',
dataType: "json",
success: AjaxUpdateDataSucceeded,
error: AjaxUpdateDataFailed
});
}
function AjaxUpdateDataSucceeded(result) {
if (result != "[]") {
alert("update ok");
refreshDatatable();
}
}
function AjaxUpdateDataFailed(result) {
alert(result.status + ' ' + result.statusText);
}
// 3. This function refresh only the datatable not all page in varius events you can call like INSERT,UPDATE,DELETE ;D
function refreshDatatable() {
$.ajax({
type: "POST",
//same event used in chargeData function
url: "/servlets/service/competitions/",
contentType: "application/json; charset=utf-8",
data: '{ }',
dataType: "json",
success: AjaxRefreshDataSucceeded,
error: AjaxRefreshDataFailed
});
}
function AjaxRefreshDataSucceeded(result) {
if (result.d != "[]") {
var jposts = result;
dataTab = $.parseJSON(jposts);
//when the instance of datatable exists, only pass the data :D
oTable.fnClearTable();
oTable.fnAddData(dataTab);
}
}
function AjaxRefreshDataFailed(result) {
alert(result.status + ' ' + result.statusText);
}
<script>
</head>
<body>
<form name="myform" id="myform" action="">
<label for="season">Season:</label>
<input type="text" name="season" id="season" value=""/> <br />
<label for="type">Type:</label>
<input type="text" name="type" id="type" value=""/> <br/>
<input type="button" id="btnSubmit" name="btnSubmit" value="Search">
</form>
<table class="display" id="example">
<thead>
<tr>
<th>SEASON</th>
<th>TYPE</th>
</tr>
</thead>
<tbody>
<!-- data goes here -->
</tbody>
</table>
</body>
</html>
回答by Naren Sisodiya
Here the data is passed as string(formData) in ajax function and by default ajax expect the json object. Passing data in string can be done in two ways
这里数据在 ajax 函数中作为 string(formData) 传递，默认情况下 ajax 期望 json 对象。在字符串中传递数据可以通过两种方式完成
1) Append the generated query string to the url
1) 将生成的查询字符串附加到 url
oSettings.jqXHR = ${esc.d}.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource + "?" + formData, /* here url need be proper, as url can have some query string params in that case it shoukd be join with "&" not "?" */
/* "data": formData, no need to have data config then */
"success": fnCallback,
"processData": false
} );
2) when data is already serialized into string then set processData flag to false in ajax
2) 当数据已经序列化为字符串时，在ajax中将processData标志设置为false
oSettings.jqXHR = ${esc.d}.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": formData,
"success": fnCallback,
"processData": false
} );
回答by MaVRoSCy
I have the same functionality as you. The way I approach things though is a little bit different.
我有和你一样的功能。不过，我处理事情的方式有点不同。
What I do ...
我所做的 ...
<input type="text" id="searchCondition"/>
<div id="container">
<div id="ajaxDataTable"></div>
</div>
On document.ready I call the ajax function to get me the datatable passing the value of searchCondition to my servlet. The result (THIS IS JUST THE TABLE) is put in the ajaxDataTable div. On success of the ajax command, I do the normal initializations on the datatable.
在 document.ready 上，我调用 ajax 函数来获取将 searchCondition 的值传递给我的 servlet 的数据表。结果（这只是表）放在 ajaxDataTable div 中。ajax 命令成功后，我会在数据表上进行正常的初始化。
Now on any search, I call the same ajax command and pass again the search condition.
现在在任何搜索中，我调用相同的 ajax 命令并再次传递搜索条件。
Works fine for me!
对我来说很好用！
