Usage of paginator in web content

Following is the code in  of structure template of liferay webcontent in liferay

Structure

<root available-locales="en_US" default-locale="en_US">

<dynamic-element dataType="string" indexType="keyword" localizable="true" name="Question" readOnly="false" repeatable="true" required="false" showLabel="true" type="text" width="small">

<dynamic-element dataType="html" fieldNamespace="ddm" indexType="keyword" localizable="true" name="Answer" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-text-html" width="small">

<meta-data locale="en_US">

<entry name="label">

<![CDATA[HTML]]>

</entry>

<entry name="predefinedValue">

<![CDATA[]]>

</entry>

<entry name="tip">

<![CDATA[]]>

</entry>

</meta-data>

</dynamic-element>

<dynamic-element dataType="string" indexType="keyword" localizable="true" name="Category" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">

<meta-data locale="en_US">

<entry name="label">

<![CDATA[Text]]>

</entry>

<entry name="predefinedValue">

<![CDATA[]]>

</entry>

<entry name="tip">

<![CDATA[]]>

</entry>

</meta-data>

</dynamic-element>

<meta-data locale="en_US">

<entry name="label">

<![CDATA[Text]]>

</entry>

<entry name="predefinedValue">

<![CDATA[]]>

</entry>

<entry name="tip">

<![CDATA[]]>

</entry>

</meta-data>

</dynamic-element>

</root>

Template

<script type="text/javascript">

    

    

   

YUI().use(

  'aui-pagination',

  function(Y) {

      

   showpage=function(pageno)

   {

   

   

      if(pageno=="1")

      {

        

       Y.one(".content1").hide();

       Y.one('.content2').hide();

       Y.one("#pagination1").hide();

       Y.one("#pagination2").hide();

        Y.one('.content').show();

         Y.one('#pagination').show();

      }

      if(pageno=="2")

      {

        

       Y.one(".content").hide();

       Y.one('.content2').hide();

       Y.one("#pagination").hide();

       Y.one("#pagination2").hide();

       Y.one('.content1').show();

         Y.one('#pagination1').show();

      }

      if(pageno=="3")

      {

       

      Y.one(".content1").hide();

       Y.one('.content').hide();

       Y.one("#pagination1").hide();

       Y.one("#pagination").hide();

       Y.one('.content2').show();

         Y.one('#pagination2').show();

      }

   };

    

    var pages = Y.all('.content div');

    var pages1 = Y.all('.content1 div');

    var pages2=Y.all('.content2 div');

   

    new Y.Pagination(

      {

        boundingBox: '#pagination',

        circular: false,

        contentBox: '#pagination .pagination-content',

         

        on: {

          changeRequest: function(event) {

          

         

            var instance = this,

                state = event.state,

                lastState = event.lastState;

              

            if (lastState) {

                pages.item(lastState.page - 1).setStyle('display', 'none');

            }

            pages.item(state.page - 1).setStyle('display', 'block');

          }

        },

        

        page: 1,

        total: 8

      }

    ).render();

    

    new Y.Pagination(

      {

        boundingBox: '#pagination1',

        circular: false,

        contentBox: '#pagination1 .pagination-content1',

        on: {

          changeRequest: function(event) {

          

         

            var instance = this,

                state = event.state,

                lastState = event.lastState;

              

            if (lastState) {

                pages1.item(lastState.page - 1).setStyle('display', 'none');

            }

            pages1.item(state.page - 1).setStyle('display', 'block');

          }

        },

        total: 16,

        page: 1

      }

    ).render();

    

    new Y.Pagination(

      {

        boundingBox: '#pagination2',

        circular: false,

        contentBox: '#pagination2 .pagination-content2',

        on: {

          changeRequest: function(event) {

          

         

            var instance = this,

                state = event.state,

                lastState = event.lastState;

              

            if (lastState) {

                pages2.item(lastState.page - 1).setStyle('display', 'none');

            }

            pages2.item(state.page - 1).setStyle('display', 'block');

          }

        },

        total: 6,

        page: 1

      }

    ).render();

    

    if(window.location.hash) {

      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character

      

      showpage(hash);

      // hash found

  } else {

     Y.all(".content1").hide();

       Y.all('.content2').hide();

       Y.all("#pagination1").hide();

       Y.all("#pagination2").hide();

  }

    

  }

);

</script>

#if (!$Question.getSiblings().isEmpty())

<div class="content">

#set ($counter = 0)

#foreach ($cur_Question in $Question.getSiblings())

#if( $cur_Question.Category.getData() == "first" )

 #set ($counter = $counter + 1)

 #if ( $couter != 1)

 <div style="display:none">

    <h3> $cur_Question.getData()</h3>

     $cur_Question.Answer.getData()

  </div>

  #else

   <div>

    <h3> $cur_Question.getData()</h3>

     $cur_Question.Answer.getData()

  </div>

#end

#end

      

#end

#end

 

  

</div>

<div id="pagination">

  <ul class="pagination pagination-content">

    <li><a href="#">Prev</a></li>

    <li><a href="#">First</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">Next</a></li>

  </ul>

</div>

#if (!$Question.getSiblings().isEmpty())

<div class="content1">

#set ($counter = 0)

#foreach ($cur_Question in $Question.getSiblings())

#if( $cur_Question.Category.getData() == "second" )

 #set ($counter = $counter + 1)

 #if ( $couter != 1)

 <div style="display:none">

    <h3> $cur_Question.getData()</h3>

     $cur_Question.Answer.getData()

  </div>

#else

<div>

    <h3> $cur_Question.getData()</h3>

     $cur_Question.Answer.getData()

  </div>

#end

#end

      

#end

#end

 

  

</div>

<div id="pagination1">

  <ul class="pagination1 pagination-content1">

    <li><a href="#">Prev</a></li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">Next</a></li>

  </ul>

</div>

#if (!$Question.getSiblings().isEmpty())

<div class="content2">

#set ($counter = 0)

#foreach ($cur_Question in $Question.getSiblings())

#if( $cur_Question.Category.getData() == "third" )

 #set ($counter = $counter + 1)

 #if ( $couter != 1)

 <div style="display:none">

    <h3> $cur_Question.getData()</h3>

     $cur_Question.Answer.getData()

  </div>

  #else

  

<div>

    <h3> $cur_Question.getData()</h3>

     $cur_Question.Answer.getData()

  </div>

  #end

#end

      

#end

#end

 

  

</div>

<div id="pagination2">

  <ul class="pagination2 pagination-content2">

    <li><a href="#">Prev</a></li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">Next</a></li>

  </ul>

</div>

<div id="chapters">

            <ul>

                

                    

                    

                        

                        

                            <li><a href="javascript:void(0)" onclick="showpage('1')";>1</a>

                            </li>

                        

                    

                

                    

                    

                        

                            <li class="active"><a href="javascript:void(0)" onclick="showpage('2')";>2</a>

                            </li>

                        

                        

                    

                

                    

                    

                        

                        

                            <li><a href="javascript:void(0)" onclick="showpage('3')";>3</a>

                            </li>

                        

                    

                

            </ul>

        </div>