Bootstrap-Table et le paging avec spring.

Nous allons voir comment mettre en place un bootstrap table avec le paging de spring data.
La pagination se fait du côté serveur

La première partie consiste à créer le tableau

  <table id="memberReportTableResult"
               style="min-height:100"
               data-search="true"
               data-classes="table table-no-bordered"
               data-height="600"
               data-pagination="true"
               data-side-pagination="server"
               data-sort-name="memberId"
               data-sort-order="desc">
        <thead>
            <tr>
                <th data-field="memberId" data-sortable="true">#</th>
                <th data-field="name" data-sortable="true">Nom</th>
                <th data-field="birthdate" data-formatter="localDateFormatter">Date de naissance</th>
                <th data-field="address" >Adresse</th>
                <th data-field="cityId" data-formatter="cityFormatter">Ville</th>
                <th data-field="postalCode" >Code postal</th>
                <th data-field="man" data-formatter="sexeFormatter" data-width="50px">Sexe</th>
                <th data-field="email">Courriel</th>
                <th data-field="phone1">Tél</th>
            </tr>
        </thead>
    </table>

Ensuite il faut effectuer l'initialisation en Javascript. C'est dans les fonctions de responseHandler et de queryParams qu'on lie les valeurs du composants table à ceux du paging.

$("#memberReportTableResult").bootstrapTable({
url: "http://localhost:8080/members",
queryParamsType: "",
ajaxOptions: {headers: {"Authorization": "Basic " + $.cookie('authorization')}},
responseHandler: function (res) {
return {
rows: res.content,
total: res.totalElements,
pageNumber: res.number,
pageSize: res.size
};
},
queryParams: function (params) {
return {
search: params.searchText,
page: params.pageNumber - 1,
size: params.pageSize,
sort: params.sortName + "," + params.sortOrder
};
}

});

Maintenant voyons la partie java

  @GetMapping(value = "/members")
    public Page<MemberDto> getPagingMembers(String search, Pageable pageRequest) {
        return memberService.getMembers(search, pageRequest);
    }

Nous avons pu voir rapidement comment faire le pont entre le paging de spring et le bootstrap table. Il suffit de relier les noms adéquats entre eux.