# Datatable con paginacion

![](https://2578941663-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6ze2c8GK7mFBZX%2F-Lc1WjGeqF4Ig-44ZLgX%2F-Lc1X5qz2scocgoMKw_n%2F1a32efaa-b778-46b7-9547-dc2bd838f70a.png?generation=1554820674379099\&alt=media)

## Pasos:

* **Definir el Interfaces**

```java
public interface IController <T> {

    public String open();
    public String prepareNew();
    public String verifyNew();
    public void reset();
    public String showAll();
    public String save();
    public String query();
    public String edit();
    public String remove();
    public String remove(Object item);
    public String delete();
    public String deleteAll();
    public String print();
    public String printAll();
    public String prepareEdit();
    public void handleSelect(SelectEvent event);
    public String last();
    public String first();
    public String next();
    public String back();
    public String skip(Integer page);
    public void move();



}
```

* **Definir atributos en el controller**

```java
    Integer page = 1;
    Integer rowPage = 2;
    List<Integer> pages = new ArrayList<>();
      //DataModel
    private BodegaDataModel bodegaDataModel;

     //List
    List<Bodega> bodegaList = new ArrayList<>();
    List<Bodega> bodegaFiltered = new ArrayList<>();
```

* **Generar set/get**
* **El método getPages()  cargar una lista de las paginas**

```java
 public List<Integer> getPages() {
        pages = new ArrayList<>();
        Integer size = bodegaFacade.sizeOfPage(rowPage);
        for (int i = 1; i <= size; i++) {
            pages.add(new Integer(i));

        }
        return pages;
    }

    public void setPages(List<Integer> pages) {
        this.pages = pages;
    }

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getRowPage() {
        return rowPage;
    }

    public void setRowPage(Integer rowPage) {
        this.rowPage = rowPage;
    }
```

*   **Metodo init() ,  invocar bodegaList = bodegaFacade.findPagination(page, rowPage);**

    ```
    ```

```java
 @PostConstruct
    public void init() {
        try {


            found = false;
            forsearch = false;
            bodegaList = new ArrayList<>();
            bodegaFiltered = new ArrayList<>();
            bodega = new Bodega();
            String idbodega = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("idbodega");
            if (idbodega != null) {
                Optional<Bodega> optional = bodegaFacade.find("idbodega", idbodega);
                if (optional.isPresent()) {
                    bodega = optional.get();
                    bodegaSelected = bodega;
                    found = true;
                    forsearch = true;
                    writable = true;
                    RequestContext.getCurrentInstance().update(":form:content");
                }
            } else {
                bodegaList = bodegaFacade.findPagination(page, rowPage);

                bodegaFiltered = bodegaList;
            }
            bodegaDataModel = new BodegaDataModel(bodegaList);

        } catch (Exception e) {
            JsfUtil.errorMessage("init() " + e.getLocalizedMessage());
        }
    }// </editor-fold>
```

* **Crear métodos**

```java
 @Override
    public String last() {
        try {
            page = bodegaFacade.sizeOfPage(rowPage);
            move();
        } catch (Exception e) {
            JsfUtil.errorMessage("last() " + e.getLocalizedMessage());
        }
        return "";
    }

    @Override
    public String first() {
        try{
        page = 1;
        move();
 } catch (Exception e) {
            JsfUtil.errorMessage("first() " + e.getLocalizedMessage());
        }
        return "";
    }

    @Override
    public String next() {
        try {
            if (page < (bodegaFacade.sizeOfPage(rowPage))) {
                page++;
            }
            move();
        } catch (Exception e) {
            JsfUtil.errorMessage("next() " + e.getLocalizedMessage());
        }
        return "";
    }

    @Override
    public String back() {
        try {
            if (page > 1) {
                page--;
            }
            move();
        } catch (Exception e) {
            JsfUtil.errorMessage("back() " + e.getLocalizedMessage());
        }
        return "";
    }

    @Override
    public String skip(Integer page) {
        try {
            this.page = page;
            move();
        } catch (Exception e) {
            JsfUtil.errorMessage("skip() " + e.getLocalizedMessage());
        }
        return "";
    }

    @Override
    public void move() {
        try {

            bodegaList = bodegaFacade.findPagination(page, rowPage);

            bodegaFiltered = bodegaList;

            bodegaDataModel = new BodegaDataModel(bodegaList);

        } catch (Exception e) {
            JsfUtil.errorMessage("move() " + e.getLocalizedMessage());
        }
    }
```

* **Pagina, crear los botones, datatable y el selectOneMenu**

```java
 <p:dataTable id="dataTable" var="item" 
                                         value="#{bodegaController.bodegaDataModel}"
                                         selectionMode="single" 
                                         widgetVar="widgetDataTable"
                                         selection="#{bodegaController.bodegaSelected}"
                                         filteredValue="#{bodegaController.bodegaFiltered}"
                                         rowKey="#{item.idbodega}"
                                         rows="15" 
                                         paginator="true" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                         rowsPerPageTemplate="5,10,15" emptyMessage="#{app['info.datatableempty']}" reflow="true">
                                <f:facet name="header">
                                    <!--<p:panelGrid columns="4">-->
                                    <p:outputPanel>
                                        <p:commandButton class="btnn btnn-primary"  icon="fa fa-step-backward"  title="Inicio" 
                                                         oncomplete="remoteshowall();"
                                                         action="#{bodegaController.first()}"  update=":form:dataTable " />
                                        <p:commandButton class="btnn btnn-primary"  icon="fa fa-caret-left"  title="Anterior" 
                                                         oncomplete="remoteshowall();"
                                                         action="#{bodegaController.back()}"  update=":form:dataTable " /> 



                                        <p:commandButton class="btnn btnn-primary"  icon="fa fa-play"  title="Siguiente" 
                                                         oncomplete="remoteshowall();"
                                                         action="#{bodegaController.next()}"  update=":form:dataTable " /> 
                                        <p:commandButton class="btnn btnn-primary"  icon="fa fa-step-forward"  title="Fin" 
                                                         oncomplete="remoteshowall();"
                                                         action="#{bodegaController.last()}"  update=":form:dataTable " /> 

                                        <p:selectOneMenu id="pages" value="#{bodegaController.page}" effect="fold" editable="false">

                                            <f:selectItems value="#{bodegaController.pages}" />
                                             <p:ajax  process="pages"  event="change"
                                                      oncomplete="remoteshowall();"
                                                 update=":form:dataTable" 
                                                 listener="#{bodegaController.skip(bodegaController.page)}"/> 
                                        </p:selectOneMenu> 
                                        <p:link  class="fa fa-file-text-o btnn btnn-primary" title="#{app['button.records']}"  outcome="/pages/bodega/view" />
                                <p:commandButton icon="fa fa-print" style="max-width:160px;" class="btnn btnn-primary" title="#{app['button.print']}" 
                                                 process=":form:content"
                                                 action="#{bodegaController.printAll()}" 
                                                 ajax="false"
                                                 update=":form:content" /> 
                                <p:remoteCommand  update=":form:content :form:content"
                                                  name="remoteshowall" />

                                        <!--</p:panelGrid>-->

                                        <div class="searchLoader">
                                            <p:graphicImage  name="/img/search-loader.gif"/>
                                        </div>
                                        <input type="text" jsf:id="globalFilter" jsf:onkeyup="PF('widgetDataTable').filter()" class="search" placeholder="#{app['button.search']}"/>
                                    </p:outputPanel>
                                </f:facet>
                                <p:ajax event="rowSelect" update=":form:bodegaDetaill" oncomplete="PF('bodegaDialog').show()" />

                                <p:column headerText="#{msg['field.idbodega']}" filterBy="#{item.idbodega}"
                                          sortBy="#{item.idbodega}"  filterMatchMode="contains" >
                                    <h:outputText value="#{item.idbodega}" />
                                </p:column>
                                <p:column headerText="#{msg['field.direccion']}" filterBy="#{item.direccion}"
                                          sortBy="#{item.direccion}"  filterMatchMode="contains" >
                                    <h:outputText value="#{item.direccion}" />
                                </p:column>
                                <p:column headerText="#{msg['field.telefono']}" filterBy="#{item.telefono}"
                                          sortBy="#{item.telefono}"  filterMatchMode="contains" >
                                    <h:outputText value="#{item.telefono}" />
                                </p:column>
                          <p:column style="width:32px;text-align: center">

                                    <p:commandButton update=":form:bodegaDetaill" 
                                                     class="btnn btnn-primary"
                                                     icon="fa fa-server" 
                                                     title="#{msg['button.etiqueta']}"
                                                     action="#{bodegaController.prepareEdit()}"
                                                     oncomplete="PF('bodegaDialog').show()"  >

                                        <f:param name="idbodega" value="#{item.idbodega}"/>
                                    </p:commandButton>


                                </p:column>
                                <p:column style="width:32px;text-align: center">


                                    <p:commandButton class="btnn btnn-danger"  
                                                     rendered="#{applicationMenu.bodega.delete}"
                                                     icon="fa fa-trash-o"
                                                     title="#{app['button.delete']}"
                                                     process=":form:content :form:dataTable" 
                                                     action="#{bodegaController.remove(item)}"
                                                     update=":form:content" > 
                                        <p:confirm header="#{app['dialog.delete']}" message="#{app['info.doyouwantdelete']}" icon="ui-icon-alert" />
                                    </p:commandButton>  


                                </p:column>


                            </p:dataTable>
```
