79 lines
3.1 KiB
Plaintext
79 lines
3.1 KiB
Plaintext
- var theme_customizer = true;
|
|
- var jsgrid = true;
|
|
- var sidebar = true;
|
|
- var slick = true;
|
|
- var header_slider = true;
|
|
- var animate = true;
|
|
- var scrollbar = true;
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
include ../../components/taptop
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper.compact-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-title
|
|
.row
|
|
.col-6
|
|
h3
|
|
| JS Grid Tables
|
|
|
|
.col-6
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
svg.stroke-icon
|
|
use(href='../assets/svg/icon-sprite.svg#stroke-home')
|
|
li.breadcrumb-item Tables
|
|
li.breadcrumb-item.active JS Grid Tables
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h3.mb-3 Basic Scenario
|
|
span
|
|
| Grid with filtering, editing, inserting, deleting, sorting and paging. Data provided by controller.
|
|
.card-body
|
|
#basicScenario.basic_table
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h3.mb-3 Sorting Scenario
|
|
span
|
|
| Sorting can be done not only with column header interaction, but also with sort method.
|
|
.card-body
|
|
.sort-panel.mb-3
|
|
label
|
|
| Sorting Field:
|
|
select#sortingField.btn.btn-primary.dropdown-toggle.btn-md.pe-5
|
|
option Id
|
|
option Product
|
|
option Order Id
|
|
option Price
|
|
option Quantity
|
|
option Shipped
|
|
option Total
|
|
.d-inline
|
|
button#sort.btn.btn-md.btn-secondary(type='button') Sort
|
|
#sorting-table.js-shorting
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h3.mb-3 Batch Delete
|
|
span
|
|
| Cell content of every column can be customized with itemTemplate, headerTemplate, filterTemplate and insertTemplate functions specified in field config. This example shows how to implement batch deleting with custom field for selecting items.
|
|
.card-body
|
|
#batchDelete
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|