Skip to content

Commit

Permalink
feat: datatable jQuery minimal version
Browse files Browse the repository at this point in the history
  • Loading branch information
@zuramai
zuramai committed Apr 25, 2023
1 parent ff23fec commit 4e06a68
Show file tree
Hide file tree
Showing 5 changed files with 303 additions and 6 deletions.
9 changes: 9 additions & 0 deletions src/assets/scss/pages/datatables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,12 @@ table.dataTable td {
.page-item.active .page-link {
color: white !important;
}
.datatable-minimal div.dataTables_wrapper div.dataTables_paginate ul.pagination {
justify-content: flex-end !important;
}
.datatable-minimal div.dataTables_wrapper div.dataTables_filter {
text-align: right;
}
div.dataTables_wrapper div.dataTables_info {
padding-top: .4em
}
18 changes: 17 additions & 1 deletion src/assets/static/js/pages/datatables.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,20 @@
let jquery_datatable = $("#table1").DataTable()
let jquery_datatable = $("#table1").DataTable({
responsive: true
})
let customized_datatable = $("#table2").DataTable({
responsive: true,
pagingType: 'simple',
dom:
"<'row'<'col-3'l><'col-9'f>>" +
"<'row dt-row'<'col-sm-12'tr>>" +
"<'row'<'col-4'i><'col-8'p>>",
"language": {
"info": "Page _PAGE_ of _PAGES_",
"lengthMenu": "_MENU_ ",
"search": "",
"searchPlaceholder": "Search.."
}
})

const setTableColor = () => {
document.querySelectorAll('.dataTables_paginate .pagination').forEach(dt => {
Expand Down
271 changes: 269 additions & 2 deletions src/table-datatable-jquery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,276 @@ <h3>DataTable jQuery</h3>
</div>
</div>

<!-- Minimal jQuery Datatable start -->
<section class="section">
<div class="card">
<div class="card-header">
<h5 class="card-title">
Minimal jQuery Datatable
</h5>
</div>
<div class="card-body">
<div class="table-responsive datatable-minimal">
<table class="table" id="table2">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Graiden</td>
<td>[email protected]</td>
<td>076 4820 8838</td>
<td>Offenburg</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Dale</td>
<td>[email protected]</td>
<td>0500 527693</td>
<td>New Quay</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Nathaniel</td>
<td>[email protected]</td>
<td>(012165) 76278</td>
<td>Grumo Appula</td>
<td>
<span class="badge bg-danger">Inactive</span>
</td>
</tr>
<tr>
<td>Darius</td>
<td>[email protected]</td>
<td>0309 690 7871</td>
<td>Ways</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Oleg</td>
<td>[email protected]</td>
<td>0500 441046</td>
<td>Rossignol</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Kermit</td>
<td>[email protected]</td>
<td>(01653) 27844</td>
<td>Patna</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Jermaine</td>
<td>[email protected]</td>
<td>0800 528324</td>
<td>Mold</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Ferdinand</td>
<td>[email protected]</td>
<td>(016977) 4107</td>
<td>Marlborough</td>
<td>
<span class="badge bg-danger">Inactive</span>
</td>
</tr>
<tr>
<td>Kuame</td>
<td>[email protected]</td>
<td>(0151) 561 8896</td>
<td>Tresigallo</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Deacon</td>
<td>[email protected]</td>
<td>07740 599321</td>
<td>Karapınar</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Channing</td>
<td>[email protected]</td>
<td>0845 46 49</td>
<td>Warrnambool</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Aladdin</td>
<td>[email protected]</td>
<td>0800 1111</td>
<td>Bothey</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Cruz</td>
<td>[email protected]</td>
<td>07624 944915</td>
<td>Shikarpur</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Keegan</td>
<td>[email protected]</td>
<td>0800 200103</td>
<td>Assen</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Ray</td>
<td>[email protected]</td>
<td>(0112) 896 6829</td>
<td>Hofors</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Maxwell</td>
<td>[email protected]</td>
<td>0334 836 4028</td>
<td>Thane</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Carter</td>
<td>[email protected]</td>
<td>07079 826350</td>
<td>Biez</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Stone</td>
<td>[email protected]</td>
<td>0800 1111</td>
<td>Olivar</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Berk</td>
<td>[email protected]</td>
<td>(0101) 043 2822</td>
<td>Sanquhar</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Philip</td>
<td>[email protected]</td>
<td>0500 571108</td>
<td>Okara</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Kibo</td>
<td>[email protected]</td>
<td>07624 682306</td>
<td>La Cisterna</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Bruno</td>
<td>[email protected]</td>
<td>07624 869434</td>
<td>Rocca d"Arce</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Leonard</td>
<td>[email protected]</td>
<td>0800 1111</td>
<td>Lobbes</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Hamilton</td>
<td>[email protected]</td>
<td>0800 256 8788</td>
<td>Sanzeno</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Harding</td>
<td>[email protected]</td>
<td>0800 1111</td>
<td>Obaix</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
<tr>
<td>Emmanuel</td>
<td>[email protected]</td>
<td>(016977) 8208</td>
<td>Saint-Remy-Geest</td>
<td>
<span class="badge bg-success">Active</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

</section>
<!-- Minimal jQuery Datatable end -->
<!-- Basic Tables start -->
<section class="section">
<div class="card">
<div class="card-header">
jQuery Datatable
<h5 class="card-title">
jQuery Datatable
</h5>
</div>
<div class="card-body">
<div class="table-responsive">
Expand Down Expand Up @@ -282,6 +547,7 @@ <h3>DataTable jQuery</h3>

</section>
<!-- Basic Tables end -->

</div>
{% endblock %}
{% block styles %}
Expand All @@ -290,6 +556,7 @@ <h3>DataTable jQuery</h3>
{% endblock %}
{% block js %}
<script src="assets/extensions/jquery/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-1.12.1/datatables.min.js"></script>
<script src="assets/extensions/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="assets/extensions/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script src="assets/static/js/pages/datatables.js"></script>
{% endblock %}
4 changes: 3 additions & 1 deletion src/table-datatable.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ <h3>DataTable</h3>
<section class="section">
<div class="card">
<div class="card-header">
Simple Datatable
<h5 class="card-title">
Simple Datatable
</h5>
</div>
<div class="card-body">
<table class="table table-striped" id="table1">
Expand Down
7 changes: 5 additions & 2 deletions vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,10 @@ const getVariables = (mode) => {
}

// Modules and extensions
// If the value is true, then it will copy the files inside the `dist` folders
// But if the value is false, it will copy the entire module files and folders
const modulesToCopy = {
"@icon/dripicons": false,
"@icon/dripicons": false, // With dist folder = false
"@fortawesome/fontawesome-free": false,
"rater-js": false,
"bootstrap-icons": false,
Expand All @@ -68,8 +70,9 @@ const modulesToCopy = {
quill: true,
tinymce: false,
"toastify-js": false,
"datatables.net": false,
"datatables.net-bs5": false,
"simple-datatables": true, // With dist folder = true
"simple-datatables": true,
jsvectormap: true,
}

Expand Down

0 comments on commit 4e06a68

Please sign in to comment.