Hi, I’m looking to try and paginate my resource page. I’m trying to show 12 thumbnails per page with a next, back and number of pages underneath. Here is a link to the page and the code behind the module which also includes a dropdown filter that I would like to keep working. If the resources are filtered and more than 12 come back from the query these would be paginated.
Please review I added few lines of Code using List.js you can easily copy and paste below code it will work
And Please Add Pagination style it’s just list
selector .pagination ul li>a
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script>
$( document ).ready(function() {
var rsList = new List('resource-listings', {
valueNames: ['resource-container'],
page: 12,
pagination: true
});
});
</script>
<div id="resources">
<!-- FILTER -->
<div class="resource-filter">
<form id="form_id" method="get">
<div>
<h4>Filter by content type:</h4>
<select form="form_id" name="type" onchange="this.form.submit()">
<option value="show-all">Show All</option>
{% set types = hubdb_table_column(2101318, "content_type").options %} {% for choice in types %} {% set type_list = type_list~choice.id|list%} {% if choice.id == request.query_dict.type%}
<option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
{% else %}
<option value="{{ choice.id }}">{{ choice.name }}</option>
{% endif %} {% endfor %}</select></div>
</form>
</div>
<!-- sets the different query parameters using submitted input for hubdb query -->
{% set queryparam = "&orderBy=resource_order"~"&resource_order__gt=0" %}
{% if request.query_dict.type in ["1", "11", "12", "13","15"] %}
{% set queryparam = queryparam ~ "&content_type="~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type == "show-all" %}
{% set queryparam = queryparam %}
{% endif %}
<!-- RESOURCE PANELS -->
{% set table = hubdb_table_rows(2101318, queryparam) %} {% if table == [] %}
<p class="align-center">
Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
<div id="resource-listings" class="result-lists">
<ul class="list resource-list">
{% for row in table %}
<li>
<a href="{{ row["resource_url"] }}" target="_blank">
<div class="resource-container" >
<div id="resource-listing" >
<div class="{{ row["type"].name }}">
<div class=resource-thumbnail>
<div class=resource-icon><img src="{{ row["resource_icon"].url}}"></div>
<img src="{{ row["thumbnail"].url}}">
</div>
<div class="resource-details">
<p class="content-type">{{ row["content_type"].name }}</p>
<h2>{{ row["resource_title"] }}</h2>
<div class="overview">
<p>{{ row["overview"] }}</p>
</div>
<!--<div class="button"><a href="{{ row["resource_url"] }}">Learn more</a></div>-->
</div>
</div>
</div>
</div>
</a>
</li>
{% endfor %}</ul><!-- Show Pagination --><ul class="pagination"></ul>
</div>
{% endif %}</div>
Let me know if any questions!
Happy to Help!
Thanks!
Ajit
Hi, thanks for taking a look at my code and posting a suggestion. I’ve added the code but am having trouble making it work. I have attached a screenshot of how it looks. Have I missing something? The page is also showing all the cards rather than just 12 and the pagination controls are not showing.
Would you be able to let me know what I am doing wrong?
No problem, Please clone this page and send me the Cloned URL I will send the code
That will work.
If you want me to do this in your portal feel free to assign Design manager access on support@psdtohubspot.com
Hi @Woodsy
Please check my above code I added one line for
<ul class="pagination"></ul>
Update Jquery and remove from my code only add a list.js
I made codepen as a working example for you
Look here : https://codepen.io/ajitiosys/pen/MWaaBVq
Hope this works for you,
If not let me know, please.
Thanks!
Ajit
I have a couple of questions around funtionality and styling. In the screenshot there is I have selected page 4 which adds two lots of three horizontal dots.
Can thes be used to arrow next and back through the pages? Currently they don’t do anything. Also can I add arrow styling similar to the blog page control here: 360insights Ecosystem Orchestration
Does the list.js have an option to add a goto last/first page option similar to the blog link above?
Thank you for all your support and advice in making this work.
Here is the modified JavaScript for you Just Copy and Paste
var perPage = 6;
new List("resource-listings", {
valueNames: ["resource-container"],
page: perPage,
plugins: [
// can not make left and right work on List.js 1.5.0, so I use 1.3.0 instead, which requires List.pagination.js plugin
ListPagination({
paginationClass: "pagination-layout",
left: 2,
right: 2
})
]
}).on("updated", function(list) {
var isFirst = list.i == 1;
var isLast = list.i > list.matchingItems.length - list.page;
// make the Prev and Nex buttons disabled on first and last pages accordingly
$(".pagination-prev.disabled, .pagination-next.disabled").removeClass(
"disabled"
);
if (isFirst) {
$(".pagination-prev").addClass("disabled");
}
if (isLast) {
$(".pagination-next").addClass("disabled");
}
// hide pagination if there one or less pages to show
if (list.matchingItems.length <= perPage) {
$(".pagination-wrap").hide();
} else {
$(".pagination-wrap").show();
}
});
$(".pagination-next").click(function() {
$(".pagination-layout .active")
.next()
.trigger("click");
});
$(".pagination-prev").click(function() {
$(".pagination-layout .active")
.prev()
.trigger("click");
});
