将分页添加到Jquery表中

Question

我有一张桌子的代码

<table class="table table-hover">
                      <thead>
                      <tr>
                              <th>id</th>
                              <th>Name</th>
                              <th>No. Induk</th>
                              <th>NIDN</th>
                              <th>Status</th>
                          </tr>
                          </thead>
                          <tbody id="tabel_user">

                      </tbody>
                  </table>

和jQuery代码

  <script> function init() { for(x=1;x<=100;x++) { $.get("http://paramadina.net:18011/data/dosen", {id:x}, function(data) { console.log(data); var tr="<tr><td>" + data.id + "</td>"; tr += "<td>" + data.name + "</td>"; tr += "<td>" + data.no_induk+ "</td>"; tr += "<td>" + data.nidn + "</td>"; tr += "<td>" + data.status + "</td></tr>"; $("#tabel_user").append(tr); }); } } </script> 

它有大约100个数据，我想添加分页，所以它显示的数据仅显示10个数据，其余的进入下一页

谢谢

Answer 1

尝试使其适应您的代码。

$(function() {
    var limit    = $("#limit").val() ;
    paginationa(limit);
    $.post('dashboard/xhrGetListing', {'limit': limit }, function(o) {
        var kinds = ["Not Live","Wordpress","PrestaShop","Drupal","Magento","B2Evolution","OpenCart","Joomla","Inmotion Construct","Other"];
        var responsive = ["Not responsive","Responsive"];
        for (var i = 0; i < o.length; i++)
        {   
            $('#asdf').append('<tr class="odd gradeX"><td><input type="checkbox" class="checkboxes" value="'+o[i].id+'"/></td><td>'+o[i].name+' '+o[i].surname+'</td><td>'+o[i].email1+'</td><td>'+o[i].domain+'</td><td>'+o[i].phone1+'</td><td>'+kinds[o[i].kind]+'</td><td>'+responsive[o[i].resp]+'</td></tr>');
        }

    }, 'json');
    $("#limit").on('change', function(){
        paginate(0);
    });
});
function paginate(o){
    var pageStart = o;
    var limit    = $("#limit").val() ;
    $("#sample_1 tbody").empty();
    $.post('dashboard/xhrGetListing', {'limit': limit, 'pageStart': pageStart }, function(o) {
        var kinds = ["Not Live","Wordpress","PrestaShop","Drupal","Magento","B2Evolution","OpenCart","Joomla","Inmotion Construct","Other"];
        var responsive = ["Not responsive","Responsive"];
        for (var i = 0; i < o.length; i++)
        {   
            $('#asdf').append('<tr class="odd gradeX"><td><input type="checkbox" class="checkboxes" value="'+o[i].id+'"/></td><td>'+o[i].name+' '+o[i].surname+'</td><td>'+o[i].email1+'</td><td>'+o[i].domain+'</td><td>'+o[i].phone1+'</td><td>'+kinds[o[i].kind]+'</td><td>'+responsive[o[i].resp]+'</td></tr>');
        }

    }, 'json');
}
function paginationa(o){
    $("#sample_1_paginate").append('<ul class="pagination" style="visibility: visible;">\
                                            <li class="prev disabled">\
                                                <a href="#" title="First"><i class="fa fa-angle-double-left"></i></a>\
                                            </li>\
                                            <li class="prev disabled">\
                                                <a href="#" title="Prev"><i class="fa fa-angle-left"></i></a>\
                                            </li>\
                                            <li class="active">\
                                                <a href="#">1</a></li><li><a onclick="paginate('+((2*o)+1)+')">2</a></li>\
                                                <li>\
                                                    <a onclick="paginate('+3*o+')">3</a>\
                                                </li>\
                                                <li>\
                                                    <a onclick="paginate('+4*o+')">4</a>\
                                                </li>\
                                                <li><a onclick="paginate('+5*o+')">5</a>\
                                                </li>\
                                                <li class="next">\
                                                    <a onclick="paginate('+2*o+')" title="Next"><i class="fa fa-angle-right"></i></a>\
                                                </li>\
                                                <li class="next">\
                                                    <a href="#" title="Last"><i class="fa fa-angle-double-right"></i>\
                                                    </a>\
                                                </li>\
                                            </ul>');
}