javascript 使用ajax将数据附加到现有数据表的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33520091/
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
Correct way to append data into existing data table using ajax
提问by Suhail Mumtaz Awan
Introduction
介绍
I am working with the functions where user search donor organizations by name.
我正在使用用户按名称搜索捐助组织的功能。
Data loads in DataTable, paging enabled and works fine for the initial data load. (Data load with initial call from jquery is about 100 records)
数据加载到 DataTable 中，启用分页并且对于初始数据加载工作正常。（来自 jquery 的初始调用的数据加载大约为 100 条记录）
Lately, i have tried to implement the ajax method, which is suppose to load "next 100 records" and append to the existing records(now record reaches at 200 aprox).
最近，我尝试实现 ajax 方法，该方法假设加载“接下来的 100 条记录”并附加到现有记录（现在记录达到 200 条左右）。
Problem
问题
Record loading on ajax call is loaded into datatable but displays this recent record on current page(no paging applied on it).
ajax 调用的记录加载被加载到数据表中，但在当前页面上显示这个最近的记录（没有应用分页）。
When user change the page to navugate between records, this recent record disappear.
当用户更改页面以在记录之间导航时，最近的记录消失。
I am just manipulating DOM elements, i think i have to pass it to datatable, yes?
我只是在操作 DOM 元素，我想我必须将它传递给数据表，是吗？
Complete Code(just copy and paste whole code to test,cdn libs used)
完整代码（只需复制并粘贴整个代码即可测试，使用的 cdn 库）
<head>
<title>Demo : Test</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<form>
<input type="text" id="searchParam" name="searchParm" placeholder="enter search param">
<br>
<input type="submit" value="Submit" onclick="searchDonors(document.getElementById('searchParam').value); return false;">
</form>
<br />
</div>
<div class="col-md-9">
<div id="demoApim"><table id="demoApi"><thead><tr><td>Organization Name</td><td>Address</td></tr></thead><tbody id="tBody"></tbody></table></div>
</div>
<div class="col-md-3" id="searchBtn"><input type="submit" value="Load Next 100 Records" onclick="loadNext(); return false;"></div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var count;
$('#searchBtn').hide();
$(document).ready(function () { $('table').hide();});
function searchDonors(searchParam) {
window.searchDonorsParam = searchParam;
count = 100;
var request = new XMLHttpRequest();
request.open("GET", "http://graphapi.firstgiving.com/v1/list/organization?q=organization_name:" + searchParam + "*%20AND%20country:US&&page_size=100&page=1", false);
request.send();
var xml = request.responseXML;
//$.each(xml, function (key, val) {
var oName = xml.getElementsByTagName("organization_name");
//console.log(oName);
var oAddress = xml.getElementsByTagName("address_line_1");
var counts = xml.getElementsByTagName("organization_name").length;
for (var i = 1; i < counts; i++) {
var html = [];
html.push('<tr><td>', oName[i].innerHTML)
html.push('</td><td>', oAddress[i].innerHTML)
html.push('</td></tr>')
$("#tBody").append(html.join(''));
}
$('#demoApi').DataTable();
$('table').show();
$('#searchBtn').show();
//});
//console.log(oName);
//console.log(oAddress);
}
function loadNext()
{
if (count = 100)
{
$.ajax({
url: "http://graphapi.firstgiving.com/v1/list/organization?q=organization_name:" + searchDonorsParam + "*%20AND%20country:US&&page_size=100&page=2",
method: "GET",
dataType: "xml",
success: function (xml) {
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc);
console.log(xml.getElementsByTagName("organization_name"));
var oNameMore = xml.getElementsByTagName("organization_name");
var oAddressMore = xml.getElementsByTagName("address_line_1");
var countsNew = xml.getElementsByTagName("organization_name").length;
var html;
for (var i = 1; i < countsNew; i++) {
html = [];
html.push('<tr><td>', oNameMore[i].innerHTML)
html.push('</td><td>', oAddressMore[i].innerHTML)
html.push('</td></tr>')
$("#tBody").append(html.join(''));
}
},
error: function () {
console.log("call failled");
}
});
}
}
</script>
</body>
</html>
If someone have idea about that problem please let me know, any kind of help or reference will be appreciated.
如果有人对这个问题有想法，请告诉我，任何形式的帮助或参考将不胜感激。
回答by davidkonrad
"I think i have to pass it to datatable, yes?". Yes. The correct way is to go through the API. Without using the API, dataTables cannot be aware of whatever changes you have made to the underlying <table>and therefore your recent records disappear :
“我想我必须将它传递给数据表，是吗？”。是的。正确的方法是通过API。如果不使用 API，dataTables 无法知道您对底层所做的任何更改<table>，因此您最近的记录会消失：
var table; //outside your function scopes
in searchDonors():
在searchDonors()：
table = $('#demoApi').DataTable();
in loadNext()use row.add()instead of injecting markup to <tbody>:
在loadNext()使用中row.add()而不是将标记注入到<tbody>：
for (var i = 1; i < countsNew; i++) {
table.row.add([oNameMore[i].innerHTML, oAddressMore[i].innerHTML]);
}
table.draw();
回答by Vanojx1
yes ofc modify DOM its not enought for datatables, you need to use datatables functionto access data, use this:
是的ofc修改DOM对于datatables来说还不够，你需要使用datatables函数来访问数据，使用这个：
initialize the table:
初始化表：
var myTable = $('#demoApi').DataTable();
then
然后
myTable.row.add( [oNameMore[i].innerHTML,oAddressMore[i].innerHTML] );
all the data are stored inside datables settings object, updating the DOM don't change the current table settings so you will lose you change after any table redraw ( search, change page, ecc.. )
所有数据都存储在 datables 设置对象中，更新 DOM 不会更改当前表设置，因此在任何表重绘（搜索、更改页面、ecc ..）后您将丢失更改
