使用jQuery分页xml结果的最佳方法是什么？

Question

我正在使用jQuery从MySQL数据库获取结果（如xml）。 分页结果的最佳方法是什么？

现在，我的脚本获取xml，并将每个结果作为<li>元素附加到<ul>元素。

我猜想这与创建一个全局变量有关，该变量将被运行脚本的下一个/上一个页面按钮更改，然后删除该脚本，然后重新添加正确的结果范围，但是我不确定。

Answer 1

您不应该使分页依赖于Javascript，而应在服务器端完成。 因此，例如，服务器可以返回“下一个”链接，该链接类似于<a href="results.php?entry=50">View next 50 results</a> 。 脚本将使用该变量50，然后返回50个下一个结果，然后将链接返回为results.php?entry=100 。 您可以将其与Ajax集成在一起，以便在不刷新页面的情况下返回结果，但是分页本身仍将在后端完成。

Answer 2

我会做这样的事情

var numRows = $table.find('tbody tr').length

var numPages = Math.ceil(numRows / numPerPage)

var $pager = $('</p><br>

<div class="pager"></div>

')

for (var page = 0 page < numPages page++) {

$('<span class="page-number">' + (page + 1) + '</span>')

.appendTo($pager).addClass('clickable')

}

$pager.insertBefore($table) 

Answer 3

有一些插件 ，但是您的方向正确。 当您执行删除/重新添加操作时，请执行$（'＃mydiv'）。load（'/ path / to / myfile.php'）。 将文件的起点和终点传递给您，这些起点和终点将作为数组中从中获取数据的点。

function paginate(start, limit) {
    // Maybe show a preloader?
    $('#loader').show();

    $("#mydiv").load("/path/to/myfile.php", {start: start, end: limit}, function(){
       // hide preloader or do other code here
        $('#loader').hide();
     });
}

Answer 4

您是一次性获得整个结果集（所有页面），还是一次获得一页？ 无论如何，您应该保留从服务器收到的数据的本地缓存，并在用户浏览页面时使用它。 例如，如果您一次检索一个页面，并且用户从页面1转到页面2，则您需要从服务器检索页面2。 但是，如果用户现在返回第1页，则应该从缓存中加载该页面。 如果用户转到第3页，则应从服务器获取该页面并将其添加到缓存中。

接下来，我将分离用于向用户显示单个页面并从服务器获取页面的逻辑。 当用户单击下一页按钮时，您应该向缓存对象询问下一页，但是不返回任何内容。 取而代之的是，缓存将在拥有数据后调用回调函数。 如果数据在高速缓存中，它将立即调用回调函数，并将结果作为参数传递。 然后，回调函数将更新呈现给用户的视图。 如果数据不在高速缓存中，则会向服务器发出针对该数据的ajax请求。 检索到数据后，将调用回调函数。

我通常反对将xml与ajax一起使用（我更喜欢ajaj；异步JavaScript和JSON。大声说出来也很有趣）。 JSON是更好的选择，因为在JavaScript中使用它要容易得多，并且在内存和传输期间占用的空间更少。 由于JSON对象是普通的JavaScript对象，因此将它们添加到本地缓存就像串联两个数组（您已经拥有的缓存和从服务器检索到的新元素）一样容易。