This is what I get when using the fluid pagination widget.
it try to jump to the 2nd page but without any success
it generates this URL which look like this
http://example.com/news-stories/essen/?tx__%5B%40widget_0%5D%5BcurrentPage%5D=2
This URL above won't work. It is generated by the Tag
I am using the Menu Type "Thumbnail" of Bootstrap Package. And this is the fluid tag which i use to generate it:
<f:widget.paginate objects="{menu}" as="paginatedItems" configuration="{itemsPerPage: 6, insertAbove: 1, insertBelow: 1}">
<f:for each="{paginatedItems}" as="page">
<div class="col-xs-6 col-sm-6">
<f:link.page pageUid="{page.data.uid}" title="{page.data.title}" class="thumbnail" data="{equalheight: 'item', toggle: 'tooltip'}">
<div class="thumbnail-image">
<f:if condition="{page.files.0}">
<f:if condition="{page.files.0.type} == 2">
<f:media file="{page.files.0}" width="{settings.media.width}" height="{settings.media.height}" />
</f:if>
</f:if>
</div>
<div class="thumbnail-caption">
<f:if condition="{page.data.title}">
<h3><f:format.crop maxCharacters="{settings.title.crop}">{page.data.title}</f:format.crop></h3>
</f:if>
<f:if condition="{page.data.abstract}">
<p><f:format.crop maxCharacters="{settings.abstract.crop}">{page.data.abstract}</f:format.crop></p>
</f:if>
</div>
</f:link.page>
</div>
</f:for>
</f:widget.paginate>
Can anybody help to make the pagination work, should I configure something?
The paginate widget needs a plugin context to work. Even the backend paginate widget needs a controller to function. It would be a nice feature to have paginate widget work with menus and other arrays.
Related
There is a search input box to take a string in the frontend. Also there is SQL in the controller to fetch the result based on the search text. I get the expected result from the query.
I want to show those result in the frontend with pagination. In this case i have used following code
<f:widget.paginate objects="{isin}" as="paginatedIsinDocuments" configuration="{itemsPerPage: 5, insertAbove: 0, insertBelow: 1, maximumNumberOfLinks: 100, addQueryStringMethod: 'GET,POST'}">
<div class="row mb-4">
<f:for each="{paginatedIsinDocuments}" as="document">
<div class="col-12 fs-highlighted">
<a class="px-3 px-md-5 py-2" href="{document.file.originalResource.publicUrl}" target="_blank">
{document.file.originalResource.originalFile.name}
<i class="icon-download"></i>
</a>
</div>
</f:for>
</div>
</f:widget.paginate>
Unfortunately its not working. It shows all the rows in the page 1.
Well in general you should migrate that to the Pagination-API.
The Fluid pagination widget is deprecated and removed in V11 anyway.
Here is a nice article how to migrate.
Im using NodeJS with React and I have a problem. I didnt find a npm module or a code that allowed me to create a pagination for a list of results.
I have a variable called "jobs", that contains a list of job ads.
In my render function I call:
{this.state.jobs.map(this.renderClass)}
that map every job with a function.
This function is renderClass, that contains the render of:
<section key={c.id} className="panel panel-featured-left panel-featured-primary">
<Link to={'/job/'+c.id}>
<div className="panel-body">
<div className="widget-summary">
<div className="widget-summary-col widget-summary-col-icon">
<div className="summary-icon">
<img src={image} className="img-responsive" />
</div>
</div>
<div className="widget-summary-col">
<div className="summary">
<h4 className="title">{c.company}</h4>
<div className="info">
<strong className="amount"></strong><br/>
<p><i className="fa fa-map-marker"></i> {c.location}</p>
<p><i className="fa fa-suitcase"></i> {c.position}</p>
</div>
</div>
<div className="summary-footer">
<a className="text-muted text-uppercase"><i className="fa fa-calendar"></i> {day}/{month}/{year}</a>
</div>
</div>
</div>
</div>
</Link>
</section>
In this way I have a huge list of jobs, but I would a paging.
How can I do this?
Thanks
I would save the page in a state,
and do something like that (say each page has 10 jobs ) -
{this.state.jobs.slice(this.state.page * 10, this.state.page * 10 + 10)
.map(this.renderClass)}
I suggest your need to build a component for handling pagination. Some thing like that:
<Pagiantion
listLenght = {111}
selectedPage = {1}
itemPerPage = {10}
....
/>
I found the best component handling it, react-pagination-custom.
It allow you custom everything (number buttons, wrap container, spread,..). Its document is well, demo is also clear.
I'm using the latest version of EE2 and a plugin called Exp:resso store.
I have products assigned to a category and for the most part all of this is working fine. Below is my code:
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
I'm trying to find a way to show a No products exist message if the category doesn't have anything inside of it. I've tried using {count}, {total_results} & {total_rows} to check if there aren't any products. Problem is everything I try is obviously wrong because nothing gets output :/
Thanks in advance
The store search tag is a wrapper for the channel entries tag pair so you would need to use the {if no_results} tag pair.
<div class="col-md-7">
{exp:channel:categories channel="products" style="linear"}
<section class="section accordion repeater">
<h3>
{category_name}
<div class="icon">
<img src="/assets/local/img/plus-icon.jpg" alt="">
</div>
</h3>
<div class="accordion-content">
{exp:store:search orderby="title" sort="asc" category="{category_id}"}
{exp:store:product entry_id="{entry_id}"}
<p class="accordion-download">
{title} - {price}
<span><img src="/assets/local/img/add-to-cart.jpg" alt="">Add to cart</span>
</p>
{/exp:store:product}
{if no_results}
There are no products
{/if}
{/exp:store:search}
</div>
</section>
{/exp:channel:categories}
</div>
Should also be mentioned if you are not creating a form for the to add the products to the cart you could use the {store_field_short_name:price} variable to reduce the number of queries on your page. Most store things such as sku, weight, measurements can all be access by using the field short name followed by :variable
I have a problem with the widget.paginate position in the extension tx_news, i'm working in TYPO3 v. 6.1 FLUID/EXTBASE.
My problem is that it's showing the widget.paginate by default, inside the Templates/News/list.html in my list show UL tag. and i want it to be outside the UL tags, I have tryed to move it around, but then it make some big changes to my layout, or do not work at all.
see bottom of page - enter link description here
How can I show the paginate links/widget outside the UL and after it ?
My Templates/News/list.html code
{namespace n=Tx_News_ViewHelpers}
<f:layout name="General" />
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<f:if condition="{news}">
<f:then>
<div class="news-list-view">
<ul class="cbp_tmtimeline {newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}">
<f:if condition="{settings.hidePagination}">
<f:then>
<f:for each="{news}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}">
<f:for each="{paginatedNews}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</n:widget.paginate>
</f:else>
</f:if>
</ul>
</div>
</f:then>
<f:else>
<div class="no-news-found">
<f:translate key="list_nonewsfound" />
</div>
</f:else>
</f:if>
</f:section>
You can override the default Paginate Template and define your own Template
Add this to your TS template:
plugin.tx_news.settings.list.paginate.templatePath = YourNewTemplatePath.html
To know how the default template works, check out this Default Template for reference and modify your view accordingly.
If you trying to edit the default News List, change the default news path and write your FLUID template in that file:
plugin.tx_news.view.templateRootPath = YourNewTemplateNews.html
Close your tag before the widget. Of course, you'll have to make a few changes in your CSS to get what you want.
</ul>
<f:else>
<n:widget.paginate>.......
Hi i fix it in the Templates/News/list.html code
with this code.
{namespace n=Tx_News_ViewHelpers}
<f:layout name="General" />
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<f:if condition="{news}">
<f:then>
<f:if condition="{settings.hidePagination}">
<f:then>
<f:for each="{news}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}">
<div class="news-list-view">
<ul class="cbp_tmtimeline {newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}">
<f:for each="{paginatedNews}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</ul>
</div>
</n:widget.paginate>
</f:else>
</f:if>
</f:then>
<f:else>
<div class="no-news-found">
<f:translate key="list_nonewsfound" />
</div>
</f:else>
</f:if>
</f:section>
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.