deving
This commit is contained in:
201
res/assets/js/datatable/datatable-advanced.init.js
Normal file
201
res/assets/js/datatable/datatable-advanced.init.js
Normal file
@@ -0,0 +1,201 @@
|
||||
//
|
||||
// File export //
|
||||
//
|
||||
$("#file_export").DataTable({
|
||||
dom: "Bfrtip",
|
||||
buttons: ["copy", "csv", "excel", "pdf", "print"],
|
||||
});
|
||||
$(
|
||||
".buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel"
|
||||
).addClass("btn btn-primary");
|
||||
|
||||
//
|
||||
// Show / hide columns dynamically //
|
||||
//
|
||||
|
||||
var table = $("#show_hide_col").DataTable({
|
||||
scrollY: "200px",
|
||||
paging: false,
|
||||
});
|
||||
|
||||
$("a.toggle-vis").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get the column API object
|
||||
var column = $("#show_hide_col")
|
||||
.dataTable()
|
||||
.api()
|
||||
.column($(this).attr("data-column"));
|
||||
// Toggle the visibility
|
||||
column.visible(!column.visible());
|
||||
});
|
||||
|
||||
//
|
||||
// Column rendering //
|
||||
//
|
||||
$("#col_render").DataTable({
|
||||
columnDefs: [
|
||||
{
|
||||
// The `data` parameter refers to the data for the cell (defined by the
|
||||
// `data` option, which defaults to the column being worked with, in
|
||||
// this case `data: 0`.
|
||||
render: function (data, type, row) {
|
||||
return data + " (" + row[3] + ")";
|
||||
},
|
||||
targets: 0,
|
||||
},
|
||||
{ visible: false, targets: [3] },
|
||||
],
|
||||
});
|
||||
|
||||
//
|
||||
// Row grouping //
|
||||
//
|
||||
var table = $("#row_group").DataTable({
|
||||
pageLength: 10,
|
||||
columnDefs: [{ visible: false, targets: 2 }],
|
||||
order: [[2, "asc"]],
|
||||
displayLength: 25,
|
||||
drawCallback: function (settings) {
|
||||
var api = this.api();
|
||||
var rows = api.rows({ page: "current" }).nodes();
|
||||
var last = null;
|
||||
|
||||
api
|
||||
.column(2, { page: "current" })
|
||||
.data()
|
||||
.each(function (group, i) {
|
||||
if (last !== group) {
|
||||
$(rows)
|
||||
.eq(i)
|
||||
.before(
|
||||
'<tr class="group"><td colspan="5">' + group + "</td></tr>"
|
||||
);
|
||||
|
||||
last = group;
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Order by the grouping
|
||||
//
|
||||
$("#row_group tbody").on("click", "tr.group", function () {
|
||||
var currentOrder = table.order()[0];
|
||||
if (currentOrder[0] === 2 && currentOrder[1] === "asc") {
|
||||
table.order([2, "desc"]).draw();
|
||||
} else {
|
||||
table.order([2, "asc"]).draw();
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// Multiple table control element //
|
||||
//
|
||||
$("#multi_control").DataTable({
|
||||
dom: '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
|
||||
});
|
||||
|
||||
//
|
||||
// DOM/jquery events //
|
||||
//
|
||||
var table = $("#dom_jq_event").DataTable();
|
||||
|
||||
$("#dom_jq_event tbody").on("click", "tr", function () {
|
||||
var data = table.row(this).data();
|
||||
alert("You clicked on " + data[0] + "'s row");
|
||||
});
|
||||
|
||||
//
|
||||
// Language File //
|
||||
//
|
||||
$("#lang_file").DataTable({
|
||||
language: {
|
||||
url: "../../assets/js/datatable/German.json",
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Complex headers with column visibility //
|
||||
//
|
||||
|
||||
$("#complex_head_col").DataTable({
|
||||
columnDefs: [
|
||||
{
|
||||
visible: false,
|
||||
targets: -1,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
//
|
||||
// Setting defaults //
|
||||
//
|
||||
var defaults = {
|
||||
searching: false,
|
||||
ordering: false,
|
||||
};
|
||||
|
||||
$("#setting_defaults").dataTable($.extend(true, {}, defaults, {}));
|
||||
|
||||
//
|
||||
// Footer callback //
|
||||
//
|
||||
$("#footer_callback").DataTable({
|
||||
footerCallback: function (row, data, start, end, display) {
|
||||
var api = this.api(),
|
||||
data;
|
||||
|
||||
// Remove the formatting to get integer data for summation
|
||||
var intVal = function (i) {
|
||||
return typeof i === "string"
|
||||
? i.replace(/[\$,]/g, "") * 1
|
||||
: typeof i === "number"
|
||||
? i
|
||||
: 0;
|
||||
};
|
||||
|
||||
// Total over all pages
|
||||
total = api
|
||||
.column(4)
|
||||
.data()
|
||||
.reduce(function (a, b) {
|
||||
return intVal(a) + intVal(b);
|
||||
}, 0);
|
||||
|
||||
// Total over this page
|
||||
pageTotal = api
|
||||
.column(4, { page: "current" })
|
||||
.data()
|
||||
.reduce(function (a, b) {
|
||||
return intVal(a) + intVal(b);
|
||||
}, 0);
|
||||
|
||||
// Update footer
|
||||
$(api.column(4).footer()).html(
|
||||
"$" + pageTotal + " ( $" + total + " total)"
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Custom toolbar elements //
|
||||
//
|
||||
|
||||
$("#custom_tool_ele").DataTable({
|
||||
dom: '<"toolbar">frtip',
|
||||
});
|
||||
|
||||
$("div.toolbar").html("<b>Custom tool bar! Text/images etc.</b>");
|
||||
|
||||
//
|
||||
// Row created callback //
|
||||
//
|
||||
$("#row_create_call").DataTable({
|
||||
createdRow: function (row, data, index) {
|
||||
if (data[5].replace(/[\$,]/g, "") * 1 > 150000) {
|
||||
$("td", row).eq(5).addClass("highlight");
|
||||
}
|
||||
},
|
||||
});
|
||||
193
res/assets/js/datatable/datatable-api.init.js
Normal file
193
res/assets/js/datatable/datatable-api.init.js
Normal file
@@ -0,0 +1,193 @@
|
||||
//
|
||||
// Add Row
|
||||
//
|
||||
var t = $("#t_add_row").DataTable();
|
||||
var counter = 1;
|
||||
|
||||
$("#addRow").on("click", function () {
|
||||
t.row
|
||||
.add([
|
||||
counter + ".1",
|
||||
counter + ".2",
|
||||
counter + ".3",
|
||||
counter + ".4",
|
||||
counter + ".5",
|
||||
])
|
||||
.draw(false);
|
||||
|
||||
counter++;
|
||||
});
|
||||
|
||||
// Automatically add a first row of data
|
||||
$("#addRow").click();
|
||||
|
||||
//
|
||||
// Individual column searching (select inputs) //
|
||||
//
|
||||
|
||||
$(".datatable-select-inputs").DataTable({
|
||||
initComplete: function () {
|
||||
this.api()
|
||||
.columns()
|
||||
.every(function () {
|
||||
var column = this;
|
||||
var select = $(
|
||||
'<select class="form-select"><option value="">Select option</option></select>'
|
||||
)
|
||||
.appendTo($(column.footer()).empty())
|
||||
.on("change", function () {
|
||||
var val = $.fn.dataTable.util.escapeRegex($(this).val());
|
||||
|
||||
column.search(val ? "^" + val + "$" : "", true, false).draw();
|
||||
});
|
||||
|
||||
column
|
||||
.data()
|
||||
.unique()
|
||||
.sort()
|
||||
.each(function (d, j) {
|
||||
select.append('<option value="' + d + '">' + d + "</option>");
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Individual column searching (text inputs) //
|
||||
//
|
||||
// Setup - add a text input to each footer cell
|
||||
$(".text-inputs-searching tfoot th").each(function () {
|
||||
var title = $(this).text();
|
||||
$(this).html(
|
||||
'<input type="text" class="form-control" placeholder="Search ' +
|
||||
title +
|
||||
'" />'
|
||||
);
|
||||
});
|
||||
|
||||
// DataTable
|
||||
var tableSearching = $(".text-inputs-searching").DataTable();
|
||||
|
||||
// Apply the search
|
||||
tableSearching.columns().every(function () {
|
||||
var that = this;
|
||||
|
||||
$("input", this.footer()).on("keyup change", function () {
|
||||
if (that.search() !== this.value) {
|
||||
that.search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//
|
||||
// Child rows (show extra / detailed information) //
|
||||
//
|
||||
/* Formatting function for row details - modify as you need */
|
||||
function format(d) {
|
||||
// `d` is the original data object for the row
|
||||
return (
|
||||
'<table class="table" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
|
||||
"<tr>" +
|
||||
"<td>Full name:</td>" +
|
||||
"<td>" +
|
||||
d.name +
|
||||
"</td>" +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>Extension number:</td>" +
|
||||
"<td>" +
|
||||
d.extn +
|
||||
"</td>" +
|
||||
"</tr>" +
|
||||
"<tr>" +
|
||||
"<td>Extra info:</td>" +
|
||||
"<td>And any further details here (images etc)...</td>" +
|
||||
"</tr>" +
|
||||
"</table>"
|
||||
);
|
||||
}
|
||||
|
||||
//=============================================//
|
||||
// -- Child rows
|
||||
//=============================================//
|
||||
var tableChildRows = $(".show-child-rows").DataTable({
|
||||
ajax: "https://api.npoint.io/b9d05e59af5e9db4a3c2",
|
||||
columns: [
|
||||
{
|
||||
className: "details-control",
|
||||
orderable: false,
|
||||
data: null,
|
||||
defaultContent: "",
|
||||
},
|
||||
{ data: "name" },
|
||||
{ data: "position" },
|
||||
{ data: "office" },
|
||||
{ data: "salary" },
|
||||
],
|
||||
order: [[1, "asc"]],
|
||||
});
|
||||
|
||||
//=============================================//
|
||||
// Add event listener for opening and closing details
|
||||
//=============================================//
|
||||
$(".show-child-rows tbody").on("click", "td.details-control", function () {
|
||||
var tr = $(this).closest("tr");
|
||||
var row = tableChildRows.row(tr);
|
||||
|
||||
if (row.child.isShown()) {
|
||||
// This row is already open - close it
|
||||
row.child.hide();
|
||||
tr.removeClass("shown");
|
||||
} else {
|
||||
// Open this row
|
||||
row.child(format(row.data())).show();
|
||||
tr.addClass("shown");
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// Row selection (multiple rows) //
|
||||
//
|
||||
var table1 = $("#row_select").DataTable();
|
||||
|
||||
$("#row_select tbody").on("click", "tr", function () {
|
||||
$(this).toggleClass("selected");
|
||||
});
|
||||
|
||||
$("#button").click(function () {
|
||||
alert(table1.rows(".selected").data().length + " row(s) selected");
|
||||
});
|
||||
|
||||
//
|
||||
// Form Inputs //
|
||||
//
|
||||
|
||||
var table2 = $("#form_inputs").DataTable();
|
||||
|
||||
$(".inputs-submit").click(function () {
|
||||
var data = table2.$("input, select").serialize();
|
||||
alert(
|
||||
"The following data would have been submitted to the server: \n\n" +
|
||||
data.substr(0, 120) +
|
||||
"..."
|
||||
);
|
||||
return false;
|
||||
});
|
||||
|
||||
//
|
||||
// Row selection and deletion (single row) //
|
||||
//
|
||||
var table3 = $("#sing_row_del").DataTable();
|
||||
|
||||
$("#sing_row_del tbody").on("click", "tr", function () {
|
||||
if ($(this).hasClass("selected")) {
|
||||
$(this).removeClass("selected");
|
||||
} else {
|
||||
table3.$("tr.selected").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
}
|
||||
});
|
||||
|
||||
$("#delete-row").click(function () {
|
||||
table3.row(".selected").remove().draw(false);
|
||||
});
|
||||
115
res/assets/js/datatable/datatable-basic.init.js
Normal file
115
res/assets/js/datatable/datatable-basic.init.js
Normal file
@@ -0,0 +1,115 @@
|
||||
/****************************************
|
||||
* Table Responsive *
|
||||
****************************************/
|
||||
$(function () {
|
||||
$("#config-table").DataTable({
|
||||
responsive: true,
|
||||
});
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* Basic Table *
|
||||
****************************************/
|
||||
$("#zero_config").DataTable();
|
||||
|
||||
/****************************************
|
||||
* Default Order Table *
|
||||
****************************************/
|
||||
$("#default_order").DataTable({
|
||||
order: [[3, "desc"]],
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* Multi-column Order Table *
|
||||
****************************************/
|
||||
$("#multi_col_order").DataTable({
|
||||
columnDefs: [
|
||||
{
|
||||
targets: [0],
|
||||
orderData: [0, 1],
|
||||
},
|
||||
{
|
||||
targets: [1],
|
||||
orderData: [1, 0],
|
||||
},
|
||||
{
|
||||
targets: [4],
|
||||
orderData: [4, 0],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* Complex header Table *
|
||||
****************************************/
|
||||
$("#complex_header").DataTable();
|
||||
|
||||
/****************************************
|
||||
* DOM positioning Table *
|
||||
****************************************/
|
||||
$("#DOM_pos").DataTable({
|
||||
dom: '<"top"i>rt<"bottom"flp><"clear">',
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* alternative pagination Table *
|
||||
****************************************/
|
||||
$("#alt_pagination").DataTable({
|
||||
pagingType: "full_numbers",
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* vertical scroll Table *
|
||||
****************************************/
|
||||
$("#scroll_ver").DataTable({
|
||||
scrollY: "300px",
|
||||
scrollCollapse: true,
|
||||
paging: false,
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* vertical scroll,dynamic height Table *
|
||||
****************************************/
|
||||
$("#scroll_ver_dynamic_hei").DataTable({
|
||||
scrollY: "50vh",
|
||||
scrollCollapse: true,
|
||||
paging: false,
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* horizontal scroll Table *
|
||||
****************************************/
|
||||
$("#scroll_hor").DataTable({
|
||||
scrollX: true,
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* vertical & horizontal scroll Table *
|
||||
****************************************/
|
||||
$("#scroll_ver_hor").DataTable({
|
||||
scrollY: 300,
|
||||
scrollX: true,
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* Language - Comma decimal place Table *
|
||||
****************************************/
|
||||
$("#lang_comma_deci").DataTable({
|
||||
language: {
|
||||
decimal: ",",
|
||||
thousands: ".",
|
||||
},
|
||||
});
|
||||
|
||||
/****************************************
|
||||
* Language options Table *
|
||||
****************************************/
|
||||
$("#lang_opt").DataTable({
|
||||
language: {
|
||||
lengthMenu: "Display _MENU_ records per page",
|
||||
zeroRecords: "Nothing found - sorry",
|
||||
info: "Showing page _PAGE_ of _PAGES_",
|
||||
infoEmpty: "No records available",
|
||||
infoFiltered: "(filtered from _MAX_ total records)",
|
||||
},
|
||||
});
|
||||
23
res/assets/js/datatable/datatable.init.js
Normal file
23
res/assets/js/datatable/datatable.init.js
Normal file
@@ -0,0 +1,23 @@
|
||||
$(function () {
|
||||
// responsive table
|
||||
$('#config-table').DataTable({
|
||||
responsive: true
|
||||
});
|
||||
|
||||
$("#all-student").DataTable({
|
||||
columnDefs: [{
|
||||
targets: [0],
|
||||
orderData: [0, 1],
|
||||
},
|
||||
{
|
||||
targets: [1],
|
||||
orderData: [1, 0],
|
||||
},
|
||||
{
|
||||
targets: [4],
|
||||
orderData: [4, 0],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user