使用ajax将数据附加到现有数据表的正确方法
[英]Correct way to append data into existing data table using ajax
问题描述
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. 数据加载在DataTable中，启用了分页，并且可以正常处理初始数据。 (Data load with initial call from jquery is about 100 records) （来自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 aprox）。
Problem 问题
Record loading on ajax call is loaded into datatable but displays this recent record on current page(no paging applied on it). ajax调用上的记录加载被加载到datatable中，但在当前页面上显示此最近的记录（没有应用分页）。
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元素，我想我必须将它传递给datatable，是吗？
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. 如果有人对这个问题有所了解请告诉我，任何形式的帮助或参考将不胜感激。
2 个解决方案
解决方案1
9 已采纳 2015-11-04 11:08:29
" I think i have to pass it to datatable, yes? ". “ 我想我必须将它传递给datatable，是吗？ ” Yes. 是。 The correct way is to go through the API. 正确的方法是通过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，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();
解决方案2
5 2015-11-04 11:17:09
yes ofc modify DOM its not enought for datatables, you need to use datatables function to access data, use this: 是的ofc修改DOM不需要数据表，你需要使用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.. )
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.