My problem is: I'm trying to do a pagination function to my datatable, it works fine but when I change the limit of items in my table, the total of pages doesn't update. How can I proceed? I have this filter:
filters: {
paginate: function(list) {
this.resultCount = this.movimientos.length;
if (this.currentPage >= this.totalPages) {
this.currentPage = Math.max(0, this.totalPages - 1);
}
var index = this.currentPage * this.upperLimit;
return this.movimientos.slice(index, index + this.upperLimit);
}
}
And here I'm calculating the number of pages
computed: {
totalPages: function() {
return Math.ceil(this.resultCount / this.itemsPerPage);
}
},
methods: {
setPage: function(pageNumber) {
this.currentPage = pageNumber;
},
<div v-for="pageNumber in totalPages" class="c-paginacao__select">
<a href="#" v-on:click.prevent="setPage(pageNumber)">
<span class="active">{{pageNumber+1}}</span>
</a>
</div>
Related
I have a search for a word option above the accordion, so users can search for a specific word in the accordion and those accordions that has the words matched are expanded and the searched word is highlighted. For now the search and highlight the string part is working, but the accordions doesn't expand per the indexes selected. Only the first accordion opens by default for all search result.enter image description here
Can you help with what i'm missing in the below code?
terms.ts
import { Component, OnInit } from '#angular/core';
import { CommonService } from '../service/common.service';
import { GlossaryOfTerms } from '../model/GlossaryOfTerms.model';
#Component({
selector: 'app-terms',
templateUrl: './terms.component.html',
styleUrls: ['./terms.component.scss']
})
export class GlossaryOfTermsComponent implements OnInit {
search: string = "";
gTerms: GlossaryOfTerms[] = [];
step = 0;
constructor(private commonService: CommonService) {}
ngOnInit(): void {
this.getTerms();
}
public OnSearched(searchTerm: string) {
this.search = searchTerm;
this.findSearchedValue();
}
getTerms(): void {
this.commonService.getGlossaryOfTerms().subscribe((terms) => {
this.gTerms = terms;
console.log("terms", this.gTerms );
});
}
findSearchedValue(): void {
this.gTerms?.forEach((terms, index) => {
var decription = terms.description;
var name = terms.name;
if(this.search != '' || undefined) {
if ((decription?.includes(this.search)) || (name?.includes( this.search) )) {
console.log("openindex", index);
this.step = index;
} else {
console.log("closeindex", index);
this.step = index;
}
}
});
}
}
<app-search #searchedValue (searched)="OnSearched($event)"></app-search>
<mat-accordion multi="true">
<mat-expansion-panel #accordianContainer *ngFor="let term of gTerms; let i = index" [expanded]="step === i">
<mat-expansion-panel-header>
<mat-panel-title>
<p [innerHTML]="term.name | highlightSearch: search"></p>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="content">
<div class="content-text">
<p [innerHTML]="term.description | highlightSearch: search"></p>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
I found the solution to my question, as someone can find it helpful.
Open the select
findSearchedValue(): void {
this.step = 0;
var searchTerm = this.search.toLowerCase();
this.gTerms?.forEach((terms, index) => {
if (this.search != '' || undefined) {
if ((terms.description?.toLowerCase().includes(searchTerm)) || (terms.name?.toLowerCase().includes(searchTerm))) {
this.step = ++this.step;
this.openSelected(index, this.step);
}
}
});
}
openSelected(indexed: number, step: number): boolean {
return this.step > indexed ? true : false;
}
*ngFor="let term of gTerms; let i=index" [expanded]="openSelected(i, step)"
I'm a junior developer, I need some help to implement an lwc component which display records in experience site so I need to implement pagination since we have a large number to record.
I implement the 2 buttons "Previous" and "Next" it works fine, but I need the a clickable number o page between the 2 buttons here is the mockup : something like :<- 1 2 3 4 ... ->
here is my code:
<template>
<div class="pastcfps"><br>
<table>
<thead>
<tr>
<th class="pastcfpstitle"></th>
<th class="fullProposalDeadlineTitle"><a data-id="Proposal_Submission_Deadline__c"
onclick={sort}>Closing Date<img src={sortArrowUp} data-id="sortIconFp"></a></th>
</tr>
</thead>
<tbody>
<template if:true={pastcfps}>
<template for:each={pastcfps} for:item="pastcfp">
<tr class="pastcfpstr" key={pastcfp.Id}>
<td key={pastcfp.Id} class="pastcfpstitle">
<p class="pastcfpsRecordType">{pastcfp.RecordType.Name}</p>
<a class="pastcfpsname" data-id={pastcfp.Id} onclick={redirect} is-loading={tableLoadingState}>{pastcfp.Name}</a>
</td>
<td key={pastcfp.Id} class="fullProposalDeadline">{pastcfp.Proposal_Submission_Deadline__c}
</td>
</tr>
</template>
</template>
</tbody>
<template if:true={error}>
<p class="pastcfpsname">There are no past Calls for Proposals</p>
</template>
</table>
</div>
<div style="text-align:center;">
<c-pagination-navigation onprevious={handlePrev} onnext={handleNext}></c-pagination-navigation>
</div>
</template>
import { LightningElement, api, wire, track } from 'lwc';
import getPastCfPs from '#salesforce/apex/CallsForProposalsService.getPastCfPs';
import ARROW_LOGO from '#salesforce/contentAssetUrl/homearrow';
import SORT_ARROW_UP from '#salesforce/resourceUrl/sortArrowUp';
import SORT_ARROW_DOWN from '#salesforce/resourceUrl/sortArrowDown';
export default class RecentOpenCallsForProposals extends LightningElement {
arrowLogo = ARROW_LOGO;
sortArrowUp = SORT_ARROW_UP;
sortArrowDown = SORT_ARROW_DOWN;
sortedDirection = 'asc';
sortedColumn;
#track tableLoadingState = false;
#track pastcfps;
#track error
#track offset=0;
#track Prevoffset=0;
limit = 12;
#wire(getPastCfPs,{ offset: '$offset', l : '$limit' }) wiredCfps({ data, error }) {
this.tableLoadingState = false;
if (data) {
this.pastcfps = data;
console.log(' type of data =====| ' + typeof data);
console.log(' type of data 0 =====| ' + typeof data[0]);
console.log(' type of data =====| ' + typeof this.pastcfps);
console.log(' type of data 0 =====| ' + typeof this.pastcfps[0]);
let dataString = JSON.stringify(data[0]);
console.log(' dataString ========| ' + dataString);
console.log(' Name ========| ' + data[0].Name);
console.log(' Status__c ========| ' + data[0].Status__c);
console.log(' CreatedDate ========| ' + data[0].CreatedDate);
console.log(' Proposal_Submission_Deadline__c ========| ' + data[0].Proposal_Submission_Deadline__c);
this.error = undefined;
if(this.pastcfps.length == 0)
this.offset= this.Prevoffset;
} else if (error) {
this.error = error;
this.pastcfps = undefined;
}
}
handlePrev (_event) {
//window.clearTimeout(this.delayTimeout);
if(this.offset - this.limit >=0)
{
this.tableLoadingState = true;
this.Prevoffset=this.offset;
this.offset = this.offset - this.limit;
}
}
handleNext (_event) {
//window.clearTimeout(this.delayTimeout);
this.tableLoadingState = true;
this.Prevoffset=this.offset;
this.offset = this.offset + this.limit;
}
redirect(event) {
var id = event.currentTarget.dataset.id;
if (id) {
window.location = 'call-for-proposal/' + id;
}
}
sort(e) {
if (this.sortedColumn === e.currentTarget.dataset.id) {
this.sortedDirection = this.sortedDirection === 'asc' ? 'desc' : 'asc';
} else {
this.sortedDirection = 'asc';
}
let table = JSON.parse(JSON.stringify(this.pastcfps));
var reverse = this.sortedDirection === 'asc' ? 1 : -1;
try {
table.sort((a, b) => { return new Date(a[e.currentTarget.dataset.id]) > new Date(b[e.currentTarget.dataset.id]) ? 1 * reverse : -1 * reverse });
} catch (error) {
console.log(error);
}
this.sortedColumn = e.currentTarget.dataset.id;
this.pastcfps = table;
if (e.currentTarget.dataset.id == 'Proposal_Submission_Deadline__c') {
let existingIcon = this.template.querySelectorAll('img[data-id="sortIconFp"]');
if (existingIcon[0]) {
existingIcon[0].parentNode.removeChild(existingIcon[0]);
}
let nodes = this.template.querySelectorAll('a[data-id="' + e.currentTarget.dataset.id + '"]');
var icon = document.createElement('IMG');
if (this.sortedDirection === 'asc') { icon.setAttribute('src', this.sortArrowUp); }
if (this.sortedDirection === 'desc') { icon.setAttribute('src', this.sortArrowDown); }
icon.setAttribute('data-id', 'sortIconFp');
if (nodes[0]) { nodes[0].appendChild(icon); }
}
}
}
#AuraEnabled(cacheable=true)
public static List<Call_for_Proposal__c> getPastCfPs(Integer offset, Integer l){
String recordTypeName = [SELECT Id, Name, Status__c, CreatedDate, RecordTypeId, RecordType.Name, Proposal_Submission_Deadline__c FROM Call_for_Proposal__c WHERE Status__c = 'Closed' ].get(0).RecordType.Name;
system.debug('recordTypeName === ' + recordTypeName);
return [SELECT Id, Name, Status__c, CreatedDate, RecordTypeId, RecordType.Name, Proposal_Submission_Deadline__c FROM Call_for_Proposal__c WHERE Status__c = 'Closed' limit :l offset :offset];
}
I have an issue where on updating a cell with cellEdited, The page jumps back to the top of the page when the mutator or formatter is called.
I've tried setting table.redraw(false) and then the formatter/mutator doesn't seem to do anything.
When a user updates the proficiency level the formatter or mutator should add a button if it's above 3. It works perfectly. However it jumps to the top of the screen.
Any help appreciated.
var evidenceMutator = function(value, data, type, params, component){
skillsTable.redraw(false);
var claimedProficiency = data.Proficiency;
var skillClaimed = data.SkillID;
var Evidence = data.Evidence;
var memberID = $("#user").data("memberid");
if (claimedProficiency >= 3 ) {
// has provided evidence
if (Evidence == 1) {
return '<a class="btn btn-outline-success btn-xs btn-slim evidence" href="#" id="'+ skillClaimed + '" onclick="openEvidenceModal(this, this.id, '+ memberID +')"> <i class="fas fa-check-circle cssover"></i> Edit Evidence </a>';
} else { // needs to provide
return '<a class="btn btn-outline-danger btn-xs btn-slim evidence" href="#" id="'+ skillClaimed + '" onclick="openEvidenceModal(this, this.id, '+ memberID +')"> <i class="fas fa-times-circle cssover"></i> Add Evidence </a>';
}
} else {
// cell.getElement().style.color = "#CCD1D1";
//cell.getElement().style.fontStyle ="italic";
// cell.getElement().style.fontSize = "0.75em";
return ' No Evidence Needed';
}
}
function complianceTick(cell) {
var isCompliant = cell.getData().Compliance;
var Evidence = cell.getData().Evidence;
var claimedProficiency = cell.getData().Proficiency;
// style all with sucesss and only change if we need to
cell.getElement().style.color = "#33CC66";
cell.getElement().style.fontSize = "0.85em";
cell.getElement().style.fontStyle = "italic";
if (claimedProficiency >= 3 ) {
if (Evidence == '1') {
return '<i class="fas fa-check-circle"></i>';
} else {
cell.getElement().style.color = "#FF0000";
cell.getElement().style.fontSize = "0.85em";
cell.getElement().style.fontWeight = "bold";
return '<i class="fas fa-times-circle"></i>';
}
} else {
return '';
}
}
var skillsTable = new Tabulator("#SkillsTable", {
index: "SkillID",
height:"100%",
headerVisible:false,
autoResize:true,
layout:"fitColumns", //fit columns to width of table
groupBy:"SkillCatID",
groupHeader: groupMaker,
initialSort:[ //set the initial sort order of the data
{column:"RowOrder", dir:"asc"}
],
columns:[ //define the table columns
{title:"", field:"SkillID", visible:false},
{title:"Skill", field:"SkillName", visible:true, headerSort:false, formatter: skillName},
{title:"", field:"SkillCatID", visible:false},
{title:"", field:"SkillCatName", visible:false},
{title:"My Level", field:"Proficiency", visible:true, editor:inputEditor, formatter:prof, width:"7%", headerSort:false, align:"center",
cellEdited:function(cell, row, success){ // EDITING FUNCTION
var $value = cell.getValue();
var $field = cell.getField();
var $row = cell.getRow();
var $id = $row.getData().SkillID;
var integer = parseInt($value, 10);
if ($value != "" && integer < 5 && integer >= 0) {
// update record
updateRecord($id, $field, $value, $row);
//$row.update({"Proficiency" : $value});
//$row.update({"Evidencer" : $value});
skillsTable.updateRow($id, {id:$id,"Proficiency":$value});
skillsTable.updateRow($id, {id:$id,"Evidencer":$value});
} else {
cell.restoreOldValue();
if ($value != "") {
alert ("Values should be between 0 and 4, the cell has been restored to its previous value.")
}
}
},
},
{title:"Target", field:"MinLevel", visible:false, headerSort:false},
{title:"", field:"Proficiency", visible:true, formatter: skillDec, headerSort:false},
{title:"Evidence", field:"Evidencer", visible:true, hozAlign:"center", formatter: evidenceCell, mutator: evidenceMutator, width:"10.5%", headerSort:false},
{title:"", field:"RowOrder", visible:false, sorter:"number"},
{title:"disc", field:"DisciplineID", visible:false, headerFilter:true}
],
});
UPDATE
I think I've narrowed down the issue to the formatter:
```
function evidenceCell(cell, formatterParms, onRendered) {
var claimedProficiency = cell.getData().Proficiency;
var skillClaimed = cell.getData().SkillID;
var Evidence = cell.getData().Evidence;
var memberID = $("#user").data("memberid");
if (claimedProficiency >= 3 ) {
// has provided evidence
if (Evidence == 1) {
return '<a class="btn btn-outline-success btn-xs btn-slim evidence" href="#" id="'+ skillClaimed + '" onclick="openEvidenceModal(this, this.id, '+ memberID +')"> <i class="fas fa-check-circle cssover"></i> Edit Evidence </a>';
} else { // needs to provide
return '<a class="btn btn-outline-danger btn-xs btn-slim evidence" href="#" id="'+ skillClaimed + '" onclick="openEvidenceModal(this, this.id, '+ memberID +')"> <i class="fas fa-times-circle cssover"></i> Add Evidence </a>';
}
} else {
cell.getElement().style.color = "#CCD1D1";
cell.getElement().style.fontStyle ="italic";
cell.getElement().style.fontSize = "0.75em";
return 'No Evidence Needed';
}
}
```
It looks like the issue is with the cell.getData(). It seems to trigger the scroll to the top of page. I think it may be a bug with the newer version. Testing 4.2 and it seems to not be an issue. However, I have issues with modals going to the top of the page with the older version.
The issue seems to be with the virtual DOM. In my case I can luckily turn it off by using the following:
virtualDom:false,
I'm not sure this would be a good fix for people with hundreds of rows.
My _loadMoreRows and _isRowLoaded are not getting called, so loadedRowsMap remains empty and I am unable to identify the rows loaded to avoid making HTTP request .
Here's my complete code :
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {formatDate} from '../../helper/date';
import { recentActivitiAction } from '../actions/dashboardAction';
import { BeatLoader } from 'react-spinners';
import {AutoSizer, List, CellMeasurer, InfiniteLoader, CellMeasurerCache} from 'react-virtualized';
import styles from '../../css/AutoSizer.module.css';
import Skeleton from 'react-skeleton-loader';
const STATUS_LOADING = 1;
const STATUS_LOADED = 2;
const mapStateToProps = (state) => {
return {
recentActList: state.dashboardReducer.recentActList,
activitiLoading: state.dashboardReducer.activitiLoading
}
}
const mapDispatchToProps = (dispatch) => {
return {
getRecentActivites: (postData, callback) => {
dispatch(recentActivitiAction(postData, callback));
}
};
}
class RecentActivitiComp extends Component {
constructor(props) {
super(props);
this.state = {
loadedRowCount: 0,
loadedRowsMap: {},
loadingRowCount: 0,
};
this.cache = new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 100
});
this._timeoutIdMap = {};
this._isRowLoaded = this._isRowLoaded.bind(this);
this._loadMoreRows = this._loadMoreRows.bind(this);
this.renderRow = this.renderRow.bind(this);
this.onRowsRendered = this.onRowsRendered.bind(this);
this.noRowsRenderer = this.noRowsRenderer.bind(this);
}
componentWillUnmount() {
Object.keys(this._timeoutIdMap).forEach(timeoutId => {
clearTimeout(timeoutId);
});
}
componentDidMount() {
var postData = {
"userName": "admin",
"queryType": "GET_RECENT_PROJECTS",
"data": {
pageStart: 1,
pageEnd: 20
}
};
this.props.getRecentActivites(postData, this.recentActResponse.bind(this));
}
updateDimensions() {
this.cache.clearAll();
this.activitiList.recomputeRowHeights();
}
recentActResponse(response) {
if (response.status === "FAILED") {
// handle error
}
}
_fieldGenerator(row, index) {
var formattedDate = formatDate(row.lastModified),
output = '', JSX = '';
if(formattedDate) {
formattedDate = formattedDate.split('-');
output = (
<div className="project-info-value byline">
<span>{formattedDate[0]}<sup>{formattedDate[1]}</sup> {formattedDate[2]} {formattedDate[3]}</span> by <a>{row.modifiedBy}</a>
</div>
)
} else {
output = (
<div className="project-info-value byline">
<span>Invalid Date by </span> <a>{row.modifiedBy}</a>
</div>
)
}
if(row.action === "upcoming-release") {
JSX =
<li key={index}>
<div className="block">
<div className="block_content">
<h2 className="title">{row.action}</h2>
{output}
<p className="excerpt">{row.notes}<a> Read More</a></p>
</div>
</div>
</li>
} else if(row.action === "created") {
JSX =
<li key={index}>
<div className="block">
<div className="block_content">
<h2 className="title">{row.type} <a>{row.name}</a> {row.action}</h2>
{output}
<p className="excerpt"></p>
</div>
</div>
</li>
} else if(row.action === "modified") {
JSX =
<li key={index}>
<div className="block">
<div className="block_content">
<h2 className="title">{row.type} <a>{row.name}</a> {row.action}</h2>
{output}
<p className="excerpt"></p>
</div>
</div>
</li>
} else {
JSX =
<li key={index}>
<div className="block">
<div className="block_content">
<h2 className="title"><a>{row.person}</a> added to <a>{row.addedTo}</a></h2>
{output}
<p className="excerpt"></p>
</div>
</div>
</li>
}
return JSX;
}
renderRow({ index, key, style, parent }) {
var JSX = '', content = '';
const list = this.props.recentActList
const {loadedRowsMap} = this.state;
if (loadedRowsMap[index] === STATUS_LOADED) {
const row = list[index];
JSX = this._fieldGenerator(row, index);
content = (
JSX
);
} else {
content = (
<div className={styles.placeholder} style={{width: 480}} />
);
}
return (
<CellMeasurer
cache={this.cache}
columnIndex={0}
key={key}
parent={parent}
rowIndex={index}
>
{({ measure }) => (
<div key={key} style={{...style}} onLoad={measure}>
{content}
</div>
)}
</CellMeasurer>
);
}
_isRowLoaded({index}) {
const {loadedRowsMap} = this.state;
return !!loadedRowsMap[index]; // STATUS_LOADING or STATUS_LOADED
}
_loadMoreRows({startIndex, stopIndex}) {
const {loadedRowsMap, loadingRowCount} = this.state;
const increment = stopIndex - startIndex + 1;
for (var i = startIndex; i <= stopIndex; i++) {
loadedRowsMap[i] = STATUS_LOADING;
}
this.setState({
loadingRowCount: loadingRowCount + increment,
});
const timeoutId = setTimeout(() => {
const {loadedRowCount, loadingRowCount} = this.state;
delete this._timeoutIdMap[timeoutId];
for (var i = startIndex; i <= stopIndex; i++) {
loadedRowsMap[i] = STATUS_LOADED;
}
this.setState({
loadingRowCount: loadingRowCount - increment,
loadedRowCount: loadedRowCount + increment,
});
promiseResolver();
}, 1000 + Math.round(Math.random() * 2000));
this._timeoutIdMap[timeoutId] = true;
let promiseResolver;
return new Promise(resolve => {
promiseResolver = resolve;
});
}
noRowsRenderer() {
return <div className={styles.noRows}>No rows</div>;
}
onRowsRendered({overscanStartIndex, overscanStopIndex, startIndex, stopIndex}) {
const list = this.props.recentActList.length ? this.props.recentActList : [];
const {loadedRowsMap} = this.state;
console.log(startIndex, stopIndex, this.state.loadedRowCount);
// if(startIndex + 10 === list.length && this._isRowLoaded(startIndex) !== STATUS_LOADED) {
// var postData = {
// "userName": "admin",
// "queryType": "GET_RECENT_PROJECTS",
// "data": {
// pageStart: 1,
// pageEnd: 10
// }
// };
// this.props.getRecentActivites(postData, this.recentActResponse.bind(this));
// }
}
render() {
const list = this.props.recentActList.length ? this.props.recentActList : [];
const {loadedRowCount, loadingRowCount} = this.state;
return (
<div className="recent left_panel">
<div className="x_panel">
<div className="x_title sub_title">
<h2>Recent Activites</h2>
</div>
<div className="x_content">
<div className="dashboard-widget-content">
<ul className="list-unstyled timeline widget">
<InfiniteLoader
isRowLoaded={this._isRowLoaded}
loadMoreRows={this._loadMoreRows}
rowCount={list.length}>
{({onRowsRendered, registerChild}) => (
<div className={styles.list}>
<AutoSizer onResize={this.updateDimensions.bind(this)}>
{({width, height}) => (
<List
ref={(ref) => {
this.activitiList = ref;
registerChild(ref);
}}
noRowsRenderer={this.noRowsRenderer}
onRowsRendered={this.onRowsRendered}
deferredMeasurementCache={this.cache}
width={width}
height={height}
deferredMeasurementCache={this.cache}
rowHeight={this.cache.rowHeight}
rowRenderer={this.renderRow}
rowCount={list.length} /* Initially render 20 records */
/>
)}
</AutoSizer>
</div>
)}
</InfiniteLoader>
</ul>
{/* <div className="align-right">
<a href="http://karthik.jivox.com/studio/eam/production/index.php#"
className="btn-jivox-1">
<span className="btn-icon">
<i className="fas fa-chevron-down" aria-hidden="true"></i>
</span> Show More Activities
</a>
</div> */}
</div>
</div>
</div>
</div>
);
}
}
const RecentActiviti = connect(mapStateToProps, mapDispatchToProps)(RecentActivitiComp);
export default RecentActiviti;
As you can see I am making API call at didMount phase and therefore populating my redux store with the data. Data is coming fine. But isRowLoaded and loadMoreRows are not getting called.
I have debugged the sample code of infiniteLoader.example.js, there during the inital render those two functions are called and properly set loadedRowsMap.
What I am doing wrong here ? :-( Any help would be greatly appreciated .
I have resolved the issue after making some changes.
const mapStateToProps = (state) => {
return {
myList: state.dashboardReducer.myList
}
}
const list = this.props.myList.length ? this.props.recentActList : [];
const rowCount = list.length + (moreToBeLoaded ? 1 : 0);
To know why 1 more row loaded pls check this post react-virtualized InfiniteLoader/List - working example using AJAX
So the issue in my code was I was writing my custom onRowsRendered function and it was not handling the response correctly. Now I changed the code to use the one passed by InfiniteLoader.
Hope that helps.
<InfiniteLoader
isRowLoaded={this._isRowLoaded}
loadMoreRows={this._loadMoreRows}
rowCount={rowCount}>
{({onRowsRendered, registerChild}) => (
<div className={styles.list}>
<AutoSizer onResize={this.updateDimensions.bind(this)}>
{({width, height}) => (
<ActiviitiList
ref={(ref) => {
this.activitiList = ref;
registerChild(ref);
}}
width={width}
height={height}
onRowsRendered={onRowsRendered}
rowCount={rowCount}
rowHeight={this.cache.rowHeight}
rowRenderer={this._rowRenderer}
overscanRowCount={3}
deferredMeasurementCache={this.cache}
/>
)}
</AutoSizer>
</div>
)}
</InfiniteLoader>
(The code you've posted has a lot going on; you'll probably get better responses if you remove the parts that aren't related to your question.)
My advice is to take a look at the values you're getting for list.length, which you're passing to InfiniteLoader's rowCount prop. InfiniteLoader will only call loadMoreRows if rowCount is higher than the number of rows it has data for.
For example: during the first render, the value is 0, because you have not fetched any data yet. This prevents a call to loadMoreRows during the first render.
I also noticed that you are keeping loadedRowCount and loadingRowCount in state, but you never use them for anything. I don't think that's related to your issue, but it's also probably not intentional.
i'm using Swiper and want custom pagination. This question was answered here, but i misunderstood, how to make that pagination clickable, nothing worked. What am i doing wrong?
$(document).ready(function () {
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next'
, prevButton: '.swiper-button-prev'
, pagination: '.swiper-pagination'
, paginationClickable: true
, paginationHide: false
, paginationType: 'custom'
, paginationElement: 'div'
, paginationCustomRender: function (swiper, current, total) {
var names = [];
$(".swiper-wrapper .swiper-slide").each(function (i) {
names.push($(this).data("name"));
});
var text = "";
for (let i = 1; i <= total; i++) {
if (current == i) {
text += "<div class='swiper-pagination-container swiper-pagination-container-active'><div class='swiper-pagination-icon swiper-pagination-icon-active'></div><div>" + names[i] + "</div></div>";
}
else {
text += "<div class='swiper-pagination-container'><div class='swiper-pagination-icon'></div><div>" + names[i] + "</div></div>";
}
}
return text;
}
});
$(".swiper-pagination-container").on("click", function () {
mySwiper.slideTo($(".swiper-pagination-container").index(this) + 1);
});
}
The difference is that i placed .swiper-pagination div outside the .swiper-wrapper:
<div class="swiper-pagination"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-name="7 сентября">Slide 1</div>
<div class="swiper-slide" data-name="10 декабря">Slide 2</div>
<div class="swiper-slide" data-name="14-23 декабря">Slide 3</div>
<div class="swiper-slide" data-name="30 декабря">Slide 4</div>
<div class="swiper-slide" data-name="5-6 февраля">Slide 5</div>
<div class="swiper-slide" data-name="8 февраля">Slide 6</div>
<div class="swiper-slide" data-name="9 февраля">Slide 7</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
It's simple, try it:
window.mainSlider = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next'
, prevButton: '.swiper-button-prev'
, pagination: '.swiper-pagination'
, paginationClickable: true
, paginationHide: false
paginationBulletRender : function (index, className) {
var slide = $('.' + this.wrapperClass).find('[data-name]')[index],
label = $(slide).attr('data-name');
return '<span class="' + className + '">' + (typeof label !== 'undefined' ? name : '') + '</span>';
}
});
I tried this, it works on swiper with loop set to true, if loop set to false, simply remove +1 from the index will do.
pagination: {
el: $('.your_class').find('.swiper-pagination'),// to find the swiper-pagination you put outside of the swiper-container
clickable: true,
renderBullet: function (index, className) {
var slider_array = [];
var el = $('.swiper-container')
el.find('[data-name]').each(function () {
slider_array.push($(this).data('name'));
});
console.log(slider_array);
return '<span class="' + className + '">' + slider_array[index + 1] + '</span>';
}
}