198 lines
9.8 KiB
Plaintext
198 lines
9.8 KiB
Plaintext
- var datatable = true;
|
|
- var page_datatable = true;
|
|
- var theme_customizer = 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
|
|
| Ajax DataTables
|
|
ol.breadcrumb
|
|
li.breadcrumb-item
|
|
a(href='index.html')
|
|
| Home
|
|
li.breadcrumb-item Tables
|
|
li.breadcrumb-item Data Tables
|
|
li.breadcrumb-item.active AJAX
|
|
.col-sm-6
|
|
include ../../components/bookmark
|
|
// Container-fluid starts
|
|
.container-fluid
|
|
.row
|
|
// Ajax data source array start
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Ajax Data Source (Arrays)
|
|
span
|
|
| The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
|
|
.card-body
|
|
.table-responsive
|
|
table#ajax-data-array.display.datatables
|
|
thead
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
tfoot
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
// Ajax data source array end
|
|
// Ajax data source array start
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Ajax data source (Objects)
|
|
span
|
|
| The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
|
|
.card-body
|
|
.table-responsive
|
|
table#ajax-data-object.display.datatables
|
|
thead
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
tfoot
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
// Ajax data source array end
|
|
// Ajax Nested object data start
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Nested object data (objects)
|
|
span
|
|
| The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:
|
|
.card-body
|
|
.table-responsive
|
|
table#ajax-data-nested-object.display.datatables
|
|
thead
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
tfoot
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
// Ajax Nested object data end
|
|
// Ajax Orthogonal data start
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Orthogonal data
|
|
span
|
|
| In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example is:
|
|
.card-body
|
|
.table-responsive
|
|
table#orthogonal-data.display.datatables
|
|
thead
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
tfoot
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
// Ajax Orthogonal data end
|
|
// Ajax Generated content for a column start
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Generated content for a column
|
|
span In some tables you might wish to have some content generated automatically.
|
|
.card-body
|
|
.table-responsive
|
|
table#auto-generate-content.display.datatables
|
|
thead
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
tfoot
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
// Ajax Generated content for a column end
|
|
// Ajax Deferred rendering for speed start
|
|
.col-sm-12
|
|
.card
|
|
.card-header
|
|
h5 Deferred rendering for speed
|
|
span
|
|
| The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit significantly from simply enabling this parameter.
|
|
.card-body
|
|
.table-responsive
|
|
table#render-datatable.display.datatables
|
|
thead
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
tfoot
|
|
tr
|
|
th Name
|
|
th Position
|
|
th Office
|
|
th Age
|
|
th Start date
|
|
th Salary
|
|
// Container-fluid Ends
|
|
include ../../components/footer
|
|
include ../../components/footer-files
|