JQuery Datatable PageLength不工作

时间:2018-05-08 16:21:09

标签: jquery datatable

我有一个从REST API获取数据的函数,然后将结果添加到数据表中。问题是结果表在一个页面上显示所有结果,而不是将其分成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
        });
    }
});

在html页面上,我包括:

<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>

同样,问题是该表显示REST调用一页的所有结果,而不是将其分成50页。

有什么想法吗?

感谢。

1 个答案:

答案 0 :(得分:0)

解决这个问题的方法是将故事从头开始构建为数据表,而不是将其构建为html,然后将其转换为数据表。