2

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);
    }
})
  • What error(s) did you get? Where are you stuck? How is your template written? – sfdcfox May 25 '19 at 19:01
3

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.