Examples

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: '/static/images/users/avatar-5.jpg', id: 5, timestamp: '67893' });

var existOptionsList = {
    valueNames: [ 'contact-name', 'contact-message' ]
};

var existList = new List('contact-existing-list', existOptionsList);

var fuzzySearchList = new List('fuzzysearch-list', { 
    valueNames: ['name']
});

var paginationList = new List('pagination-list', {
    valueNames: ['pagi-list'],
    page: 3,
    pagination: true
});

To add new field to table

1. Goto sellers-list.json file and add new field to json

   example=>"sellerName": "Alfred Hurst"

2. Go to sellers-list.init.js file and load that json file and add field in xhttp.onload function at line number 75 or below

   example =>sellerName: element.sellerName

3. Goto sellers-list.init.js.html and set atrribute data-sort to attribute to th.

   example=>data-sort="sellerName"

4. Goto sellers-list.init.js & at line number 118 ,Get the queryselector of required field.

   example=>sellerNameField = document.getElementById("seller-name-field")

5. sellers-list.init.js =>goto line number 235 of addbtn functionality

   add required field details in if & else condition

   example =>in if condition line number 249

   sellerNameField.value !== ""

   =>in else condition

   sellerName: sellerNameField.value

6. sellers-list.init.js => at line number 307 of edit button functionality

   follow the same procedure of add button

7. sellers-list.init.js => at line number 356 of clearFileds function & add field ad below

   sellerNameField.value = "";

To delete field from table

1. To Delete a single record

   sellers-list.init.js =>At line number 175 of refreshCallbacks() function

   And use removeBtns functionality to delete single record

2. To Delete Multiple records

   sellers-list.init.js => At Line number 399 of deleteMultiple() function

   and use deleteMultiple() functionality to remove all records

Tab content wise data filter

1. Go to sellers-list.init.js & add following code available at line number 359 to 385

   var statusInput = new Choices(document.getElementById('idStatus'), {
       searchEnabled: false,
   });
   
   statusInput.passedElement.element.addEventListener('change', function (event) {
       var statusInputValue = event.detail.value;
       sellersList.filter(function (data) {
           matchData = new DOMParser().parseFromString(
               data.values().accountStatus,
               "text/html"
           );
           var status = matchData.body.firstElementChild.innerHTML;
           var statusFilter = false;
   
           if (status == "All" || statusInputValue == "All") {
               statusFilter = true;
           } else {
               statusFilter = status == statusInputValue;
           }
           if (statusFilter) {
               return statusFilter;
           }
       });
       
       sellersList.update();
   }, false);
   

To search record

1. Get enable to just search functionality in seller-list-view.html