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
});
© Velzon.
Design & Develop by Themesbrand