Pagination Layout Option In Oracle JET

Hi Guys, In this post I'll share one of the experience related to Pagination Layout Option.
Sometimes we have requirement like we need to pagination as per selection.
in this post we can select various Paging Layout options via the check boxes to control what Paging controls are displayed.

To Implement the scenario create a JET Application using my previous post Pagination In Oracle JET
Now need to change small chunks of code.
Add one checkbox function inside the customers.js file-

function checkboxsetModel()
  {
    var self = this;
    self.pagingLayoutOption = ko.observableArray();
    self.valueChange = function(event)
    {
      var element = document.getElementById("paging");
      element.pageOptions = {'layout': event.detail.value, 'maxPageLinks': 6};
    };
  }

add a checkbox variable -

var cbm = new checkboxsetModel;

and apply the bindings-

ko.applyBindings(cbm, document.getElementById('checkboxSetId'));

add the checkbox code in customers.html file as well -

 <p>

        <div id="pagingLayoutOptionId"><b>Paging Layout Options</b></div>

        <br>

        <div id="pagingLayoutOptionId1">The checkboxes below control what values are set for the <i>layout</i> subproperty of the <i>pageOptions</i> property. Click on a checkbox to include it in the <i>layout</i> property array.</div>

        <br>

        <oj-checkboxset id="checkboxSetId" aria-labelledby="pagingLayoutOptionId"

                        value="{{pagingLayoutOption}}" on-value-changed="[[valueChange]]">

          <oj-option id="autoOptId" value="auto">auto - when auto set other values ignored</oj-option>

          <oj-option id="inputOptId" value="input">input</oj-option>

          <oj-option id="rangeTextOptId" value="rangeText">rangeText</oj-option>

          <oj-option id="pagesOptId" value="pages">pages</oj-option>

          <oj-option id="navOptId" value="nav">nav</oj-option>

        </oj-checkboxset>

Now run the page -

Now you can select the pagination layout and see the changes in pagination.

Cheers :)