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="~/assets/libs/list.js/list.min.js"></script>
<!-- Pagination js -->
<script src="~/assets/libs/list.pagination.js/list.pagination.min.js"></script>
Initjs (Custom js)
<!-- listjs init -->
<script src="~/assets/js/pages/listjs.init.js"></script
Add Package
Remove Package
Examples
Title | Javascript |
---|---|
Data Attributes + Custom |
|
Existing List |
|
Fuzzy Search |
|
Pagination |
|
To add new field to table
-
Goto table-customer-list.json file and add new field to json
example=>"customer_name": "Mary Cousar"
-
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
-
Goto tables-listjs.html and set attribute data-sort to attribute to th.
example=>data-sort="customer_name"
-
Goto listjs.init.js & at line number 108 ,Get the queryselector of required field.
example=>customerNameField = document.getElementById("customername-field")
-
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
-
listjs.init.js => at line number 227 of edit button functionality
follow the same procedure of add button
-
listjs.init.js => at line number 357 of clearFileds function & add field ad below
customerNameField.value = "";
To delete field from table
-
To Delete a single record
listjs.init.js =>At line number 296 of refreshCallbacks() function
And use removeBtns functionality to delete single record
-
To Delete Multiple records
listjs.init.js => At Line number 363 of deleteMultiple() function
and use deleteMultiple() functionality to remove all records