Suh*_*wan 5 javascript ajax datatable jquery datatables
介绍
我正在使用用户搜索捐赠组织名称的功能.
数据加载在DataTable中,启用了分页,并且可以正常处理初始数据.(来自jquery的初始调用的数据加载大约是100条记录)
最近,我试图实现ajax方法,假设加载"接下来的100条记录"并附加到现有记录(现在记录达到200 aprox).
问题
ajax调用上的记录加载被加载到datatable中,但在当前页面上显示此最近的记录(不对其应用分页).
当用户更改页面以在记录之间进行导航时,此最近的记录将消失.
我只是操纵DOM元素,我想我必须将它传递给datatable,是吗？
完整代码(只需复制并粘贴整个代码进行测试,使用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>
如果有人对这个问题有所了解请告诉我,任何形式的帮助或参考将不胜感激.
" 我想我必须将它传递给datatable,是吗？ " 是.正确的方法是通过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();
是的，ofc修改了DOM，它不足以容纳数据表，您需要使用数据表功能来访问数据，请使用以下命令：
初始化表：
var myTable = $('#demoApi').DataTable();
然后
myTable.row.add( [oNameMore[i].innerHTML,oAddressMore[i].innerHTML] );
所有数据都存储在datables设置对象中，更新DOM不会更改当前表设置，因此在重绘任何表（搜索，更改页等）后，您将丢失所做的更改。
| 归档时间： |
|
| 查看次数： |
9639 次 |
| 最近记录： |