Jump to content

Repeater pagination in backend


Matzn
 Share

Recommended Posts

I have a page with only one repeater field. But there are many rows(1000 or more). You already guessed it, this page loading very slow if i want editing.

Can i add pagination for repeater rows or you have some idea for this slow down issue? 

Screenshot 2020-10-01 195422.jpg

Link to comment
Share on other sites

Unfortunately, I do not believe the pagination has yet made it to repeater fields yet. There was a blog post made in 2016 regarding it, and I believe it is only possible with the Profields Table field atm (though the blog mentions the possibility of adding it in the future). I am sure other items were deemed more important, and pushed repeater pagination down the line. 

I have read that AJAX loading repeaters might help, though it is the default setting. 

  • Like 1
Link to comment
Share on other sites

Thanks for your replies.

14 hours ago, louisstephens said:

I have read that AJAX loading repeaters might help, though it is the default setting. 

Your are right for the closed field, but not for loading rows.

9 hours ago, Robin S said:

I'm not surprised that 1000 repeater items in a field is slow to load. My suggestion is to replace your repeater field with child pages.

That i have done. Look at the screenshot. Only title, product_id and the button to child page.

 

Maybe the solution would be to limit the the pages befor output. For example in ready.php like this:

$this->addHookAfter('Inputfield::render', function (HookEvent $event) {

    $Inputfield = $event->object;

    if ($Inputfield->name == 'products') {

        $limitedPages = $this->pages->find('limit=5,id=' . $Inputfield->hasPage->children);
        $pagination = $limitedPages->renderPager(['getVars' => array("id" => $this->input->get('id'))]);

        $event->return =  $Inputfield;
        $event->return .= $pagination;
    }
});

Pagination render and a get a limited page object, but the page object expect something that i don´t know. Some ideas?

Screenshot 2020-10-02 140510.jpg

Link to comment
Share on other sites

1 hour ago, Matzn said:

That i have done. Look at the screenshot. Only title, product_id and the button to child page.

But for that only, you have the Children tab by default in each page, it have pagination and ajax loading

  • Like 1
Link to comment
Share on other sites

8 hours ago, Matzn said:

That i have done. Look at the screenshot. Only title, product_id and the button to child page.

I don't understand what you're saying here or what screenshot you're referring to.

But my general point is that fields like Page Reference or Repeater are ultimately about storing a relationship between pages (Repeater items are pages). Rather than use a field to store the relationship, you can use the parent-child relationship. In PW, until pagination support is eventually rolled out to Page-type fields only the parent-child relationship can scale to thousands or millions of pages. But for your case this should be no big problem because the parent-child relationship can achieve what you are doing with the Repeater field. You get a nice sortable paginated list of child pages on the Children tab, and you can customise the page labels in a similar way to the Repeater item labels (see "List of fields to display in the admin Page List" in the Advanced tab of the child template).

I would just stick with the Children tab, but if you wanted try more things you could look at Batch Child Editor, or listing child pages using a runtime-only inputfield with modules like this or this, or making use of Lister / Lister Pro to view and filter the child pages.

  • Like 1
Link to comment
Share on other sites

Hi @Robin S , that was a misunderstanding. I understood i should put the data in a child's page, which i had already done and was shown in the first screenshot. But you mean the page lister for parent child relationship. Sorry for that.

Why i want to solve this with repeaters is because it offers a better overview and is easier to operate (project requirement). Parents' page is the brand (there are many) next child is the repeater and all last children are the product data. However, the product data must be edited manually (fill in 2 additional fields). Once the product has been processed, the repeater header is marked in color. That's my idea for the solution to this project.

Quote

I would just stick with the Children tab, but if you wanted try more things you could look at Batch Child Editor, or listing child pages using a runtime-only inputfield with modules like this or this, or making use of Lister / Lister Pro to view and filter the child pages.

I'll take a look at that.

 

Link to comment
Share on other sites

Ok, you are right @Robin S. I think, now i understand you. ?‍♂️ Your idea to use a field for the parent-child relationship works great:

I add a empty repeaterfield to template. In ready.php i add to a edit button (each children page) include pagination. It looks like it´s a repeater field items (old page situation). All happy.

$this->addHookAfter('Inputfield::render', function (HookEvent $event) {

    $field = $event->object;
    $form = wire('modules')->get("InputfieldForm");

    //get edit page
    $page_id = $this->input->get('id');
    $page = $this->pages->get($page_id);

    //add child pages to empty repeater - items not moveable, deletable or to clone
    if ($field->name ===  'products') {

        $childPages = $page->children('limit=15');
        $pagination = $childPages->renderPager(['getVars' => array("id" => $page_id)]);

        foreach ($childPages as $childPage) {
            //build the fake-repeater header
            $wrap = $this->wire('modules')->get('InputfieldFieldset');
            $wrap->addClass('InputfieldRepeaterItem  InputfieldStateCollapsed InputfieldRepeaterMinItem InputfieldNoFocus');
            $wrap->name = "repeater_item_{$childPage->id}";
            $wrap->label = $childPage->index + 1 . ': ' . $childPage->product_title . ' Art.: ' . $childPage->title;
            //if all fields are filled out mark the header
            $isFilledOut = ($childPage->product_keyword && $childPage->product_type);
            ($isFilledOut ? $wrap->addClass("text-black", "headerClass") : "");
            //add the edit button for the child page (class pw-modal for modal edit)
            $submit = wire('modules')->get("InputfieldButton");
            $submit->attr("value", "Produkt Details bearbeiten");
            $submit->attr('data-href', wire('config')->urls->admin . "page/edit/?id=" . $childPage->id);
            $submit->addClass('pw-modal uk-margin-bottom uk-margin-left');

            $wrap->add($submit);
            $form->add($wrap);
        }

        $field_style = '<style>.text-black{color:black !important;}.InputfieldRepeaterItemControls{display:none !important;}</style>';
        $event->return = $form->render();
        $event->return .= $field_style;
        $event->return .= $pagination;
    }
});

 

Screenshot 2020-10-06 164933.jpg

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...