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: '../assets/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 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 atrribute data-sort to attribute to th.

   example=>data-sort="customer_name"

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

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

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

   add required field details in if & else condition

   example =>in if condition line number 195

   customerNameField.value !== ""

   =>in else condition

   customer_name: customerNameField.value

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

   follow the same procedure of add button

7. listjs.init.js => at line number 346 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 287 of refreshCallbacks() function

   And use removeBtns functionality to delete single record

2. To Delete Multiple records

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

   and use deleteMultiple() functionality to remove all records

Tab content wise data filter

1. Goto apps-ecommerce-orders.php & add following code available at line number 102 to 128

   <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
       <li class="nav-item">
           <a class="nav-link active All py-3" data-bs-toggle="tab" id="All" href="#home1" role="tab" aria-selected="true">
               <i class="ri-store-2-fill me-1 align-bottom"></i> All Orders
           </a>
       </li>
       <li class="nav-item">
           <a class="nav-link py-3 Delivered" data-bs-toggle="tab" id="Delivered" href="#delivered" role="tab" aria-selected="false">
               <i class="ri-checkbox-circle-line me-1 align-bottom"></i> Delivered
           </a>
       </li>
       <li class="nav-item">
           <a class="nav-link py-3 Pickups" data-bs-toggle="tab" id="Pickups" href="#pickups" role="tab" aria-selected="false">
               <i class="ri-truck-line me-1 align-bottom"></i> Pickups <span class="badge bg-danger align-middle ms-1">2</span>
           </a>
       </li>
       <li class="nav-item">
           <a class="nav-link py-3 Returns" data-bs-toggle="tab" id="Returns" href="#returns" role="tab" aria-selected="false">
               <i class="ri-arrow-left-right-fill me-1 align-bottom"></i> Returns
           </a>
       </li>
       <li class="nav-item">
           <a class="nav-link py-3 Cancelled" data-bs-toggle="tab" id="Cancelled" href="#cancelled" role="tab" aria-selected="false">
               <i class="ri-close-circle-line me-1 align-bottom"></i> Cancelled
           </a>
       </li>
   </ul>

2. Go to ecommerce-order.init.js & add following code available at line number 153 to 178

   var tabEl = document.querySelectorAll('a[data-bs-toggle="tab"]');
   Array.from(tabEl).forEach(function (item) {
       item.addEventListener("shown.bs.tab", function (event) {
           filterOrder(event.target.id);
       });
   });
   
   function filterOrder(isValue) {
       var values_status = isValue;
       orderList.filter(function (data) {
           var statusFilter = false;
           matchData = new DOMParser().parseFromString(
               data.values().status,
               "text/html"
           );
           var status = matchData.body.firstElementChild.innerHTML;
           if (status == "All" || values_status == "All") {
               statusFilter = true;
               } else {
           statusFilter = status == values_status;
           }
           return statusFilter;
       });
   
       orderList.update();
   }

To search record

1. Goto ecommerce-order.init.js & add following code available at line number 229 to 277

   function SearchData() {
       var isstatus = document.getElementById("idStatus").value;
       var payment = document.getElementById("idPayment").value;
       var pickerVal = document.getElementById("demo-datepicker").value;
   
       var date1 = pickerVal.split(" to ")[0];
       var date2 = pickerVal.split(" to ")[1];
   
       orderList.filter(function (data) {
           matchData = new DOMParser().parseFromString(
               data.values().status,
               "text/html"
           );
           var status = matchData.body.firstElementChild.innerHTML;
           var statusFilter = false;
           var paymentFilter = false;
           var dateFilter = false;
   
           if (status == "all" || isstatus == "all") {
               statusFilter = true;
           } else {
               statusFilter = status == isstatus;
           }
   
           if (data.values().payment == "all" || payment == "all") {
               paymentFilter = true;
           } else {
               paymentFilter = data.values().payment == payment;
           }
   
           if (
               new Date(data.values().date.slice(0, 12)) >= new Date(date1) &&
               new Date(data.values().date.slice(0, 12)) <= new Date(date2)
           ) {
               dateFilter = true;
           } else {
               dateFilter = false;
           }
   
           if (statusFilter && paymentFilter && dateFilter) {
               return statusFilter && paymentFilter && dateFilter;
           } else if (statusFilter && paymentFilter && pickerVal == "") {
               return statusFilter && paymentFilter;
           } else if (paymentFilter && dateFilter && pickerVal == "") {
               return paymentFilter && dateFilter;
           }
       });
       orderList.update();
   }