Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
implemented row grouping with totals.
I want to extract fraction value of each row and multiply that value with 0.6.
Ex:
col value: 38.78
result should be: 38.46 (0.78 * 0.6).
How to do this?
I am trying to change the pagination query parameter name from 'draw' to 'page'. Is there an option to do that ?
Hello everyone,
I want to execute a function when the editor form is aborted by the "x" button. I have already looked if there is a suitable event for this, but I couldn't find one. With the help of the events "close" or "preClose" I could not achieve the required effect.
So does anyone have a suggestion how to execute a function when the "x" was clicked? I expected something like a "cancel" event.^^
Greetings
Daniel
Hello, so I have been having issues with appending a DataTable on my landing page. I am pulling from three separate lists on different subsites through SharePoint. I will attach my code below. The weird part about it is I can get it to work perfectly if the data is static (of course...) but I will link a JSFiddle with the static data that works.
<html>
<head>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<title><strong>X, DAR-Q, & Z Deliverables</strong></title>
</head>
<body>
<div class="container">
<h4 class="text-center">X, DAR-Q, & Z Deliverables</h4>
<table class = "display">
<thead>
<tr>
<th>Program</th>
<th>Deliverable</th>
<th>To</th>
<th>Date</th>
<th>Approved</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script>
function loadData(source, url) {
return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
.then((r) => {
if (!r.ok) throw new Error("Failed: " + url); // Check for errors
return r.json(); // parse JSON
})
.then((data) => data.d.results) // unwrap to get results array
.then((results) => {
results.forEach((r) => (r.source = source)); // add source to each item
return results;
});
}
window.addEventListener("load", function () {
Promise.all([
loadData("XDeliverables", "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("YDeliverables", "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("ZDeliverables", "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
])
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2,r3);
var tableContent =
'<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
"<td><strong>To</strong></td>" +
"<td><strong>Date Submitted</strong></td>" +
"<td><strong>Approved</strong></td>" +
"<td><strong>Notes</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "</tr>";
}
$(tableContent).appendTo("#deliverables").DataTable();
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});
</script>
</body>
I am wanting to use jquery UI datepicker instead of DataTables because I just want the user to select the month/year. However, when I switch from 'datetime' to 'date' the incorrect date is displayed in the editor if there is an existing value.
I have seen posts like this: https://datatables.net/forums/discussion/47070/datatables-editor-plugin-datetime-format-issue
But I can't figure out how to fix my issue.
{
label: "Effective Date:"
, name: "FundOrgDeptGroup_Header.effectivedate"
, type: 'date'
, def: AsOfCookie
, opts: {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'm/yy',
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
}
},
If I change dateFormat: 'm/d/yy' it displays the correct date. changing it to 'm/yy' shows 3/2026
in my controller (this is an MVC project) I have tried various getformatters as well, but nothing worked.
Hello I'm adding enough data tables with ajax. It is being added but the search section does not work and there are fifteen more pages at the bottom but I have a single page yield.
`
function Doldur() { var url = "@Url.Action("Veriler", "ListData")"; $('#packages').DataTable({ "bProcessing": true, "serverSide": true, "ajax": { url: url, // json datasource type: "post", // type of method , by default would be get }, "aoColumns": [ { "data": "order_no", "bSearchable": true}, { "data": "order_item_no"}, { "data": "first_name"}, { "data": "last_name"}, { "data": "title" }, { "data": "sub_district"}, { "data": "district"}, { "data": "city"}, { "data": "adress"}, { "data": "first_phone" }, { "data": "second_phone" }, { "data": "third_phone" }, { "data": "email" }, { "data": "delivery_date" }, { "data": "delivery_time_slot" }, { "data": "delivery_day_slot" }, { "data": "desi" }, { "data": "total_sales_gross_price" }, { "data": "item_count" }, { "data": "price_type" }, { "data": "order_message" }, { "data": "username" }, { "data": "kontrol_edildi" }, ], responsive: true, bDestroy: true, "language": { "info": "Sayfa _PAGE_ / _PAGES_", "paginate": { "first": "ilk", "last": "Son", "next": "Sonraki", "previous": "Önceki" }, "emptyTable": "Sonuç Bulunamadı", "search": "Sonuc İçi Arama", "infoEmpty": "Gösterilen Kayıt 0 / 0 ", "lengthMenu": "Gösterilen_MENU_ Adet" }, scrollCollapse: true, paging: true, "bSort": false, "lengthMenu": [10], "lengthChange": false }); } Doldur();`
` public JsonResult Veriler()
{
var veriler = db.Packages.ToList();
return Json(new { data = veriler}, JsonRequestBehavior.AllowGet);
}`
Good afternoon,
I have a child table built from a function:
function createChild ( row ) {
var table = $('<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tfoot>'+
'<tr>'+
'<th colspan="4" style="text-align:right">'+
'Suma:'+
'</th>'+
'</tr>'+
'</tfoot>'+
'</table>');
row.child( table ).show();
...
The fields are mounted from the columns:
columns: [
{ title: 'Tipo', data: 'tb_objeto.objeto' },
{ title: 'Item', data: 'tb_item.item' }
…
To fill the Sum of the <tfoot> I use a "footerCallback": function
The question is: How can I pass the data from the footerCallback to the <tfoot>
Thank you.
I'm working on table with server-side enabled using laravel and datatables. My problem comes because data will come from a view with more than 300.000 records, and PHP runs out of memory. I would like to know how to setup datatables and communciation with server side, to retrieve only first page of data based on number of records per page, and how to requets again and pass needed params on pagination.
This is my JS code working like a charm iwth about 5000 records. on my firsts tests.
var table = $('#powersearch-table').DataTable({
processing: true,
serverSide: true,
pageLength: 50,
ajax: {
url: "/powersearchajx",
dataSrc: "data",
type: "GET"
},
buttons: [
'pageLength', 'csv', 'excel', 'pdf', 'print'
],
columns: [
around 13 columns
],
});
$('#powersearch-table thead tr').clone(true).appendTo( '#powersearch-table thead' );
$('#powersearch-table thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );
And this is my problematic server side code. Because returns all data, PHP runs out of memory.
return datatables(DB::table('myview'))->toJson();
Thanks in advance
What is the best way to hide a field on a form when multiEditable is set to false for the specific field? The field should not display at all if it is not editable.
I need the minDate option to depend on a value in another datefield. I read that minDate won't accept a function, so what I have seen in non-DataTable projects is code like this:
$('[name=myradiogroup]').change(function () {
var newMininumDate = /*insert logic here*/;
$('#datepicker').datepicker('option', 'minDate', newMininumDate);
});
One way I was thinking of doing this in DataTables is to use the .clear() and .add() on open of the Editor (or select of the DataTable), like this:
var newMininumDate = /*insert logic here*/;
editor.add( {
type: 'datetime',
label: 'Start date:',
name: 'start_date',
opts: {
minDate :newMininumDate
}
} );
I just wanted to make sure this is the most efficient way to do this?
The docs (https://editor.datatables.net/reference/field/text) have this:
This makes it possible to set attributes such as maxlength and required.
Does that mean that only those two attributes are allowed?
Also just noticed a typo on the same page:
"Setting maxlength and placeholder properities:"
"...properties:"
Never used orthogonal data before with datatables until now. I originally was using the commented out portion which worked as expected - the display value was used for displaying and the timestamp value was used for sorting. Now, I have a need to modify the output displayed while still using 'timestamp' for sorting.
Will this achieve the same as what is commented out just allowing me to edit the 'display version' of the data?
{
"data": 'capture_timestamp',
//"render": {
// _: 'display',
// sort: 'timestamp'
//}
"render": function ( data, type, row ) {
switch (type) {
case 'display':
return data.display; //modify return as needed for display only?
default:
return data.timestamp; //still used for sorting purposes?
}
}
},
Hello, so I was having issues with my DataTable, and now I fixed the main issue I was facing which was getting the Data to return from Sharepoint as JSON, but now it finally does. But now, it still will not populate to the data table.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Program</th>
<th>Deliverable</th>
<th>To</th>
<th>Date</th>
<th>Approved</th>
<th>Notes</th>
</tr>
</thead>
</table>
</div>
<style>
div.container {
min-width: 980px;
margin: 0 auto;
}
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
</style>
<script>
function loadData() {
var urls = ["https://x.sharepoint.com/sites/Projects/USMC/AMMO/_api/web/lists/getbytitle('AMMODeliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", "https://x.sharepoint.com/sites/Projects/USMC/DARQ/_api/web/lists/getbytitle('DarQDeliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", "https://x.sharepoint.com/sites/Projects/USMC/WTBn/_api/web/lists/getbytitle('WTBnDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"];
for (i=0; i < urls.length; i++) {
$.ajax({
url: urls[i],
'headers': { 'Accept': 'application/json;odata=nometadata' },
success: function (data) {
data = data;
var table = $('#myTable').DataTable();
table.rows.add( data.data ).draw();
}
});
}
}
$(document).ready(function() {
$('#myTable').DataTable( {
"columns": [
{ "data": "Program" },
{ "data": "Deliverable" },
{ "data": "To" },
{ "data": "Date" },
{ "data": "Approved" },
{ "data": "Notes" }
]
} );
loadData();
} );
</script>
Here is what is being returned in the console its a JSON Object
{
"value":[
{
"Notes":"Example Notes\n",
"Approved":"Yes",
"Program":"AMMO",
"Date":"12/23/2018",
"To":"example@example.com",
"Deliverable":"Monthly Status Report (MSR)"
},
{
"Notes":"Example Notes\n",
"Approved":"Yes",
"Program":"AMMO",
"Date":"03/30/2020",
"To":"example@example.com",
"Deliverable":"Meeting Minutes"
},
{
"Notes":"Example Notes\n",
"Approved":"Yes",
"Program":"AMMO",
"Date":"12/23/2018",
"To":"example@example.com",
"Deliverable":"Monthly Status Report (MSR)"
},
{
"Notes":"Example Notes\n",
"Approved":"Yes",
"Program":"AMMO",
"Date":"03/30/2020",
"To":"example@example.com",
"Deliverable":"Meeting Minutes"
}
]
}
{
"value":[
{
"Notes":"Example Notes\n",
"Approved":"Yes",
"Program":"DAR-Q",
"Date":"12/23/2018",
"To":"example@example.com",
"Deliverable":"Monthly Status Report (MSR)"
},
{
"Notes":"Example Notes",
"Approved":"Yes",
"Program":"DAR-Q",
"Date":"12/3/2017",
"To":"example@example.com",
"Deliverable":"Meeting Minutes"
},
{
"Notes":"Example notes.",
"Approved":"Yes",
"Program":"DAR-Q",
"Date":"03/30/2020",
"To":"example@example.com",
"Deliverable":"Meeting Minutes"
},
{
"Notes":"Example notes",
"Approved":"No",
"Program":"DAR-Q",
"Date":"02/20/2020",
"To":"example@example.com",
"Deliverable":"Monthly Status Report (MSR)"
}
]
}
{
"value":[
{
"Notes":"Example Notes",
"Approved":"No",
"Program":"WTBn",
"Date":"4/17/2020",
"To":"example@example.com",
"Deliverable":"Monthly Status Report (MSR)"
},
{
"Notes":"Example Notes\n",
"Approved":"Yes",
"Program":"WTBn",
"Date":"12/23/2018",
"To":"example@example.com",
"Deliverable":"Meeting Minutes"
},
{
"Notes":"example notes",
"Approved":"Yes",
"Program":"WTBn",
"Date":"4/17/2020",
"To":"example@example.com",
"Deliverable":"Meeting Minutes"
},
{
"Notes":"Example notes\n",
"Approved":"Yes",
"Program":"WTBn",
"Date":"05/12/2020",
"To":"example@example.com",
"Deliverable":"Meeting Minutes"
}
]
}
I know how to manage labels and placeholder text, but sometimes I need to add 1-2 lines of description overview above a field. I looked but did not find a field type dedicated for that purpose. Or is there a way to use 'text' field type to accomplish this?
I am querying the database for the last case number, incrementing it and displaying it in a readonly editor field. Once the data is submitted the database is not queried again so I can set the next case number. Is their a way to re-query the databse upon submitting the case number?
Not sure if this makes sense or not. Please let me know if you need more info. I can setup a login for you if need be but I would need to send that to you privately.
Hi, I would like to confirm this behavior please.
I have a simple table with PRIMARY key as VARCHAR. When creating a new record the table does not update automatically as expected. After a lot of reading and debugging, one solution that doesn't need using event with table.ajax.reload() is to make the id as INTEGER. Is this intentional?
Test Case - In Development, not sure how to link a JS Fiddle when using a local web server and database.
Debugger - Says no jQuery loaded. jQuery is my first require and it is working else where on the page.
Error - Uncaught Cannot extend unknown button type: create.
Description - I have set up an environment using Typescript, Grunt, and Browserify to make a bundle. Everything has been working great until I tried using the trial version of the editor. I followed the install.js instructions to make sure the right files were moved into my node_modules. I have 11 days left to get the Full CRUD operations and need to get this working before I can get the okay on buying a license.
Code:
// jQuery and BootStrap
let $ = require( 'jquery' );
require('bootstrap');
require('popper.js')
require('bootstrap-select');
// DataTables
let dt = require( 'datatables.net-bs4' )();
let editor = require( 'datatables.net-editor-bs4' )();
require( 'datatables.net-buttons-bs4' )();
require( 'datatables.net-select-bs4' )();
// CSS Imports
import "datatables.net-bs4/css/dataTables.bootstrap4.min.css";
import "datatables.net-editor-bs4/css/editor.bootstrap4.min.css"
import "datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css";
import "datatables.net-select-bs4/css/select.bootstrap4.min.css";
import "bootstrap-select/dist/css/bootstrap-select.min.css";
$(document).ready(function () {
// set up editor
let _editor = new editor({
ajax: "/testpackage/tgroup/params/0/TG",
table: "#tgParamList",
idSrc: "uid",
fields: [{
label: "Name:",
name: "name"
},
{
lable: "Value:",
name: "value"
}
]
});
// Activate an inline edit on click of a table cell
$('#tgParamList').on('click', 'tbody td:not(:first-child)', function (e) {
_editor.inline(this);
});
// Start table
$('#tgParamList').DataTable({
dom: "Bfrtip",
ajax: "/testpackage/tgroup/params/0/TG",
order: [
[1, 'asc']
],
columns: [{
data: null,
className: "checkbox-row",
defaultContent: '<input type="checkbox"/>',
orderable: false
},
{
data: "name"
},
{
data: "value"
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [{
extend: "create",
editor: _editor
},
{
extend: "edit",
editor: _editor
},
{
extend: "remove",
editor: _editor
}
]
});
});
I am getting error "Uncaught Error adding field - unknown field type select2" while loading page, i have already included select2 css and js. what could be issue here.
Ref:
https://datatables.net/forums/discussion/45901/multi-select-field-type-or-other-options-in-editor
https://editor.datatables.net/plug-ins/field-type/editor.select2
https://editor.datatables.net/examples/styling/bootstrap4.html
var editor;
$(function () {
editor = new $.fn.dataTable.Editor( {
//ajax: "/users/edit",
ajax: {
"url": "/users/usermgt",
beforeSend: function (xhr) { // Add this line
xhr.setRequestHeader('X-CSRF-Token', csrfToken );
},
},
table: "#tblusers",
fields: [ {
label: "Username:",
name: "username"
}, {
label: "Email:",
name: "email"
}, {
label: "Phone:",
name: "phone"
},
{
label: "Active:",
name: "active",
type: "select",
options: [
{ label: "Active", value: "1" },
{ label: "Inactive",value: "0" },
]
},
{
"label": "Make of automobile:",
"name": "automake",
"type": "select2",
"opts": {
"allowClear": true,
"multiple": true,
"placeholder": {
"id": "",
"text":"(Does not own automobile)"
}
}
}
]
} );
var table= $('#tblusers').DataTable({
"ajax": {
"url": "/users/getdata",
},
lengthChange: false,
"stateSave": true,
"aLengthMenu": [[5, 10, 15, 25, 50, 100 ], [5, 10, 15, 25, 50, 100]],
"processing": true,
"serverSide": true,
"pageLength": <?php print $PageLength; ?>,
scrollY: "300px",
scrollCollapse: true,
select: true,
"columns": [
<?php
foreach($feildsType as $key =>$val){
if($val['viewable']==true){
if($val['searchable']==1){$searchable="true";}else{$searchable="false";}
print '{"data":"' . $val['fld_name']. '", "name":"'. $val['fld_name'].'", "width":"'.$val['width'].'%",'.'"searchable":'.$searchable.'},'."\n";
}
}
?>
],
}); //End of dT.
// Display the buttons
new $.fn.dataTable.Buttons( table, [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor },
{
extend: 'copyHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
'colvis',
] );
table.buttons().container()
.appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
var editor;
$(function () {
var table= $('#tblusers').DataTable({
"ajax": {
"url": "/users/getdata",
// "type": "GET",
},
"stateSave": true,
"aLengthMenu": [[5, 10, 15, 25, 50, 100 ], [5, 10, 15, 25, 50, 100]],
"processing": true,
"serverSide": true,
"pageLength": 25,
scrollY: "300px",
// scrollX: true,
scrollCollapse: true,
select: true,
// fixedColumns: true,
dom: 'Blfrtip',
buttons: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: [ ':visible' ]
}
},
'colvis',
],
"columns": [
{"data":"User Name", "name":"username", "width":"20%","searchable":true},
{"data":"Email", "name":"email", "width":"20%","searchable":true},
{"data":"Logins", "name":"login_count", "width":"10%","searchable":true},
{"data":"Created", "name":"created", "width":"10%","searchable":true},
{"data":"Last Login", "name":"last_login", "width":"20%","searchable":true},
{"data":"Active", "name":"active", "width":"10%","searchable":true},
{"data":"Phone", "name":"phone", "width":"10%","searchable":true},
{
"data": null,
"sortable": false,
"searchable": false,
"orderable": false,
"targets": 0 ,
'printable':false,
'exportable':false,
"render": function(data, type, full) {
return ' <div class="dropdown"> <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Action</button> <div class="dropdown-menu"> <a name="edit" class="dropdown-item" href="#"><i class="fas fa-edit"> </i> Edit</a> <a name="delete" class="dropdown-item" href="#"><i class="fas fa-trash"> </i> Delete</a> </div></div>';
}
},
],
}); //End of dT.
//https://editor.datatables.net/examples/styling/bootstrap
editor = new $.fn.dataTable.Editor( {
ajax: "../php/staff.php",
table: "#tblusers",
fields: [ {
label: "Username:",
name: "username"
}, {
label: "Email:",
name: "email"
}, {
label: "Phone:",
name: "phone"
}
]
} );
// Display the buttons
new $.fn.dataTable.Buttons( table, [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
] );
table.buttons().container()
.appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
Hi.
I am new to datatables, and I am loving them already.
However I am facing an issue linking it with angularJS.
I would like to have a button in the last column to delete the record through angularJS.
So the idea would be having a function like:
$scope.deleteRecord = function(recordId){
//something here
};
and in the row having something like
var dataset = ['Val1','val2','val3','<button ng-click="deleteRecord(IdGoesHere)">Delete This Record</button>'];
The problem is, when I click in the button the scoped function is not called.
Sorry if this sounds like a basic question, but I am really starting using datatables and I am still a bit confused.
Thank you in advance.
Kind regards,
Antonio