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.
Related
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.
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.
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
How can I make a layout shown in this image
I could have done it easily with grid system but I want the first post's description off the grid system or below the both column. However, for mobile devices I want it to appear with the image or in the same grid like the image below
I don't expect you can do this with Bootstrap's CSS only cause the order of your elements change from desktop to mobile.
Try this html:
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12" style="background-color:red;">1</div>
<div class="rightblock col-md-6 col-xs-12">
<div class="row">
<div class="col-xs-12" style="background-color:lightgreen;">3</div>
<div class="col-xs-12" style="background-color:lightyellow;">4</div>
</div>
</div>
<div class="clearfix visible-md visible-lg"></div>
<div class="col-md-12 col-xs-12 lefttext" style="background-color:lightblue;">2</div>
</div>
</div>
Where 2 = the caption of your first item (1) and 3 and 4 are your second and third item.
For the mobile version use javascript to swap 2 (.lefttext) and the 3/4 block (.rightblock):
$(window).resize(function () {
if ($(window).width() < 992) {
$(".rightblock").insertAfter($(".lefttext"));
}
});
Demo: http://bootply.com/94560
Note 1: $(window).resize only will called on a real resize (from big to small) and not when opening the small screen direct. See here for better solution to react on screen size changes: How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?
Note 2: see http://getbootstrap.com/css/#grid-responsive-resets for explanation of the clearfix
I'm using Watir to try to interface to the Quibids "Bid Now" (not Buy Now) button but can't seem to get the right combination of the following command to click the button:
browser.button(:value => 'Bid Now').click
I'm able to fill in a text field on the page so all my object set up is correct. It's just this command that I can't get to work. Every attempt gives me the error that the element cannot be found. I've also tried :id but nothing works and after working on it for 2 hours, thought I'd ask.
The following is the html out of IE around that button and any help would be appreciated. Thanks.
<p class="large-price">
<span style="background-image: none;" class="price">$5.68</span>
<span class="medium light-grey">USD</span>
</p>
<p class="time large-timer2 red">00:00:06</p>
<h2 class="margin-five username-height">
<span><img style="display: inline;" class="user-icon winning_avatar" src="https://s1.quibidscdn.com/n1/avatards/12.png" width="64" height="64"></span>
<br>
<span style="height: 30px;" class="winning">TOLLCOLLECTOR</span>
</h2>
<div id="298085604">
<p>
<a class="buttons bid large orange" href="#">Bid Now</a>
</p>
</div>
<script>
$(document).ready(function(){
AuctionDetail.updateSavings({"r":0,"v":0,"value":0});
});
</script>
<ul class="price-breakdown">
<li>Value Price:
<span id="product_valueprice" class="float-right">$649.99</span>
</li>
<li>Bids Credit:
<span class="float-right">- <span id="breakdown_bidsvalue">$0.00</span></span>
</li>
<li class="bid_breakdown last">
<span id="breakdown_realbids">0</span> Real / <span id="breakdown_voucherbids">0</span> Voucher </li>
<li>Buy Now Price<span class="float-right breakdown_buynowtotal">$649.99</span>
</li>
</ul>
<p>
<a id="buynowbtn" class="buynowbtn buttons large blue" href="#">
Buy Now
<span class="clear"></span>
<span class="buynow-price breakdown_buynowbtn">$649.99</span>
</a>
</p>
The HTML does not list it as a button. It lists it as a link- <a>. I've never used WATIR but given that the command is browser.button, it would seem that you need something like browser.link instead.
The process is quicker if you don't do a text scan and use the classes available to you:
I'd recommend using
browser.a(:class => "buttons bid large orange").click
instead, both will work, just generally it would be better practice to use the html if it's available to you!
My Friend...
My two possibilities.
browser.div(:id, "298085604").text(:name "Bid Now").click
or
browser.div(:text, "Bid Now").click
Remember that, the HTML is not displayed all functions, only the HTML code that the browser recognizes. this is the cause of programming language. example (framework, NET) these encrypted language code for the final user. You can not see the button entirely.
Good Luck!