javascript - 在 ajax json 中合并分页

Question

我有一个 ajax json 在 div 中检索所有查询结果。不过我不确定如何引入分页。

<script>
        $(document).ready(function () {
            var hdnIds = document.getElementById('<%= HiddenField1.ClientID %>').value;

            $.ajax({
                type: "POST",
                url: "WebService1.asmx/GetEmployees",
                data: "{userid: " + JSON.stringify(hdnIds) + " }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (list) {
                    $("#Something").append("<ul id='bullets' class='ul1'></ul>");
                    for (i = 0; i < list.d.length; i++) {
                        $("#bullets").append("<li class='li1'>"
                            + "<div style='float:left; width:20%'>"
                            + "<img  id='image' src='Handler3.ashx?id=" + list.d[i].id + "' />"
                            + "<p style='margin-left:2px; position:relative;color:DodgerBlue;font-size:small; font-style:bold'>" + list.d[i].UserName + "</p>"
                            + "<p style='margin-left:2px; position:relative;color:DodgerBlue;font-size:small'>" + list.d[i].Created_on + "</p>"
                            + "</div>"
                            + "<div style='float:left; width:80%'>"
                            + "<p class='p11'>" + list.d[i].Statusmes + "</p>"
                            + "</div>"                        
                            + "</li>");
                    } 
                },
                error: function (e) {
                    $("#Something").html("There was an error retrieving records");
                }
            });
        });
    </script>

和 html 一样

 <div id="Something"></div>

任何帮助将不胜感激!

Answer 1

首先，我会阅读 javascript 模板。有很多库可以让您从 JS 代码中删除臃肿的 html 代码，从而更易于管理。像这样:https://github.com/BorisMoore/jquery-tmpl .

之后，您应该将分页的责任放在服务器端，让 JS/Ajax 处理检索数据集的调用。例如:

//server side
var start = request.params.start //retrieve start index for data set
var limit = request.params.limit //retrieve max number of data set size

return db.Model.find({start: start, limit: limit, ...})


//client side JS/Ajax

//load first page 0-9
$.ajax({
  url: '/my/data/url',
  params: {
    start: 0, //start at first record in db
    limit: 10 //only return 10 results
  }
}).success(function(data) {
   //render data set using template
   $.template('#my-data-template', data).renderTo('#someDiv');
});

//load second page 10-19
$.ajax({
  url: '/my/data/url',
  params: {
    start: 10, //start at nth record in db
    limit: 10 //only return 10 results
  }
}).success(function(data) {
   //render data set using template
   $.template('#my-data-template', data).renderTo('#someDiv');
});