用JS分页如何实现

时间:2017-12-05 18:30:48

标签: javascript jquery angularjs pagination

我想在我的应用程序中使用Jquery或angular来实现分页,但我不确定如何...我得到它的后端..

enter image description here

enter image description here

我的信息是API i使用此方法进行的alredy过滤

@RequestMapping( value = "/distritosPaginacao",  params = { "page", "size" },  method = RequestMethod.GET)
     public Page<Distritos> findPaginated( @RequestParam("page") int page, @RequestParam("size") int size) {             
    Page<Distritos> resultPage = distritosService.paginacao(page, size);

                return resultPage;
            }

在我的js中我有这个...

app.controller("buscaDistritoController", function($scope,  $http, $location) {



    $scope.distritos = [];
    $scope.distrito = {}; // binding com o form


    carregarDistritos = function() {

        token = localStorage.getItem("userToken");

        var search = $location.search();
        var page = search.page||0;
        var size = search.size||15;
        var sort = search.sort||'type,desc';


        $http({
             method: 'GET',
             url: '/user/distritosPaginacao?page=' + page + '&size=' + size + '&sort=' + sort
        }).then(function(response) {
            $scope.distritos = response.data.content;
            $scope.page = response.data.totalPages;
            $scope.sort = sort;

        }, function(response) {
            console.log(response.data);
            console.log(response.status);
        });


    };
    });

我的HTML

<div ng-controller="buscaDistritoController">
    <div class="container">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3>Distritos</h3>
                    <br></br>
                    <button id="btnSalvar" type="button" data-toggle="modal" data-target="#modalAdicionarDistrito" class="btn btn-default ">Adicionar novo distrito</button>
                    <button id="btnImprimir" type="button"  class="btn btn-default pull-right ">Imprimir</button>

                    <div >

                            <div class=" jPager"> 

                                        <div class="input-group  col-lg-3  col-md-3  col-sm-3 col-xs-12 pull-left">
                                                    <select class="form-control" data-pager-action='pagesize'>
                                                    <option value="5">Ver 5</option>
                                                            <option value="15">Ver 15</option>
                                                            <option value="20">Ver 20</option>
                                                            <option value="25">Ver 25</option>
                                                            <option value="50">Ver 50</option>
                                                            <option value="100">Ver 100</option>
                                                </select>
                                        </div>

                                        <div class="input-group   col-lg-6  col-md-6  col-sm-6 col-xs-12"> 
                                             <span class="input-group-addon btn btn-primary" data-pager-action='first'><i class="fa fa-angle-left"></i> Primeira</span>
                                             <span class="input-group-addon btn btn-primary" data-pager-action='previous'><i class="fa fa-angle-double-left"></i> Anterior</span>
                                            <input type="text" class="form-control" data-pager-action='pagenum'>
                                            <span class="input-group-addon btn btn-primary" data-pager-action='next'><i class="fa  fa-angle-double-right"></i> Próxima</span>
                                            <span class="input-group-addon btn btn-primary" data-pager-action='last'><i class="fa  fa-angle-right"></i> Última</span>
                                        </div>

                        </div>                                                              
                </div>

                <div>
                    <div class="panel-body">
                        <table id="idTabela" class="table">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Nome</th>
                                    <th>Código DNE</th>
                                    <th>Opções</th>
                                </tr>
                            </thead>
                            <tbody ng-repeat="dis in distritos ">
                                <tr>                            
                                    <td>{{dis.idDistrito}}</td>
                                    <td>{{dis.nome}}</td>
                                    <td>{{dis.codigoDne}}</td>

                                    <td>                                
                                         <div  class="btn-group">
                                            <button id="opcoes" type="button" class="btn btn-danger vermDigifred btn-xs dropdown-toggle glyphicon glyphicon-pencil" data-toggle="dropdown"> </button>                                                                                   
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a  id="btnExcluirRegistro" ng-click="excluirDistritos(dis)"><span class="glyphicon glyphicon-trash"></span> Excluir registro</a></li>
                                                <li> <a id="btnAlterarRegistro" data-toggle="modal" data-target="#modalAlterarDistrito" ng-click="alterarDistritos(dis)" ><span class="glyphicon glyphicon-edit"></span> Alterar registro</a></li>
                                            </ul>
                                        </div> 

                                    </td>
                                </tr>
                                <tr>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

我不知道如何实现next和return按钮以及按钮按页面查看结果。

任何人都可以帮助我吗?我不是很有经验。

0 个答案:

没有答案