style: add plugin datatable & filter
parent
a019c3d633
commit
ada0a428ee
|
|
@ -3,11 +3,105 @@
|
||||||
namespace BankSampahApp.Areas.Dinas.Controllers
|
namespace BankSampahApp.Areas.Dinas.Controllers
|
||||||
{
|
{
|
||||||
[Area("Dinas")]
|
[Area("Dinas")]
|
||||||
|
[Route("Dinas/[controller]/[action]")]
|
||||||
public class DataBankSampahController : Controller
|
public class DataBankSampahController : Controller
|
||||||
{
|
{
|
||||||
public IActionResult Index()
|
public IActionResult Index()
|
||||||
{
|
{
|
||||||
return View();
|
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= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||||
|
aksi = "<div class=\"flex gap-2\">" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||||
|
"</div>",
|
||||||
|
},
|
||||||
|
new {
|
||||||
|
nama = "Bank Sampah Cinta Lingkungan",
|
||||||
|
kabupaten = "Kota Adm Jakarta Timur",
|
||||||
|
kecamatan = "Matraman",
|
||||||
|
kelurahan = "Pancoran",
|
||||||
|
jenis = "BSU",
|
||||||
|
kategori = "Warga",
|
||||||
|
status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||||
|
aksi = "<div class=\"flex gap-2\">" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||||
|
"</div>",
|
||||||
|
},
|
||||||
|
new {
|
||||||
|
nama = "Bank Sampah Bersih Jaya",
|
||||||
|
kabupaten = "Kota Adm Jakarta Timur",
|
||||||
|
kecamatan = "Kramat Jati",
|
||||||
|
kelurahan = "Kembangan",
|
||||||
|
jenis = "BSU",
|
||||||
|
kategori = "Warga",
|
||||||
|
status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||||
|
aksi = "<div class=\"flex gap-2\">" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||||
|
"</div>",
|
||||||
|
},
|
||||||
|
new {
|
||||||
|
nama = "Bank Sampah Mandiri",
|
||||||
|
kabupaten = "Kota Adm Jakarta Timur",
|
||||||
|
kecamatan = "Pulogadung",
|
||||||
|
kelurahan = "Senen",
|
||||||
|
jenis = "BSU",
|
||||||
|
kategori = "Warga",
|
||||||
|
status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||||
|
aksi = "<div class=\"flex gap-2\">" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||||
|
"</div>",
|
||||||
|
},
|
||||||
|
new {
|
||||||
|
nama = "Bank Sampah Roda Hijau",
|
||||||
|
kabupaten = "Kota Adm Jakarta Timur",
|
||||||
|
kecamatan = "Cakung",
|
||||||
|
kelurahan = "Kebayoran Baru",
|
||||||
|
jenis = "BSU",
|
||||||
|
kategori = "Warga",
|
||||||
|
status= "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||||
|
aksi = "<div class=\"flex gap-2\">" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||||
|
"</div>",
|
||||||
|
},
|
||||||
|
new {
|
||||||
|
nama = "Bank Sampah Karya Bersama",
|
||||||
|
kabupaten = "Kota Adm Jakarta Timur",
|
||||||
|
kecamatan = "Jatinegara",
|
||||||
|
kelurahan = "Menteng",
|
||||||
|
jenis = "BSU",
|
||||||
|
kategori = "Warga",
|
||||||
|
status= "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||||
|
aksi = "<div class=\"flex gap-2\">" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
|
||||||
|
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||||
|
"</div>",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
var response = new
|
||||||
|
{
|
||||||
|
data = data
|
||||||
|
};
|
||||||
|
|
||||||
|
return Json(response);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,23 +21,29 @@
|
||||||
<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
|
<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
|
||||||
<div class="modal-box w-full sm:max-w-sm">
|
<div class="modal-box w-full sm:max-w-sm">
|
||||||
<h3 class="text-lg font-bold">Filter</h3>
|
<h3 class="text-lg font-bold">Filter</h3>
|
||||||
<form action="#" method="get">
|
<form id="formFilter" onsubmit="applyFilter(event)">
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">Jenis Bank Sampah</legend>
|
<legend class="fieldset-legend">Jenis Bank Sampah</legend>
|
||||||
<select class="select w-full">
|
<select id="filterJenis" class="select w-full">
|
||||||
<option disabled selected>Pilih salah satu</option>
|
<option value="">Semua</option>
|
||||||
|
<option value="BSU">BSU</option>
|
||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">Kategori Bank Sampah</legend>
|
<legend class="fieldset-legend">Kategori Bank Sampah</legend>
|
||||||
<select class="select w-full">
|
<select id="filterKategori" class="select w-full">
|
||||||
<option disabled selected>Pilih salah satu</option>
|
<option value="">Semua</option>
|
||||||
|
<option value="Warga">Warga</option>
|
||||||
|
<option value="Sekolah">Sekolah</option>
|
||||||
|
<option value="Perusahaan">Perusahaan</option>
|
||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="fieldset">
|
<fieldset class="fieldset">
|
||||||
<legend class="fieldset-legend">Status Bank Sampah</legend>
|
<legend class="fieldset-legend">Status Bank Sampah</legend>
|
||||||
<select class="select w-full">
|
<select id="filterStatus" class="select w-full">
|
||||||
<option disabled selected>Pilih salah satu</option>
|
<option value="">Semua</option>
|
||||||
|
<option value="Disetujui">Disetujui</option>
|
||||||
|
<option value="Belum Disetujui">Belum Disetujui</option>
|
||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<div class="modal-action">
|
<div class="modal-action">
|
||||||
|
|
@ -53,159 +59,75 @@
|
||||||
|
|
||||||
<div class="card bg-white">
|
<div class="card bg-white">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
<partial name="~/Areas/Shared/Components/Table/_Control.cshtml" />
|
<div class="w-full">
|
||||||
<div class="overflow-x-auto">
|
<table class="table-zebra table w-full" id="example">
|
||||||
<table class="table-zebra table">
|
|
||||||
<!-- head -->
|
<!-- head -->
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th class="w-[5%]">No</th>
|
||||||
<th>Nama Bank Sampah</th>
|
<th class="w-[20%]">Nama Bank Sampah</th>
|
||||||
<th>Kabupaten</th>
|
<th class="w-[15%]">Kabupaten</th>
|
||||||
<th>Kecamatan</th>
|
<th class="w-[15%]">Kecamatan</th>
|
||||||
<th>Kelurahan</th>
|
<th class="w-[15%]">Kelurahan</th>
|
||||||
<th>Jenis Bank Sampah</th>
|
<th class="w-[5%]">Jenis Bank Sampah</th>
|
||||||
<th>Kategori Bank Sampah</th>
|
<th class="w-[5%]">Kategori Bank Sampah</th>
|
||||||
<th>Status</th>
|
<th class="w-[10%]">Status</th>
|
||||||
<th>Aksi</th>
|
<th class="w-[10%]">Aksi</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
|
||||||
<th>1</th>
|
|
||||||
<td>Bank Sampah Hijau Sej...</td>
|
|
||||||
<td>Kota Adm Jakar...</td>
|
|
||||||
<td>Cipayung</td>
|
|
||||||
<td>Kebon Jeruk</td>
|
|
||||||
<td>BSU</td>
|
|
||||||
<td>Warga</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-success badge-soft rounded-full">
|
|
||||||
Disetujui
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
|
|
||||||
<i class="ph ph-note-pencil"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
|
|
||||||
<i class="ph ph-trash"></i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>2</th>
|
|
||||||
<td>Bank Sampah Cinta Lin...</td>
|
|
||||||
<td>Kota Adm Jakar...</td>
|
|
||||||
<td>Matraman</td>
|
|
||||||
<td>Pancoran</td>
|
|
||||||
<td>BSU</td>
|
|
||||||
<td>Warga</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-success badge-soft rounded-full">
|
|
||||||
Disetujui
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
|
|
||||||
<i class="ph ph-note-pencil"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
|
|
||||||
<i class="ph ph-trash"></i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>3</th>
|
|
||||||
<td>Bank Sampah Bersih Ja...</td>
|
|
||||||
<td>Kota Adm Jakar...</td>
|
|
||||||
<td>Kramat Jati</td>
|
|
||||||
<td>Kembangan</td>
|
|
||||||
<td>BSU</td>
|
|
||||||
<td>Warga</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-success badge-soft rounded-full">
|
|
||||||
Disetujui
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
|
|
||||||
<i class="ph ph-note-pencil"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
|
|
||||||
<i class="ph ph-trash"></i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>4</th>
|
|
||||||
<td>Bank Sampah Mandiri</td>
|
|
||||||
<td>Kota Adm Jakar...</td>
|
|
||||||
<td>Pulogadung</td>
|
|
||||||
<td>Sene</td>
|
|
||||||
<td>BSU</td>
|
|
||||||
<td>Warga</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-success badge-soft rounded-full">
|
|
||||||
Disetujui
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
|
|
||||||
<i class="ph ph-note-pencil"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
|
|
||||||
<i class="ph ph-trash"></i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>5</th>
|
|
||||||
<td>Bank Sampah Roda Hij...</td>
|
|
||||||
<td>Kota Adm Jakar...</td>
|
|
||||||
<td>Cakung</td>
|
|
||||||
<td>Kebayoran Baru</td>
|
|
||||||
<td>BSU</td>
|
|
||||||
<td>Warga</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-error badge-soft rounded-full">
|
|
||||||
Belum Disetujui
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
|
|
||||||
<i class="ph ph-note-pencil"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
|
|
||||||
<i class="ph ph-trash"></i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>6</th>
|
|
||||||
<td>Bank Sampah Karya Be...</td>
|
|
||||||
<td>Kota Adm Jakar...</td>
|
|
||||||
<td>Jatinegara</td>
|
|
||||||
<td>Menteng</td>
|
|
||||||
<td>BSU</td>
|
|
||||||
<td>Warga</td>
|
|
||||||
<td>
|
|
||||||
<div class="badge badge-error badge-soft rounded-full">
|
|
||||||
Belum Disetujui
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
|
|
||||||
<i class="ph ph-note-pencil"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
|
|
||||||
<i class="ph ph-trash"></i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<partial name="~/Areas/Shared/Components/Table/_Pagination.cshtml" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
|
||||||
|
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
|
||||||
|
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var table;
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
table = new DataTable('#example', {
|
||||||
|
ajax: '/Dinas/DataBankSampah/Table',
|
||||||
|
scrollX: true,
|
||||||
|
autoWidth: false,
|
||||||
|
initComplete: function () {
|
||||||
|
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
|
||||||
|
{ data: 'nama' },
|
||||||
|
{ data: 'kabupaten' },
|
||||||
|
{ data: 'kecamatan' },
|
||||||
|
{ data: 'kelurahan' },
|
||||||
|
{ data: 'jenis' },
|
||||||
|
{ data: 'kategori' },
|
||||||
|
{ data: 'status' },
|
||||||
|
{ data: 'aksi' },
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function applyFilter(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const jenis = $('#filterJenis').val();
|
||||||
|
const kategori = $('#filterKategori').val();
|
||||||
|
const status = $('#filterStatus').val();
|
||||||
|
|
||||||
|
table.ajax.url('/Dinas/DataBankSampah/Table').load((json) => {
|
||||||
|
const filtered = json.data.filter(row => {
|
||||||
|
return (!jenis || row.jenis === jenis)
|
||||||
|
&& (!kategori || row.kategori === kategori)
|
||||||
|
&& (!status || row.status === status);
|
||||||
|
});
|
||||||
|
|
||||||
|
table.clear();
|
||||||
|
table.rows.add(filtered).draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
modal_filter.close();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -164,4 +164,8 @@
|
||||||
--color-warning: #F79009;
|
--color-warning: #F79009;
|
||||||
--color-error: #F04438;
|
--color-error: #F04438;
|
||||||
--color-secondary: #F15A25;
|
--color-secondary: #F15A25;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.dt-scroll-body thead {
|
||||||
|
visibility: collapse !important;
|
||||||
}
|
}
|
||||||
|
|
@ -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: '<div class="badge badge-soft badge-info rounded-full">' +
|
||||||
|
'<span class="loading loading-bars loading-xs"></span>' +
|
||||||
|
'Sedang memproses' +
|
||||||
|
'</div>',
|
||||||
|
loadingRecords: "Sedang memuat...",
|
||||||
|
select: {
|
||||||
|
rows: {
|
||||||
|
_: '<span class="ms-4 badge badge-sm badge-soft badge-primary">%d baris dipilih</span>',
|
||||||
|
0: "",
|
||||||
|
1: '<span class="ms-4 badge badge-sm badge-soft badge-primary">1 baris dipilih</span>'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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 = $('<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 $('<ul/>').addClass('join').append(buttonEls);
|
||||||
|
};
|
||||||
|
|
||||||
|
DataTable.ext.renderer.layout.tailwindcss = function (settings, container, items) {
|
||||||
|
var row = $('<div/>', {
|
||||||
|
"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';
|
||||||
|
}
|
||||||
|
|
||||||
|
$('<div/>', {
|
||||||
|
id: val.id || null,
|
||||||
|
"class": klass + ' ' + (val.className || '')
|
||||||
|
})
|
||||||
|
.append(val.contents)
|
||||||
|
.appendTo(row);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return DataTable;
|
||||||
|
}));
|
||||||
Loading…
Reference in New Issue