My plugin controller implements ListController.

Ajax list is nice, but is not easy to know which page is now.

I need a pagination with number buttons like bootstrap.

How can I overwrite the pagination of ListController without hacking October's source code?

====

Besides, how can I make ListController open record page in new tab? When I return to list form record page, it jumped to the first page

Last updated 9 years ago

Finally, my dirty solution is:

plugins/org/extension/controller/mycontroller/_list_toolbar.htm

<div data-control="toolbar">
  <div class="form-group span-left ">
    <select class="form-control custom-select pagination-select" style="width:200px">
        <option selected="selected" value="1">Page 1</option>
    </select>  
  </div>

</div>
<script>

  $(function(){
      var perPage , totalPage ;
      var total     = parseInt($('.page-iteration').text().match(/\d+\s*$/));
      var curPage   = (parseInt(($('.page-next').data('request-data')||"").toString().match(/\d+$/)) - 1) || (parseInt(($('.page-back').data('request-data')||"").toString().match(/\d+$/)) + 1) || 1;

      if(curPage == 1){
        verPage   = parseInt($('.page-iteration').text().match(/(\d+)\s+\d+\s*$/)) - parseInt($('.page-iteration').text().match(/(\d+)-\d+\s+\d+\s*$/)) + 1;
      }else{
        perPage   = (parseInt($('.page-iteration').text().match(/(\d+)-\d+\s+\d+\s*$/)) - 1) / (curPage-1);
      }

     totalPage = Math.ceil(total/perPage);

    $('select.pagination-select').empty();
    for(var i=1; i<= totalPage; i++){
      $('<option/>').text('Page ' + i ).val(i).appendTo('select.pagination-select').prop('selected', i == curPage);
    }
    $('select.pagination-select').change();

    $(document).on('change', 'select.pagination-select', function(){
      $.request('list::onPaginate', {
        data: {page: this.value},
      });
      history.pushState({}, document.title, location.href.toString().replace(/\?page=\d+/, '') + '?page=' + this.value)
    });

    $('tbody tr *').unbind()
    $('tbody tr').each(function(){
      var url = $(this).find('a').attr('href');
      $(this).find('td').on('click', function(){
        event.preventDefault();
        window.open(url, url);
        return false;
      });
    });
  });

</script>

any better idea?

Last updated 9 years ago