Odoo 11 ::: Snippets Pagination

Odoo 11 Snippets Pagination

templates.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="assets_frontend" inherit_id="website.assets_frontend">
        <xpath expr="." position="inside">
            <link rel="stylesheet" href="/linkup_theme/static/src/less/board.less" />

            <script src="/linkup_theme/static/src/js/r3_snippets.js" type="text/javascript"/>
            <script src="/linkup_theme/static/src/js/jquery.twbsPagination.js" type="text/javascript"></script>
        </xpath>
    </template>
</odoo>

snippets.xml

<!--게시판 -->
<template id="r3_2" name="board table">
   <section class="section-md oe_snippet_body board_snippet">
       <section class="container">
        <h2>Board</h2>
       <table class="table" id="page-content">
         <tr>
           <th>Name</th>
           <th>Release date</th>
         </tr>
       </table>
         <nav aria-label="Page navigation example" style="text-align: center;">
                <ul class="pagination-sm" id="pagination"></ul>
              </nav>
     </section>

  </section>
</template>

r3_snippets.js

odoo.define('r3_snippets', function(require)
{
    "use strict";
    var rpc = require('web.rpc'), //< 함수를가져옴
        Animation = require('website.content.snippets.animation');


    Animation.registry.board_snippet = Animation.Class.extend({
        selector: '.board_snippet',
        start: function()
        {
            var self = this;
            _.each(this.$el.attr('class').split(/\s+/), function(cls)
            {
                if(cls.indexOf('board_snippet-show') == 0)
                {
                    var number = parseInt(cls.substring('board_snippet-show'.length));
                }
            });
            this.$el.find('td').parents('tr').remove();
            rpc.query({
                model: 'website.board',
                method: 'search_read',
                domain: [],
                fields: ['name', 'date_release'],
                sortBy: ['date_release desc'],
            })
            .then(function(data)
            {
                var totalCount = data.length; //db에 데이터 수
                var countList = 9; // 한 페이지에 출력될 게시물 수
                var totalPage = Math.floor(totalCount/countList); //전체 페이지 번호수
                var page = 1; //현재 페이지 번호
                var countPage = 5; //한 화면에 출력될 페이지 수
                var startPage = Math.floor((page - 1) / 10) * 10 + 1; //시작 페이지
                var endPage = startPage + countPage - 1; //마지막 페이지

                if (endPage > totalPage) { // 마지막페이지가 전체페이지보다 크면
                    endPage = totalPage; // 마지막페이지를 전체페이지로 바꾼다.
                }

                if (totalCount > countList * totalPage){ // db에 데이터수가 1페이지 게시물수 * 전체 페이지 수 보다 많으면
                    totalPage+=1; // 전체 페이지에 1을 더한다.
                }

                if (totalPage < page){ // 현재 페이지가 전체 페이지수보다 크면
                    page = totalPage; // 현재 페이지를 전체 페이지로 바꾼다.
                }

                var paging = function(page) {  //paging 함수를 정의한다.
                    $("table").empty();  // table태그 안에 내용을 비운다.
                    var $table = self.$el.find('table');  // $table변수에 table태그를 담는다.
                    var startRow = (page - 1) * countList; // 시작줄
                    var endRow = page * countList; // 마지막줄
                    if (endRow >= totalCount) // 마지막줄이 db 데이터 수 보다 많거나 같으면
                    {
                        endRow = totalCount; // 마지막줄을 db데이터수로 바꾼다.
                    }

                    for (var i = startRow; i < endRow; i++){ // 시작줄부터 마지막줄의 크기만큼 아래내용을 반복한다.
                        $table.append( // $table변수 뒤에 아래 태그를 추가한다.
                            jQuery('<tr />') // tr태그를 추가한다.
                            .append(
                                jQuery('<td />').text(data[i].name), // website.board[i].name을 추가한다.
                                jQuery('<td />').text(data[i].date_release) // website.board[i].date_release를 추가한다.
                            )
                        );
                    }
                }


                $('#pagination').twbsPagination({
                    startPage: startPage,  //시작 페이지
                    totalPages: totalPage, //총 페이지 갯수
                    visiblePages: countPage,   //보여줄 페이지
                    onPageClick: function (event, page) { // 클릭하면
                        $('#page-content').text('Page ' + page);
                        paging(page); // paging 함수가 실행된다.
                    }
                });
            });

        },
    });
});