从json加载的数据分页

Question

我们如何在这个从json加载数据的代码中添加分页。这里使用的是ul li table。请给出正确的方法来解决这个问题。 这是我的代码，如下所示，数据来自json。

    var data = { "list": [
        {
            "engine":"Gecko",
            "browser":"Firefox 1.0",
            "platform":"Win 98+ / OSX.2+",
            "version":"1.7",

        },
     {
            "engine":"Gecko",
            "browser":"Firefox 1.5",
            "platform":"Win 98+ / OSX.2+",
            "version":"1.8",

        },
     {
            "engine":"Gecko",
            "browser":"Firefox 2.0",
            "platform":"Win 98+ / OSX.2+",
            "version":"1.8",

        },
    {
            "engine":"Gecko",
            "browser":"Firefox 3.0",
            "platform":"Win 2k+ / OSX.3+",
            "version":"1.9",

        },
     {
            "engine":"Gecko",
            "browser":"Camino 1.0",
            "platform":"OSX.2+",
            "version":"1.8",

        },
     {
            "engine":"Gecko",
            "browser":"Camino 1.5",
            "platform":"OSX.3+",
            "version":"1.8",

        },
     {
            "engine":"Gecko",
            "browser":"Netscape 7.2",
            "platform":"Win 95+ / Mac OS 8.6-9.2",
            "version":"1.7",

        },
     {
            "engine":"Gecko",
            "browser":"Netscape Browser 8",
            "platform":"Win 98SE+",
            "version":"1.7",

        },
     {
            "engine":"Gecko",
            "browser":"Netscape Navigator 9",
            "platform":"EWin 98+ / OSX.2+",
            "version":"1.8",

        },
     {
            "engine":"Gecko",
            "browser":"Mozilla 1.0",
            "platform":"Win 95+ / OSX.1+",
            "version":"1",

        },
     {
            "engine":"Gecko",
            "browser":"Mozilla 1.1",
            "platform":"Win 95+ / OSX.1+",
            "version":"1.1",

        },
     {
            "engine":"Gecko",
            "browser":"Mozilla 1.2",
            "platform":"Win 95+ / OSX.1+",
            "version":"1.2",

        },

       {
            "engine":"Gecko",
            "browser":"Mozilla 1.3",
            "platform":"Win 95+ / OSX.1+",
            "version":"1.3",

        },
     {
            "engine":"Gecko",
            "browser":"Mozilla 1.4",
            "platform":"Win 95+ / OSX.1+",
            "version":"1.4",

        },
     {
            "engine":"Gecko",
            "browser":"Mozilla 1.5",
            "platform":"Win 95+ / OSX.1+",
            "version":"1.5",

        },
     {
            "engine":"Gecko",
            "browser":"Mozilla 1.6",
            "platform":"Win 95+ / OSX.1+",
            "version":"1.6",

        },

]}

var output="<ul>";
        for (var i in data.list) {
           output+="<ul>"+"<li id='first'>"+ data.list[i].engine + " " +"</li>"+"<li id='second'>"+ data.list[i].browser +" "+"</li>"+
        "<li id='third'>"+data.list[i].platform+" "+"</li>"+"<li id='fourth'>" + data.list[i].version + " " +"</li>"+"</ul>";

         output+="</ul>";

     document.getElementById("lidynamic").innerHTML=output;

     }