List Js

OverviewOfficial Website

List js is a library for adding search, sort, filters and flexibility to tables, lists and various HTML elements.

Javascript

<!-- List js -->
<script src="{{url_for('static' ,filename='libs/list.js/dist/list.min.js')}}"></script>
<!-- Pagination js -->
<script src="{{url_for('static' ,filename='libs/list.pagination.js/dist/list.pagination.min.js')}}"></script>

Initjs (Custom js)

<!-- listjs init -->
<script src="{{url_for('static' ,filename='js/pages/listjs.init.js')}}"></script>

Add Package

yarn add list.js --save

Remove Package

yarn remove list.js or you can remove package by removing specific package from package.json

Examples

Title	Javascript
Data Attributes + Custom	`var attroptions = { valueNames: [ 'name', 'born', { data: ['id'] }, { attr: 'src', name: 'image' }, { attr: 'href', name: 'link' }, { attr: 'data-timestamp', name: 'timestamp' } ] }; var attrList = new List('users', attroptions); attrList.add({ name: 'Leia', born: '1954', image: 'assets/images/users/avatar-5.jpg', id: 5, timestamp: '67893' });`
Existing List	`var existOptionsList = { valueNames: [ 'contact-name', 'contact-message' ] }; var existList = new List('contact-existing-list', existOptionsList);`
Fuzzy Search	`var fuzzySearchList = new List('fuzzysearch-list', { valueNames: ['name'] });`
Pagination	`var paginationList = new List('pagination-list', { valueNames: ['pagi-list'], page: 3, pagination: true });`