Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

KTDatatable tailwind


How to migrate from jquery ajax to metronic tailwind?

<script>
var $trx_data_panel = $("#trx_data_panel");
var $modal = $("#modal_body");
jQuery(document).ready(function() {
var start = moment().startOf("year");
var end = moment().endOf("month");
function cb(start, end) {
$("#reportrange span").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
}
var $reportrange = $("#reportrange");
$reportrange.daterangepicker({
startDate: start,
endDate: end,
ranges: {
"Today": [moment(), moment()],
"Bulan Ini": [moment().startOf("month"), moment().endOf("month")],
"Bulan Lalu": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")],
"Tahun Ini": [moment().startOf("year"), moment().endOf("year")],
"Tahun Lalu": [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")]
},
locale: {
format: "YYYY/MM/DD"
}
}, cb);
cb(start, end);
var $type = $("#type");
$("#type").select2({
language: {
noResults: function () {
return $("#_lan_no_results_found").val();
}
}
});
var $id_akun = $("#id_akun");
$("#id_akun").select2({
language: {
noResults: function () {
return $("#_lan_no_results_found").val();
}
}
});
var $id_kategori = $("#id_kategori");
$("#id_kategori").select2({
language: {
noResults: function () {
return $("#_lan_no_results_found").val();
}
}
});
$("#metode_bayar").select2({
language: {
noResults: function () {
return $("#_lan_no_results_found").val();
}
}
});
var $kontak = $("#kontak");
var $deskripsi = $("#deskripsi");
var $kode = $("#kode");
var trx_dt = $("#trx_dt").DataTable( {
"serverSide": true,
"processing" : true,
"ajax": {
"url": base_url + "transaksi/jurnal-umum-json/",
"type": "POST",
"data": function ( d ) {
d.type = $type.val();
d.reportrange = $reportrange.val();
d.kontak = $kontak.val();
d.id_akun = $id_akun.val();
d.kode = $kode.val();
d.deskripsi = $deskripsi.val();
}
},
"language": {
"emptyTable": "{$_L["No items to display"]}",
"info": "{$_L["Showing _START_ to _END_ of _TOTAL_ entries"]}",
"infoEmpty": "{$_L["Showing 0 to 0 of 0 entries"]}",
buttons: {
pageLength: "{$_L["Show all"]}"
},
searchPlaceholder: "{__("Search")}"
},
"pageLength": 10,
responsive: false,
dom:
"<"row mb-3"<"col-sm-12 mt-1 col-md-6 d-flex align-items-center justify-content-start"l><"col-sm-12 mt-1 col-md-6 d-flex align-items-center justify-content-end"B>>" +
"<"row"<"col-sm-12"tr>>" +
"<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>",
buttons: [

{
extend: "pdfHtml5",
text: "PDF",
titleAttr: "Generate PDF",
title: "Transaksi Jurnal Umum - PT. Galuh Multidata Solution",
className: "btn-danger-light btn-sm mr-1 mt-1",
footer: true,
orientation: "landscape",
pageSize: "A4",
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8 ]
},
customize: function (doc) {
var rowCount = doc.content[1].table.body.length;
for (i = 1; i < rowCount; i++) {
doc.content[1].table.body[i][5].alignment = "right";
doc.content[1].table.body[i][6].alignment = "right";
doc.content[1].table.body[i][7].alignment = "right";
}
}
},
{
extend: "excelHtml5",
text: "Excel",
titleAttr: "Generate Excel",
className: "btn-success-light btn-sm mr-1 mt-1",
footer: true,
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8 ]
}
},
{
extend: "csvHtml5",
text: "CSV",
titleAttr: "Generate CSV",
footer: true,
className: "btn-primary-light btn-sm mr-1 mt-1"
},
{
extend: "copyHtml5",
text: "Copy",
titleAttr: "Copy to clipboard",
footer: true,
className: "btn-info-light btn-sm mr-1 mt-1"
},
{
extend: "print",
text: "Print",
titleAttr: "Print Table",
footer: true,
className: "btn-secondary-light btn-sm mr-1 mt-1"
}
],
lengthMenu: [
[ 10, 50, 100, -1 ],
[ "10 rows", "50 rows", "100 rows", "Show all" ]
],
"columnDefs": [
{
"targets": 0,
"className": "text-center"
},
{
"targets": 6,
"className": "text-right",
},
{
"targets": 7,
"className": "text-right",
},
{
"targets": 8,
"className": "text-right",
},
],
"order": [[ 0, "desc" ]],
"scrollX": true,
"initComplete": function () {
$trx_data_panel.unblock();
},
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
var intVal = function(i) {
return typeof i === "string" ?
i.replace(/[Rp.,]/g, "") * 1:
typeof i === "number" ?
i : 0;
};
var formatuang = $.fn.dataTable.render.number(".", ",").display;
pageTotal6 = api
.column( 6, { page: "current"} )
.data()
.reduce( function (a, b) {
return formatuang(intVal(a) + intVal(b));
}, 0 );
pageTotal7 = api
.column( 7, { page: "current"} )
.data()
.reduce( function (a, b) {
return formatuang(intVal(a) + intVal(b));
}, 0 );
pageTotal8 = api
.column( 8, { page: "current"} )
.data()
.reduce( function (a, b) {
return formatuang(intVal(a) + intVal(b));
}, 0 );
$( api.column( 6 ).footer() ).html(
"<span class="badge badge-outline badge-outline-success">Rp"+pageTotal6+"</span>"
);
$( api.column( 7 ).footer() ).html(
"<span class="badge badge-outline badge-outline-danger">Rp"+pageTotal7+"</span>"
);
if (pageTotal8 != "0")
{
$( api.column( 8 ).footer() ).html(
"<span class="badge badge-outline badge-outline-danger">Rp"+pageTotal8+"</span>"
);
}else{
$( api.column( 8 ).footer() ).html(
"<span class="badge badge-outline badge-outline-success">Balance</span>"
);
}
}
});
$reportrange.on("change", function(e) {
e.preventDefault();
trx_dt.ajax.reload();
});
$type.on("change", function(e) {
e.preventDefault();
trx_dt.ajax.reload();
});
$id_akun.on("change", function(e) {
e.preventDefault();
ib_dt.ajax.reload();
});
$id_kategori.on("change", function(e) {
e.preventDefault();
trx_dt.ajax.reload();
});
$kontak.on("keyup", function(e) {
e.preventDefault();
trx_dt.ajax.reload();
});
$deskripsi.on("keyup", function(e) {
e.preventDefault();
trx_dt.ajax.reload();
});
$kode.on("keyup", function(e) {
e.preventDefault();
trx_dt.ajax.reload();
});

var _url = $("#_url").val();
$modal.on("click", ".delete", function(e){
e.preventDefault();
var id = this.id;
Swal.fire({
title: "Apakah Anda Yakin?</br>Semua Transaksi Related akan Di hapus juga",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: clx.i18n.yes,
cancelButtonText: clx.i18n.no,
}).then((result) => {
if (result.value) {
var _url = $("#_url").val();
window.location.href = _url + "transaksi/delete-post/" + id;
}
});
});
});
</script>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Hi

Metronic Tailwind uses its own Datatable component, not the DataTables.net plugin. You can refer to the official documentation for implementation details:

https://keenthemes.com/metronic/tailwind/docs/components/datatable

This guide will show you how to set up and use Metronic's native datatable features with Tailwind CSS.



sample respon json

{
"data": [
[
"<a href=\"https:\/\/newbill.gms.net.id\/transaksi\/manage\/14476\"><span class=\"badge badge-outline badge-outline-danger\"><i class=\"fal fa-long-arrow-left\"><\/i> PND-06110<\/span><\/a>",
"23-12-2024",
"<a href=\"https:\/\/newbill.gms.net.id\/akun\/statement\/46\">PEND. LAYANAN INTERNET<\/a>",
"RL-Kredit",
"<a href=\"https:\/\/newbill.gms.net.id\/faktur\/view\/6324\">Pembayaran INV-06110<\/a>",
"<a href=\"https:\/\/newbill.gms.net.id\/kontak\/view\/1659\">Ahmad Saidudin<\/a>",
"0",
"166.500",
"-166.500"
],
[
"<a href=\"https:\/\/newbill.gms.net.id\/transaksi\/manage\/14467\"><span class=\"badge badge-outline badge-outline-success\"><i class=\"fal fa-long-arrow-right\"><\/i> BYR-06107<\/span><\/a>",
"23-12-2024",
"<a href=\"https:\/\/newbill.gms.net.id\/akun\/statement\/4\">BANK BRI PT. GALUH MULTIDATA<\/a>",
"Pendapatan",
"<a href=\"https:\/\/newbill.gms.net.id\/faktur\/view\/6321\">Pembayaran INV-06107<\/a>",
"<a href=\"https:\/\/newbill.gms.net.id\/kontak\/view\/1245\">Nurazizah<\/a>",
"166.500",
"0",
"166.500"
]
],
"draw": 1,
"recordsTotal": 1383470,
"recordsFiltered": 1383470
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(