Question

简介

我正在使用用户搜索捐赠组织名称的功能。

DataTable中的数据加载，启用了分页，并且对初始数据加载工作正常。（来自jquery的初始调用的数据加载大约是100条记录）

最近，我试图实现ajax方法，假设加载＆＃34;接下来的100条记录＆＃34;并附加到现有记录（现在记录达到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>

如果有人对此问题有所了解，请告诉我们，我们将不胜感激任何帮助或参考。

Answer 1

“我想我必须将它传递给datatable，是吗？”。是。正确的方法是通过API。如果不使用API，dataTables就无法知道您对基础<table>所做的任何更改，因此您最近的记录消失了：

var table; //outside your function scopes

searchDonors()中的

：

table = $('#demoApi').DataTable();

loadNext()中的

使用array_reverse而不是将标记注入<tbody>：

for (var i = 1; i < countsNew; i++) {
   table.row.add([oNameMore[i].innerHTML, oAddressMore[i].innerHTML]);
}
table.draw();

Answer 2

是的，修改DOM不需要数据表，你需要使用数据表function来访问数据，使用它：

初始化表格：

var myTable = $('#demoApi').DataTable();

然后

myTable.row.add( [oNameMore[i].innerHTML,oAddressMore[i].innerHTML] );

所有数据都存储在datables设置对象中，更新DOM不会更改当前表设置，因此您将这样做在任何表格重绘（搜索，更改页面，ecc ..）
之后输掉你

使用ajax

2 个答案: