HTML客户端分页 - 无法获得动态添加的数据

Question

所以我正在使用javascript分页http://en.newinstance.it/2006/09/27/client-side-html-table-pagination-with-javascript/这很好..除了我尝试加载动态添加的数据（来自getJSON）。问题是它正在检查表但没有找到任何结果，因为它被注入到innerHTML中，而不是“硬编码”我认为。

这是javascript

script(type='text/javascript')    
    pager = new Pager('results', 3);
      pager.init();
      pager.showPageNav('pager', 'pageNavPosition');
      pager.showPage(1);   

有谁知道我能做些什么来解决这个问题？我尝试过使用一些正确的数据网格，但我无法让它们与我的应用程序一起使用。

$.getJSON( '/getlocations', function( data ) {
        userListData = data;

        // For each item in our JSON, add a table row and cells to the content string
        $.each(data, function(){
            tableContent += '<tr>';
            tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.name + '" title="Show Details">' + this.name + '</a></td>';
            tableContent += '<td>' + this.information + '</td>';
            tableContent += '<td>' + this.lat + '</td>';
            tableContent += '<td>' + this.lon + '</td>';
            tableContent += '<td><button onclick="viewLocationOnMap()">View on map</button></td>';
            tableContent += '<td>In Progress</button></td>';
            tableContent += '<td><a href="#" class="linkdeleteitem" rel="' + this._id + '">delete</a></td>';
            tableContent += '</tr>';
        });

        // Inject the whole content string into our existing HTML table
        $('#userList table tbody').html(tableContent);

由于

Answer 1

不完全确定你的<table> HTML是什么样的，我注意到如果我尝试使用空的HTML表格进行分页，即没有行，浏览器控制台将抛出错误：

Uncaught TypeError: Cannot set property 'className' of null

paging.js似乎依赖于<tr>行存在并使用某些CSS类进行样式化的事实，即定义了.pg-normal和.pg-selected。无论如何，我设法让你的代码通过：

1. 在 后附加<tr> HTML后，实例化
2. 将$('#userList table tbody').html(tableContent);替换为$('#result').append(tableContent);，因为result是初始化分页时使用的表格的ID。

看一下下面的堆栈代码或此jsfiddle：

/*** Javascript ***/
// For each item in our JSON, add a table row and cells to the content string
var data = [
    {id:1, name:'cell1', information:'First Row'},
    {id:2, name:'cell2', information:'Second Row'},
    {id:3, name:'cell3', information:'Third Row'},
    {id:4, name:'cell4', information:'Fourth Row'},
    {id:5, name:'cell5', information:'Fifth Row'},
    {id:6, name:'cell6', information:'Sixth Row'},
    {id:7, name:'cell7', information:'Seventh Row'},
    {id:8, name:'cell8', information:'Eighth Row'},
    {id:9, name:'cell9', information:'Nineth Row'},
];
var tableContent = "";
$.each(data, function(){
    tableContent += '<tr>';
    tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.name + '" title="Show Details">' + this.information + '</a></td>';
    tableContent += '<td><button onclick="viewLocationOnMap()">View on map</button></td>';
    tableContent += '<td>In Progress</button></td>';
    tableContent += '<td><a href="#" class="linkdeleteitem" rel="' + this._id + '">Delete</a></td>';
    tableContent += '</tr>';
});

// Inject the whole content string into our existing HTML table
$('#results').append(tableContent);

// Instantiate pagination after data is available    
pager = new Pager('results', 3);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
      
// pagination object codes.
function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;

    this.showRecords = function (from, to) {
        var rows = document.getElementById(tableName).rows;
        // i starts from 1 to skip table header row
        for (var i = 1; i < rows.length; i++) {
            if (i < from || i > to) rows[i].style.display = 'none';
            else rows[i].style.display = '';
        }
    }

    this.showPage = function (pageNumber) {
        if (!this.inited) {
            alert("not inited");
            return;
        }

        var oldPageAnchor = document.getElementById('pg' + this.currentPage);
        oldPageAnchor.className = 'pg-normal';

        this.currentPage = pageNumber;
        var newPageAnchor = document.getElementById('pg' + this.currentPage);
        newPageAnchor.className = 'pg-selected';

        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;
        this.showRecords(from, to);
    }

    this.prev = function () {
        if (this.currentPage > 1) this.showPage(this.currentPage - 1);
    }

    this.next = function () {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }

    this.init = function () {
        var rows = document.getElementById(tableName).rows;
        var records = (rows.length - 1);
        this.pages = Math.ceil(records / itemsPerPage);
        this.inited = true;
    }

    this.showPageNav = function (pagerName, positionId) {
        if (!this.inited) {
            alert("not inited");
            return;
        }
        var element = document.getElementById(positionId);
        var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | ';
        for (var page = 1; page <= this.pages; page++)
            pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
        pagerHtml += '<span onclick="' + pagerName + '.next();" class="pg-normal"> Next &#187;</span>';
        element.innerHTML = pagerHtml;
    }
}

/*** CSS ***/
table {
    border: 1px solid lightgray;    
}

th, td{
    border:1px solid lightgray;
    padding:5px;
}

.pg-normal {
    color: black;
    font-weight: normal;
    text-decoration: none;    
    cursor: pointer;    
}

.pg-selected {
    color: black;
    font-weight: bold;        
    text-decoration: underline;
    cursor: pointer;
}

<!--- HTML --->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="results">
    <tr>
        <th>ID</th>
        <th>Information</th>
        <th>Status</th>
        <th>Actions</th>
    </tr>     
</table>
<div id="pageNavPosition"></div>