使用 ajax 将数据附加到现有数据表中的正确方法
Posted
技术标签:
【中文标题】使用 ajax 将数据附加到现有数据表中的正确方法【英文标题】：Correct way to append data into existing data table using ajax 【发布时间】：2016-02-04 20:14:32 【问题描述】：简介
我正在使用用户按名称搜索捐助者组织的功能。
在 DataTable 中加载数据，启用分页并在初始数据加载时正常工作。 （从 jquery 初始调用的数据加载大约是 100 条记录）
最近，我尝试实现 ajax 方法，假设加载“下 100 条记录”并附加到现有记录（现在记录达到 200 条）。
问题
ajax 调用上的记录加载被加载到数据表中，但在当前页面上显示这条最近的记录（没有应用分页）。
当用户更改页面以在记录之间导航时，这条最近的记录会消失。
我只是在操作 DOM 元素，我想我必须将它传递给数据表，是吗？
完整代码（只需复制粘贴整个代码进行测试，使用的cdn库）
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<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>
如果有人知道这个问题，请告诉我，任何形式的帮助或参考将不胜感激。
【问题讨论】：
如果合并正确，DataTables 将加载前 100 条记录，然后自动分页。如果设置正确，您可以将搜索框、标题等作为配置添加到 DataTables。阅读 DataTables Ali 参考资料。 @Alex 感谢您的宝贵意见，我会调查它.... 【参考方案1】：“我想我必须将它传递给数据表，是吗？”。是的。正确的方法是通过API。如果不使用 API，dataTables 无法知道您对底层 <table> 所做的任何更改，因此您最近的记录会消失：
var table; //outside your function scopes
在searchDonors()：
table = $('#demoApi').DataTable();
在loadNext() 中使用row.add() 而不是向<tbody> 注入标记：
for (var i = 1; i < countsNew; i++)
table.row.add([oNameMore[i].innerHTML, oAddressMore[i].innerHTML]);
table.draw();
【讨论】：
@Gyrocode.com，是的 - 你可以为此争论，至少如果你处理十几行 - 我更新了答案。【参考方案2】：yes ofc 修改 DOM 对数据表来说不够用，你需要使用数据表function 来访问数据，使用这个：
初始化表：
var myTable = $('#demoApi').DataTable();
然后
myTable.row.add( [oNameMore[i].innerHTML,oAddressMore[i].innerHTML] );
所有数据都存储在 datables 设置对象中， 更新 DOM 不会更改当前表设置，因此您将 在任何表格重绘（搜索，更改页面，ecc ..）后失去你的改变
【讨论】：
感谢您的回答，+1 的帮助和正确的解决方案也以上是关于使用 ajax 将数据附加到现有数据表中的正确方法的主要内容，如果未能解决你的问题，请参考以下文章
使用 jquery 将（键值）数据附加到本地存储中的现有数据
如何通过 python 将 JSON 数据附加到存储在 Azure blob 存储中的现有 JSON 文件？
我可以使用浏览器工具将数据附加到 Google Big 查询中的现有表吗？