JQuery Datatable PageLength Not Working

Question

I have a function that gets data from a REST API and then adds the results to a datatable like so. The problem is that the resulting table shows all the results on one page instead of breaking it into pages of 50.

$('#SearchResults').remove(); //clear previous results

$.getJSON(link, null, function (data) {
    //alert(JSON.stringify(data));
    if (data.value.length === 0) {
        document.getElementById('notFound').innerHTML = "Search returned no results. Please check your selections and try again.";
    } else {
        var table = document.createElement('table');
        table.id = "SearchResults"
        $("#SearchResults").attr('data-page-length', 50);
        $("#SearchResults").attr('data-order', '[[ 1, "asc" ]]');

        var head = document.createElement('thead');

        $.each(data.value, function (i, value) {
            //alert(JSON.stringify(value));
            var tr = document.createElement('tr');

            var td1 = document.createElement('td');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');

            var link = "<a href=property.html?accountID=" + value.accountID + "/>";

            td1.innerHTML = link + value.accountID;
            td2.innerHTML = link + value.address;
            td3.innerHTML = link + value.fair_value;

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);

            //table.appendChild(tr);
            head.appendChild(tr);
        })
        table.appendChild(head);
        document.body.appendChild(table);
        $('#SearchResults').DataTable({
            "paging": true,
            "searching": false,
            "pageLength": 50
        });
    }
});

On the html page I am including:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

Again, the problem is that the table is displaying all the results from the REST call one page instead of breaking it into pages of 50.

Any ideas?

Thanks.

Answer 1

解决方案是从头开始将故事构建为数据表，而不是将其构建为html，然后将其转换为数据表。