From ada0a428eebf8a065cd10214c0099bc93d4570e6 Mon Sep 17 00:00:00 2001 From: Yuri Dimas Date: Mon, 3 Nov 2025 16:37:09 +0700 Subject: [PATCH] style: add plugin datatable & filter --- .../Controllers/DataBankSampahController.cs | 94 ++++++++ Areas/Dinas/Views/DataBankSampah/Index.cshtml | 228 ++++++------------ wwwroot/css/input.css | 4 + .../datatables/dataTables.tailwindcss.js | 201 +++++++++++++++ 4 files changed, 374 insertions(+), 153 deletions(-) create mode 100644 wwwroot/plugins/datatables/dataTables.tailwindcss.js diff --git a/Areas/Dinas/Controllers/DataBankSampahController.cs b/Areas/Dinas/Controllers/DataBankSampahController.cs index c82b126..2fc764c 100644 --- a/Areas/Dinas/Controllers/DataBankSampahController.cs +++ b/Areas/Dinas/Controllers/DataBankSampahController.cs @@ -3,11 +3,105 @@ namespace BankSampahApp.Areas.Dinas.Controllers { [Area("Dinas")] + [Route("Dinas/[controller]/[action]")] public class DataBankSampahController : Controller { public IActionResult Index() { return View(); } + + [HttpGet] + public IActionResult Table() + { + var data = new[] + { + new { + nama = "Bank Sampah Hijau Sejahtera", + kabupaten = "Kota Adm Jakarta Timur", + kecamatan = "Cipayung", + kelurahan = "Kebon Jeruk", + jenis = "BSU", + kategori = "Warga", + status= "
Disetujui
", + aksi = "
" + + "" + + "" + + "
", + }, + new { + nama = "Bank Sampah Cinta Lingkungan", + kabupaten = "Kota Adm Jakarta Timur", + kecamatan = "Matraman", + kelurahan = "Pancoran", + jenis = "BSU", + kategori = "Warga", + status= "
Disetujui
", + aksi = "
" + + "" + + "" + + "
", + }, + new { + nama = "Bank Sampah Bersih Jaya", + kabupaten = "Kota Adm Jakarta Timur", + kecamatan = "Kramat Jati", + kelurahan = "Kembangan", + jenis = "BSU", + kategori = "Warga", + status= "
Disetujui
", + aksi = "
" + + "" + + "" + + "
", + }, + new { + nama = "Bank Sampah Mandiri", + kabupaten = "Kota Adm Jakarta Timur", + kecamatan = "Pulogadung", + kelurahan = "Senen", + jenis = "BSU", + kategori = "Warga", + status= "
Disetujui
", + aksi = "
" + + "" + + "" + + "
", + }, + new { + nama = "Bank Sampah Roda Hijau", + kabupaten = "Kota Adm Jakarta Timur", + kecamatan = "Cakung", + kelurahan = "Kebayoran Baru", + jenis = "BSU", + kategori = "Warga", + status= "
Belum Disetujui
", + aksi = "
" + + "" + + "" + + "
", + }, + new { + nama = "Bank Sampah Karya Bersama", + kabupaten = "Kota Adm Jakarta Timur", + kecamatan = "Jatinegara", + kelurahan = "Menteng", + jenis = "BSU", + kategori = "Warga", + status= "
Belum Disetujui
", + aksi = "
" + + "" + + "" + + "
", + }, + }; + + var response = new + { + data = data + }; + + return Json(response); + } } } diff --git a/Areas/Dinas/Views/DataBankSampah/Index.cshtml b/Areas/Dinas/Views/DataBankSampah/Index.cshtml index f924528..e971ee3 100644 --- a/Areas/Dinas/Views/DataBankSampah/Index.cshtml +++ b/Areas/Dinas/Views/DataBankSampah/Index.cshtml @@ -21,23 +21,29 @@

Filter

-
+
Jenis Bank Sampah - + +
Kategori Bank Sampah - + + + +
Status Bank Sampah - + + +
@@ -53,159 +59,75 @@
- -
- +
+
- - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nama Bank SampahKabupatenKecamatanKelurahanJenis Bank SampahKategori Bank SampahStatusAksiNoNama Bank SampahKabupatenKecamatanKelurahanJenis Bank SampahKategori Bank SampahStatusAksi
1Bank Sampah Hijau Sej...Kota Adm Jakar...CipayungKebon JerukBSUWarga -
- Disetujui -
- 		- - - - - - -
2Bank Sampah Cinta Lin...Kota Adm Jakar...MatramanPancoranBSUWarga -
- Disetujui -
- 		- - - - - - -
3Bank Sampah Bersih Ja...Kota Adm Jakar...Kramat JatiKembanganBSUWarga -
- Disetujui -
- 		- - - - - - -
4Bank Sampah MandiriKota Adm Jakar...PulogadungSeneBSUWarga -
- Disetujui -
- 		- - - - - - -
5Bank Sampah Roda Hij...Kota Adm Jakar...CakungKebayoran BaruBSUWarga -
- Belum Disetujui -
- 		- - - - - - -
6Bank Sampah Karya Be...Kota Adm Jakar...JatinegaraMentengBSUWarga -
- Belum Disetujui -
- 		- - - - - - -
-
-
\ No newline at end of file +
+ + + + + \ No newline at end of file diff --git a/wwwroot/css/input.css b/wwwroot/css/input.css index 2ac3c89..b4d4e9c 100644 --- a/wwwroot/css/input.css +++ b/wwwroot/css/input.css @@ -164,4 +164,8 @@ --color-warning: #F79009; --color-error: #F04438; --color-secondary: #F15A25; +} + +div.dt-scroll-body thead { + visibility: collapse !important; } \ No newline at end of file diff --git a/wwwroot/plugins/datatables/dataTables.tailwindcss.js b/wwwroot/plugins/datatables/dataTables.tailwindcss.js new file mode 100644 index 0000000..6f54983 --- /dev/null +++ b/wwwroot/plugins/datatables/dataTables.tailwindcss.js @@ -0,0 +1,201 @@ +/*! DataTables Tailwind CSS integration + */ + +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery', 'datatables.net'], function ($) { + return factory($, window, document); + }); + } + else if (typeof exports === 'object') { + // CommonJS + var jq = require('jquery'); + var cjsRequires = function (root, $) { + if (!$.fn.dataTable) { + require('datatables.net')(root, $); + } + }; + + if (typeof window === 'undefined') { + module.exports = function (root, $) { + if (!root) { + // CommonJS environments without a window global must pass a + // root. This will give an error otherwise + root = window; + } + + if (!$) { + $ = jq(root); + } + + cjsRequires(root, $); + return factory($, root, root.document); + }; + } + else { + cjsRequires(window, jq); + module.exports = factory(jq, window, window.document); + } + } + else { + // Browser + factory(jQuery, window, document); + } +}(function ($, window, document) { + 'use strict'; + var DataTable = $.fn.dataTable; + + + + /* + * This is a tech preview of Tailwind CSS integration with DataTables. + */ + + // Set the defaults for DataTables initialisation + $.extend(true, DataTable.defaults, { + renderer: 'tailwindcss', + dom: "<'grid grid-cols-1 bg-gray-50 rounded-t-md py-3 px-2 lg:grid-cols-12 mb-1 items-center space-y-4 lg:space-y-0'<'lg:col-span-9'l><'lg:col-span-3'f><'lg:justify-self-center'B>>" + + "rt" + + "<'flex flex-col lg:flex-row items-center py-2 px-2 lg:justify-between pt-4'ip>", + language: { + processing: '
' + + '' + + 'Sedang memproses' + + '
', + loadingRecords: "Sedang memuat...", + select: { + rows: { + _: '%d baris dipilih', + 0: "", + 1: '1 baris dipilih' + } + }, + lengthMenu: "Tampilkan _MENU_ data", + search: "", + searchPlaceholder: "Cari data disini...", + emptyTable: "Tidak ada data yang tersedia pada tabel ini", + info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data", + infoEmpty: "Menampilkan 0 sampai 0 dari 0 data", + infoFiltered: "(disaring dari _MAX_ data keseluruhan)", + zeroRecords: "Tidak ditemukan data yang sesuai", + }, + }); + + + // Default class modification + $.extend(true, DataTable.ext.classes, { + container: "dt-container dt-tailwindcss p-2", + empty: { + row: 'text-center' + }, + info: { + container: 'dt-info' + }, + search: { + container: "input input-sm rounded-full", + input: "", + }, + length: { + select: "select select-sm w-auto", + }, + processing: { + container: "dt-processing" + }, + paging: { + active: 'bg-gray-100', + notActive: 'text-gray-600 hover:bg-gray-100', + button: 'join-item btn btn-ghost btn-sm', + first: 'rounded-l-lg', + last: 'rounded-r-lg', + enabled: 'bg-gray/50 rounded text-black', + notEnabled: 'btn-disabled disabled:bg-gray/50' + }, + order: { + canAsc: 'dt-orderable-asc', + canDesc: 'dt-orderable-desc', + isAsc: 'dt-ordering-asc', + isDesc: 'dt-ordering-desc', + none: 'dt-orderable-none', + position: 'sorting_' + }, + table: 'dataTable min-w-full text-sm align-middle whitespace-nowrap', + thead: { + row: 'bg-white', + cell: 'px-3 py-4 font-semibold text-left' + }, + tbody: { + row: 'even:bg-gray-50', + cell: 'p-3' + }, + tfoot: { + row: 'even:bg-gray-50', + cell: 'p-3 text-left' + }, + }); + + DataTable.ext.renderer.pagingButton.tailwindcss = function (settings, buttonType, content, active, disabled) { + var classes = settings.oClasses.paging; + var btnClasses = [classes.button]; + + btnClasses.push(active ? classes.active : classes.notActive); + btnClasses.push(disabled ? classes.notEnabled : classes.enabled); + + var a = $('', { + 'href': disabled ? null : '#', + 'class': btnClasses.join(' ') + }) + .html(content); + + return { + display: a, + clicker: a + }; + }; + + DataTable.ext.renderer.pagingContainer.tailwindcss = function (settings, buttonEls) { + var classes = settings.oClasses.paging; + + buttonEls[0].addClass(classes.first); + buttonEls[buttonEls.length - 1].addClass(classes.last); + + return $('
    ').addClass('join').append(buttonEls); + }; + + DataTable.ext.renderer.layout.tailwindcss = function (settings, container, items) { + var row = $('
    ', { + "class": items.full ? + 'grid grid-cols-1 gap-4 py-2' : + 'flex flex-col lg:flex-row gap-2 lg:justify-between py-2 items-center' + }) + .appendTo(container); + + DataTable.ext.renderer.layout._forLayoutRow(items, function (key, val) { + var klass; + + // Apply start / end (left / right when ltr) margins + if (val.table) { + klass = 'col-span-2'; + } + else if (key === 'start') { + klass = 'justify-self-start'; + } + else if (key === 'end') { + klass = 'col-start-2 justify-self-end'; + } + else { + klass = 'col-span-2 justify-self-center'; + } + + $('
    ', { + id: val.id || null, + "class": klass + ' ' + (val.className || '') + }) + .append(val.contents) + .appendTo(row); + }); + }; + + + return DataTable; +})); \ No newline at end of file