Is it possible to use DataTables to split an existing financial record into subcategories and amounts?
Imagine I have a DB containing Date, Merchant and Amount. Now I want to split a transaction with a SubAmount and Item. There could be multiple SubAmounts/Items per each transaction.
Quicken has this functionality. I'm trying to figure out if it can be done in DataTables.
Any thoughts?
Here is my DataTable code:
var datatable = $('#data_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: 'processedTableData.php',
data: function(data) {
data.dateRange = $('#date_range_selector').val()
},
dataSrc: function(response) {
for (let i = 0; i < response.data.length; i++) {
var dateStr = response.data[i][4]
dateStr = dateStr.replace(' ', 'T')
dateStr += 'Z'
var date = new Date(dateStr)
response.data[i][4] = date.toLocaleString()
}
console.log(response)
return response
}
},
order: [[4, 'desc']]
})
response is being logged to the console and all of the data is right, but the table is empty and says
No matching records found
I just don't know what the issue is, it works when I don't put the dataSrc function there.
Hi, I am new here.
I just want to see the sample table but I could not. there is not any change in the table. I just want to use this in localhost.
Here is my HTML code:
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
<script>
$(document).read(function () {
$('#myTable').DataTable();
});
</script>
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
Hi. Is it possible to show 1000 row in once?
Thank you
Hi!
I use the following code, and it's working:
editor1.dependent( 'option', function ( val )
{
return (val === 'value1' || val === 'value2') ?
{ show: ['field1', 'field2', 'field3'] }:
{ hide: ['field1', 'field2', 'field13'] };
} );
Is it possible to change the simple if statement to real if - else if - else statement or switch statement?
I tied this, but doesn't work:
editor1.dependent( 'option', function ( val )
{
if (val === 'value1' || val === 'value2')
{
show: ['field1', 'field2', 'field3'];
return true;
}
else
{
hide: ['field1', 'field2', 'field3'];
return false;
}
} );
I tried the following too, but doesn't work either:
editor1.dependent( 'option', function ( val )
{
switch(val)
{
case 'value1':
show: ['field1', 'field2', 'field3'];
hide: ['field4', 'field5', 'field6'];
return true;
break;
case 'value2':
show: ['field4', 'field5', 'field6'];
hide: ['field1', 'field2', 'field3'];
return true;
break;
}
} );
What is the correct syntax of this expression?
Thank You and best regards.
I have many columns, the order and quantity its not always the same, and some hidden colums and left joins too. But some of this columns have toggles that send data to specific columns to db thru ajax.
The toggles can be at any position and can be more than one.
Im triyng to add attr to columns to read it and know the cell db and table were send the data.
I have been trying using the className option with no success. Here is what I have:
"columnDefs": [
{"className": "semi-bold", "targets": [2]}
],
Any ideas? It is a valid css class and I've tried different ones such as dt-middle etc. No change
I'm a newbie in a javascript and english is not my language, understand very poor, so, i likely this example https://datatables.net/blog/2019-01-11 in a fiddle for me take the javascript and another codes html css, i want to create one file with this, im apreciate any gesture of goodwill
Hi, Following up in this example, i am trying to make it work.
找到不到任何原因呢
var sortableTable = $('.tab-pane .table').DataTable({
paging: false,
searching:false,
fixedHeader: true,
stateSave: true,
});
nothing works fine I don't know why
$('#showTable tbody').on('click', 'tr', function () {
console.log($(this).find("td"));
var td = $(this).find("td");
$(".odd").css("color", "black");
$(".even").css("color", "black");
$(".odd").css("font-weight", "normal");
$(".even").css("font-weight", "normal ");
$(this).css("color", "red");
// $(this).css("color","red");
// $(this).css("font-style","italic");
// $(this).css("font-weight","bold");
var data = td.eq(1).html();
$("#hit").val(data);
});
function clearSearch() {
$("#studentName").val("");
queryAssessGradeList()
}
// $(function(){
// var table = $('#table').DataTable({
var assessGradeTable;
function queryAssessGradeList() {
var params = {};
params.assessId = $("#assessId").val();
params.classId = $("#classId").val();
params.studentName = $("#studentName").val();
var shabi = $("#head_grade").val();
// var ss=$("#head_grade").val();
if (shabi < 70) {
shabi.css("color", "#f00");
}
var colums = [
{
"mData": "order",
"sClass": "center",
},
{
"mData": "stu_name",
"sClass": "center",
},
{
"mData": "head_grade",
"sDefaultContent": "",
"sClass": "center",
"mRender": function (data, type, full, meta) {
if (data == '' || data == null) {
return "未录入";
} else {
return data;
}
}
},
{
"mData": "help_grade",
"sDefaultContent": "",
"sClass": "center",
"mRender": function (data, type, full, meta) {
if (data == '' || data == null) {
return "未录入";
} else {
return data;
}
}
},
{
"mData": "lecturer_grade",
"sDefaultContent": "",
"sClass": "center",
"targets": [3],
"mRender": function (data, type, full, meta) {
if (data == '' || data == null) {
return "未录入";
} else {
return data;
}
}
},
{
"mData": "avg",
"sDefaultContent": "",
"sClass": "center",
"mRender": function (data, type, full, meta) {
var assessGradeId = full.assess_grade_id;
if (data == '' || data == null) {
return "0";
} else {
return data.toFixed(2);
}
}
},
{
"mData": "assess_grade_remark",
"sDefaultContent": "",
"sClass": "center",
"mRender": function (data, type, full, meta) {
if (data == '' || data == null) {
return "无";
} else {
return data;
}
}
},
{
"mData": "stu_id",
"sClass": "center",
"mRender": function (data, type, full, meta) {
var assessId = $("#assessId").val();
var assessGradeId = full.assess_grade_id;
if (assessGradeId == undefined || assessGradeId == null) {
return '<button class="btn btn-xs btn-info" onclick="editAssessGrade(' + data + ',' + assessId + ')">录入成绩</button> ';
} else {
return '<button class="edit-btn btn-xs btn-info">修改成绩</button> ' +
// '<button class="save-btn btn-xs btn-info" onclick="save(' + data + ',' + assessId + ',' + assessGradeId + ')">保存成绩</button> '+
'<button class="btn btn-xs btn-danger" onclick="removeAssessGrade(' + assessGradeId + ')">撤销</button> ';
}
}
}
];
getTableData("showTable", "${link.contextPath}/stch/assess/grade/getListData", colums, JSON.stringify(params));
$('.icon-double-angle-left').replaceWith('< ');
$('.icon-double-angle-right').replaceWith('>');
var table = $("#showTable").DataTable();
$("table tbody").on("click", ".save-btn", function () {
alert(1);
var row=table.row($(this).parents("tr"));
// table.row1
var tds = $(this).parents("tr").children();
$.each(tds, function (i, val) {
var jqob = $(val);
//把input变成字符串
if (!jqob.has('button').length) {
var txt = jqob.children("input").val();
jqob.html(txt);
table.cell(jqob).data(txt);//修改Datatable对象数据
}
});
var data = row.data();
alert(data);
$.ajax({
"url": "${link.contextPath}/stch/assess/grade/editOne",
"data": data,
"type": "post",
"error": function (response) {
alert("服务器正常响应，请重试")
},
"success": function (result) {
if (result.isSuccess) {
queryAssessGradeList();
}
}
});
$(this).html("编辑");
$(this).toggleClass("edit-btn");
$(this).toggleClass("save-btn");
});
//
// if (table) {alert(344);
// table.fnClearTable();
// table.fnDestroy();
// //回调函数 判断是是否有值
// }
}
queryAssessGradeList();
$("table tbody").on("click", ".edit-btn", function () {
debugger
var tds = $(this).parents("tr").children();
$.each(tds, function (i, val) {
var jqob = $(val);
if (i < 2 || jqob.has('button').length){
return true
}
;//跳过第1项 序号,按钮
var txt = jqob.text();
var put = $("<input type='text' style='width:39px' value='' >");
put.val(txt);
jqob.html(put);
});
$(this).html("保存");
$(this).removeClass("edit-btn");
$(this).addClass("save-btn");
});
Hi all, I am using the datatables.net-editor-server.
I am trying to use the mjoin with additional fields for created_at and updated_at.
const editor = new Editor(db, 'users', 'uuid')
.debug(true)
.fields(
new Field('users.uuid')
.set(Field.SetType.Create)
.setValue(uuidv4()),
new Field('users.name')
.validator(Validate.notEmpty())
.validator(Validate.dbUnique()),
new Field('users.email')
.validator(Validate.notEmpty())
.validator(Validate.dbUnique())
.validator(Validate.email()),
new Field('users.password')
.validator(Validate.notEmpty()),
new Field("users.created_at")
.set(Field.SetType.Create)
.setValue(new Date(Date.now())),
new Field("users.updated_at")
.set(Field.SetType.Edit)
.setValue(new Date(Date.now())),
new Field("users.deleted_at")
)
.join(
new Mjoin('roles')
.link('users.uuid', 'user_roles.user_uuid')
.link('roles.uuid', 'user_roles.role_uuid')
.fields(
new Field('uuid')
.validator(Validate.required())
.options(
new Options().table('roles').value('uuid').label('name')
),
new Field('name'),
new Field('created_at')
.set(Field.SetType.Create)
.setValue(new Date(Date.now())),
new Field('updated_at')
.set(Field.SetType.Edit)
.setValue(new Date(Date.now()))
)
);
When I update a field from the client it gives me an UnhandledPromiseRejectionWarning on the created_at column.
I have debugged the Knex code and what it Editor does is delete on the user_roles table before doing an insert.
```
{ method: 'del',
options: {},
timeout: false,
cancelOnTimeout: false,
bindings: [ 'de67a42c-4d1e-402e-b4ec-d9842de59ee8' ],
__knexQueryUid: 'c1ddae59-aa29-4665-b47f-69b791a8197d',
sql: 'delete from "user_roles" where ("user_uuid" = ?)',
returning: undefined }
{ method: 'insert',
options: {},
timeout: false,
cancelOnTimeout: false,
bindings:
[ 'e83416fb-d82c-4236-9508-f756e4798193',
'de67a42c-4d1e-402e-b4ec-d9842de59ee8' ],
__knexQueryUid: 'f2043af6-6fb3-4453-9514-f3ab4eefb5b4',
sql:
'insert into "user_roles" ("role_uuid", "user_uuid") values (?, ?)',
returning: undefined }
The returned error is:
UnhandledPromiseRejectionWarning: error: null value in column "created_at" violates not-null constraint
This is due to me having a not null constraint on the created_at and updated_at fields.
I know I could set these as default on the database level, but the table is being generated by Sequelize (model is used for other purposes).
Any idea's on how to fix?
In Laravel I'm using datatables in combination with adminLTE. In tables the first column is a checkbox column to delete items only visible for admin under Laravel permissions (@can <code> @endcan. I want to use tooltips on three columns. In main.js (file of adminLTE) I've put following code which works nice when logged in as an admin.
$('#DataTables_Table_0 thead th:nth-child(4)').each(function () {
var $td = $(this);
$td.attr({title:"tooltiptext4"}, $td.text());
});
$('#DataTables_Table_0 thead th:nth-child(5)').each(function () {
var $td = $(this);
$td.attr({title:"tooltiptext5"}, $td.text());
});
$('#DataTables_Table_0 thead th:nth-child(6)').each(function () {
var $td = $(this);
$td.attr({title:"tooltiptext6"}, $td.text());
});
But for regular users - because of hiding the first column to them - the tooltips are placed on the wrong column headers.
I've tried something with variable 'columnnumber', but this hasn't worked out until now. Someone any idea how to solve this? Maybe in some other way as I'm trying to tackle this?
Hi Forum,
my name is Dominik and I am new on datatables.net. I have read several threads on several forums, how to init multiple datatables, but at this moment I have no idea, how to init 2 maintables with minimum 1 subtable. Let me scribble the situation:
upper Page: 1 Datatable with 1 SubDatatable
bottom Page: 1 Datatable with 2 SubDatatables
The Problem follows after the Code...
This is my HTML:
<section class="content container-fluid">
<h2>Normale Bestellungen</h2>
<table id="maintable" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Status</th>
<th>B-Nummer</th>
<th>Beschreibung</th>
<th>Bestelldatum</th>
<th>Lieferdatum/-typ</th>
<th>Lieferadresse</th>
<th>Aktionen</th>
</tr>
</thead>
</table>
<h2>Sonstige Bestellungen</h2>
<table id="maintable_orders" class="display" style="width:100%">
<thead>
<tr>
<th>V</th>
<th>D</th>
<th>ID</th>
<th>Datum</th>
<th>Typ</th>
<th>Status</th>
<th>Produktionsnummer</th>
<th>Werbetermin (KW)</th>
<th>Liefertermin (KW)</th>
<th>Notiz</th>
<th>Aktionen</th>
</tr>
</thead>
</table>
</section>
As you can see at those 3 Comments within the code, everything works except the subtable of the first maintable. The ajax-call is never been initialized, so I don´t get a needed parameter called "marketplace_order_id", thats essential for the non-working subtable.
My comments are on line 9,49 and 52 of the js-textarea.
I hope this is understandable, if I could give additional information please ask.
Thx and regards, Dominik
please help me how to create full semantic ui datatables same as first page datatable in datatables.net
https://datatables.net/
thanks me
I am very new here and want to be able to load a table and jump to a specific row based on a unique value that is in a column of the table. I can't figure how to do that.
Hi,
When initializing datatables I use language : <json stuff>
However, if I set url : <file.json> (with same contents, in this case Swedish.json downloaded from datatables.net) then the buttons disappear.
Check out debug code ovelax
Best regards,
Mats
{
"sEmptyTable": "Tabellen innehåller ingen data",
"sInfo": "Visar START till END av totalt TOTAL rader",
"sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
"sInfoFiltered": "(filtrerade från totalt MAX rader)",
"sInfoPostFix": "",
"sInfoThousands": " ",
"sLengthMenu": "Visa MENU rader",
"sLoadingRecords": "Laddar...",
"sProcessing": "Bearbetar...",
"sSearch": "Sök:",
"sZeroRecords": "Hittade inga matchande resultat",
"oPaginate": {
"sFirst": "Första",
"sLast": "Sista",
"sNext": "Nästa",
"sPrevious": "Föregående"
},
"oAria": {
"sSortAscending": ": aktivera för att sortera kolumnen i stigande ordning",
"sSortDescending": ": aktivera för att sortera kolumnen i fallande ordning"
}
}
Hi,
I have a dataset that is previously fetch by date order DESC, but when table shows up the order is ASC. Any idea why the order from the dataset is not respected ? If I use "order": [0, DESC] (0 being the Date column), I can't reorder anymore.
Thank you.