List Js

  1. Tables
  2. 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/list.min.js')}}"></script>
<!-- Pagination js -->
<script src="{{url_for('static' ,filename='libs/list.pagination.js/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: '{{url_for('static' ,filename='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
});
To add new field to table
  1. Goto table-customer-list.json file and add new field to json

    example=>"customer_name": "Mary Cousar"

  2. Go to listjs.init.js file and load that json file and add field in xhttp.onload function at line number 88 or below

    example =>customer_name: raw.customer_name

  3. Goto tables-listjs.html and set attribute data-sort to attribute to th.

    example=>data-sort="customer_name"

  4. Goto listjs.init.js & at line number 108 ,Get the queryselector of required field.

    example=>customerNameField = document.getElementById("customername-field")

  5. listjs.init.js =>goto line number 191 of addbtn functionality

    add required field details in if & else condition

    example =>in if condition line number 199

    customerNameField.value !== ""

    =>in else condition

    customer_name: customerNameField.value

  6. listjs.init.js => at line number 227 of edit button functionality

    follow the same procedure of add button

  7. listjs.init.js => at line number 357 of clearFileds function & add field ad below

    customerNameField.value = "";

To delete field from table
  1. To Delete a single record

    listjs.init.js =>At line number 296 of refreshCallbacks() function

    And use removeBtns functionality to delete single record

  2. To Delete Multiple records

    listjs.init.js => At Line number 363 of deleteMultiple() function

    and use deleteMultiple() functionality to remove all records

© Steex.
Design & Develop by Themesbrand