3

I don't know how to use the library of Pagination in a lightning web component but I can't use the example method:

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
    callback: function(data, pagination) {
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

I also need to load JQuery library.

This is the code I use to load the libraries:

import pagination from '@salesforce/resourceUrl/pagination';
import jq from '@salesforce/resourceUrl/jq';
import {
    loadScript
} from 'lightning/platformResourceLoader';

...

renderedCallback() {
    Promise.all([
        loadScript(this, jq),
        loadScript(this, pagination)
    ]).then(() => {
        window.console.log("Load");
    }).catch(error => {
        window.console.log("Error: "+error);
    });
}

In the static resources, the .js files are directly loaded.

I want to use this example:

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
    callback: function(data, pagination) {
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})
1
  • What error(s) did you get? Where are you stuck? How is your template written?
    – sfdcfox
    May 25, 2019 at 19:01

2 Answers 2

8

Using webcomponents and Jquery together can get bit tricky .

Here is how i approached this and got it working

1.Create a zip file that has latest jquery.min.js , pagination.js and pagination.css and upload as static resource.(I have named it as pagination).You can download the one i used from here

2.The template file of the component is shown below

<template>
 <div class="c-container">
    <div class="data-container" lwc:dom="manual"> </div>
    <div class="pagination-container" lwc:dom="manual"></div>
 </div>
</template>

Notice we need lwc:dom as per docs so the script from static resource can modify it .

3.The Javascript for this is shown below

import { LightningElement } from 'lwc';
import pagination from '@salesforce/resourceUrl/pagination';
import {loadScript, loadStyle} from 'lightning/platformResourceLoader';


export default class Lwcpagination extends LightningElement {

paginationPluginInitialized = false;

renderedCallback() {

    if (this.paginationPluginInitialized) {
        return;
    }

    this.paginationPluginInitialized = true;

    // first load jquery file
    loadScript(this, pagination + '/jquery-3.4.1.min.js')

    .then(() => {
        // load the js files and css files
        loadStyle(this, pagination + '/pagination.css')
        loadScript(this, pagination + '/pagination.js')

        .then(() => {
            this.initializePagination();
        })
        .catch(error => {
            throw(error);
        });
    })
    .catch(error => {
        throw(error);
    });

}

initializePagination() {
    const paginationelement = this.template.querySelector('div.pagination-container');
    const dataelement = this.template.querySelector('div.data-container');

    function simpleTemplating(data) {
        var html = '<ul>';
        window.$.each(data, function(index, item){
            html += '<li>'+ item +'</li>';
        });
        html += '</ul>';
        return html;
    }

    window.$(paginationelement).pagination({
        dataSource: [1, 2, 3, 4, 5, 6, 7],
        pageSize: 2,
        callback: function(data) {
            // template method of yourself
            var html = simpleTemplating(data);
            window.$(dataelement).html(html);
        }
    })
   }
 }

It took some time to figure how to use the Jquery element inside the webcomponent bundle .

Also note that i had to not use Promise.All because pagination.js expects jquery to be loaded before its get initialized .

One more thing to note is i am using css classes (Ids do not work yet) to identify the DOM element .

You can add a css file to make the background white if needed but remember that if you do not have proper css selector you will see errors in the plugin .

.c-container {
  background-color: white;
}

Use this file to add additional css needed .

0
-2

You probably don't need to use jQuery anymore--at least not for their DOM APIs: http://youmightnotneedjquery.com/

If you're trying to use jQuery because you want to use one of its plugins, check out the Lightning Base Components to see if it has the component you're looking for. There's a carousel component that might fit your use case.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .