73 lines
3.5 KiB
Plaintext
73 lines
3.5 KiB
Plaintext
- var theme_customizer = true;
|
|
- var jsgrid = true;
|
|
- var sidebar = true;
|
|
- var scrollbar = true;
|
|
|
|
doctype html
|
|
html(lang='en')
|
|
include ../../components/header-files
|
|
body
|
|
include ../../components/loader
|
|
// page-wrapper Start
|
|
#pageWrapper.page-wrapper
|
|
include ../../components/header
|
|
// Page Body Start
|
|
.page-body-wrapper.horizontal-menu
|
|
include ../../components/sidebar
|
|
.page-body
|
|
.container-fluid
|
|
.page-header
|
|
.row
|
|
.col-sm-6
|
|
h3
|
|
| JS Grid Tables
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Tables
|
|
li.breadcrumb-item.active JS Grid Tables
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 Basic Scenario
|
|
span
|
|
| Grid with filtering, editing, inserting, deleting, sorting and paging. Data provided by controller.
|
|
.card-body
|
|
#basicScenario
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 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-sm
|
|
option Name
|
|
option Age
|
|
option Address
|
|
option Country
|
|
option Married
|
|
.d-inline
|
|
button#sort.btn.btn-sm.btn-secondary(type='button') Sort
|
|
#sorting-table.js-shorting
|
|
.col-sm-12
|
|
.card
|
|
.card-header.pb-0
|
|
h5 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
|