hello ^----^.
this is excelHtml5.
Run the code below and it will look like the picture.
extend: "excelHtml5",
customize: function ( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('c[r*="A"] t', sheet).text('user table');
}
but I want to add a new column on export as shown below.
Is it possible?? Please help ㅠ_ㅠ
I've loooked around but don't see a validator that validates currency when a person enters data in the field. I see a couple options for formatting a number in table view with a $, but not input validation.
I tried:
Field::inst( 'price' )->validator( 'Validate::numeric' ),
This works for input with an amount like 79.83 but in table view it renders (expectedly) without a $
I found this:
{ data: "price", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
but in table view it renders as a rounded whole number:
$80
This will confuse the administrator. How do I get it to render as $79.83?
Go into this example:
https://datatables.net/extensions/fixedheader/examples/options/offset-automatic.html
go into the html of the bar and change it to this:
<div class="fh-fixedHeader" style="position:fixed; background-color:#4E6CA3; top:20px; right:0; left:0; height:50px; z-index:1;"></div>
(Add top 20 pixels)
This now renders wrong in Chrome, at least.
Here's what I see in case it isn't easy to replicate:
So, the header is now under the "navbar" on the z-level and partially occluded.
I found this issue because on my page the navbar is slightly offset from the top and that made this break, though on my page it is entirely occluded and so I thought I messed up for a while.
buttons: [ {
extend: 'excelHtml5',
title: '',
customize: function( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c', sheet).each( function () {
if ( $('is t', this).text().indexOf("http") === 0 ) {
$(this).append('<f>' + 'HYPERLINK("'+$('is t', this).text()+'","'+$('is t', this).text()+'")'+ '</f>');
$(this).attr( 's', '2' );
}
});
}
} ],
I am trying to convert text to hyperlinks in excel so that they are clickable directly. These are image URLs from the table that get converted to plain text when i open the sheet. The above snippet throws an error in MS office. 
It seems that my modification to the text to hyperlink has broken the parsing. Unsure why but it opens up fine in WPS and google sheets.
I have attached the excel that is causing an issue.
Hello, currently, if you have set drawType === 'none', you need to manually pass new or updated row data to successCallback as a result of ajax request to make the table row update itself with the new data. The passed row data is then internally merged with existing table row data, to fill in missing properties, in case just a sub-set of row fields was returned. However, in our business case, we also expect that some of the fields are missing intentionally in the returned set of data, and we render these columns in a specific way. However, editor fills in these missing fields with cached table row fields.
Here's a snippet from editor 1.9.2 starting at line #6956:
// Merge data to allow for a sub-set to be returned
var extender = $.fn.dataTableExt.oApi._fnExtend;
var toSave = extender( {}, row.data(), true );
toSave = extender( toSave, data, true );
row.data( toSave );
Could this behaviour be optionally disabled, so user can manually set, what data are passed back to datatable renderers after successful edit?
Proposal: Add a switch setting, for example allowSubsetResponse, which when set to false, would not automatically merge the data passed to successCallback with respective table row data.
Thanks for the response.
Rado
I am new to web development. Can someone tell me how to use following features together?
I tried to do it but only one feature got worked for me.
https://datatables.net/examples/api/counter_columns.html
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
the fact is that in my table one column contains elements input.which I need to access after downloading data from the server.
however, when trying to access immediately after the event xhr I fail because the required item is not there yet. Tell me which event is better for me to use for my purpose?
The Validator.dbUnique() let's me validate a value prior to insert if the value is unique in that column. Ref. https://editor.datatables.net/manual/nodejs/validation
new Field( 'groups.name' )
new Field( 'groups.product_id' ),
.validator( Validator.dbUnique() )
new Field( 'groups.type' )
new Field( 'groups.status' );
What I need though is a validation for multiple columns. So insert the new record only if the product_id IS NOT of type=1 and status=2 found.
Here is a php example combining multiple columns https://datatables.net/forums/discussion/57729/unique-validation-for-multiple-columns
->validator( function($editor, $action, $data){
if ($action === Editor::ACTION_CREATE || $action === Editor::ACTION_EDIT){
foreach ($data['data'] as $pkey => $values ){
$count = $editor->db()->query('select')->get('*')->table('teachers_subjects')
->where('teachers_subjects.teacher', $values['teachers_subjects']['teacher'])
->where('teachers_subjects.subject', $values['teachers_subjects']['subject'])
->exec()
->count();
if ($count == 1){
return 'This selection is already in the database.';
}
}
}
})
But how to do so with node.js ?
Rf. https://editor.datatables.net/manual/nodejs/validation#Global-validators
I want to add per row delivery_id value in render .
I have a table of 2500 records and 40 columns which I elaborate in this way:
bStateSave: true,
deferRender: true,
bProcessing:true,
sAjaxSource: "php/myfile.php",
fnServerParams: function ( aoData ) {
aoData.push( { "name": "Tipo_Sel", "value": "PROG" } );
},
dataType: 'JSON',
sServerMethod: "POST",
createdRow: function ( row, data, index )
in doing so it takes about 100000ms and this seems abnormal, since it must also contain 5000/6000 records.
is there a solution to speed up this process ????
PS: The table at the bottom has the totals
Thanks.
Hi there,
This is my first time working with Datatables (using c# mvc in the back end), and the functionality I'm trying to create is the following:
The issue I am having is this:
table.ajax.reload(null, false);
will call the server for the next 20 rows but when the rows are returned, the original 20 rows are replaced by the new 20. I want the new 20 rows to be added alongside the new 20.
One possible solution is to return 40 rows from the server when scrolling to the bottom, but I'm dealing with a large dataset, so the further you scroll, the more detrimental this is to performance. Here is the current code:
document.addEventListener('scroll', function (event) {
if (ajaxGetWhenScrolling) {
if (event.target.className === 'dataTables_scrollBody') { // or any other filtering condition
if ($(event.target).scrollTop() + $(event.target).innerHeight() >= $(event.target)[0].scrollHeight) {
dtAdditionalData.currentRows = $('#gamesListTable >tbody >tr').length;
var table = $("#myTable").DataTable();
table.ajax.reload(null, false);
}
}
}
}, true /*Capture event*/);
And my datatable is configured in the following way:
dt = $('#myTable').DataTable({
'responsive': true,
'serverSide': true,
'filter': true,
'autoWidth': false,
'scrollCollapse': true,
'deferRender': true,
'aaSorting': [[1, 'asc']], //initial sort by Order
'pageLength': 20,
'searchDelay': 500,
'paging': true,
'scrollY': 460,
'scroller': true,
'scrollX': true,
'ajax': {
'url': '@Url.Action("myServerSideController")',
'type': 'POST',
'datatype': 'json',
"data": function (d) {
Object.assign(d, dtAdditionalData);
return d;
}
},
'stateSave': true,
'fixedHeader': { //fix the header on scroll past
header: true,
headerOffset: $('#fixed').height()
},
'columnDefs': [
{
'targets': '_all',
'className': 'dt-center'
},
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
},
{
//Fix and format json dates
'targets': 11,
'render': function (data, type, row, meta) {
let parsedDate = new Date(parseInt(data.substr(6)));
let date = moment(parsedDate)
let formattedDate = date.format('DD/MM/YYYY HH:mm');
if (date.year() < 1970) {
return "No end date";
}
return formattedDate
}
}
],
'columns': [
{ "data": null, defaultContent: '' },
{ 'data': 'DisplayOrder', 'name': 'DisplayOrder', 'title': 'Order' },
{ 'data': 'Id', 'name': 'Id', 'title': 'Id' },
{ 'data': 'Name', 'name': 'Name', 'title': 'Name' },
{ 'data': 'GCD', 'name': 'GCD', 'title': 'GCD' },
{ 'data': 'GCM', 'name': 'GCM', 'title': 'GCM' },
{ 'data': 'Vend', 'name': 'Vend', 'title': 'Vend' },
{ 'data': 'SubV', 'name': 'SubV', 'title': 'SubV' },
{ 'data': 'CSD', 'name': 'CSD', 'title': 'CSD' },
{ 'data': 'Active', 'name': 'Active', 'title': 'Active' },
{ 'data': 'Published', 'name': 'Published', 'title': 'Published' },
{ 'data': 'DateCreated', 'name': 'DateCreated', 'title': 'Created' }
],
'render': function (data) {
var date = new Date(data);
var month = date.getMonth() + 1;
return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
});
Any insight is much appreciated. I've been looking for a way to implement this for a few days now without using a foreach loop and using row.add (this solution also seemed to lead to poor performance)
Thanks!
I im using DataTables v10 and defined:
$(document).ready(function() {
$("#datatable").DataTable({
language: {
paginate: {
previous: "<i class='mdi mdi-chevron-left'>",
next: "<i class='mdi mdi-chevron-right'>"
}
},
drawCallback: function() {
$(".dataTables_paginate > .pagination").addClass("pagination-rounded");
},
responsive: false,
aaSorting: [
[ 1, 'desc' ]
]
});
$("#datatable").css("width", "100%");
$('#datatable').on('click', 'i.text-success.fas.fa-circle, i.text-danger.fas.fa-circle', function(e) {
var id = $(this).closest('tr').find('td:eq(1)').text(),
payed = $(this).closest('tr').attr('payed'),
reseller = $(this).closest('tr').find('td:eq(2)').text(),
msg = '';
if (payed == 1) { msg = 'NOT '; }
if (confirm('Are You Sure That "' + reseller + '" Have ' + msg + 'Payed?') == true) {
e.preventDefault();
$.ajax({
url: './calculations-api.php?type=1&id='+id,
success: function(response){
$('#datatable').DataTable().draw(false);
alert(response);
}
});
} else {
return;
}
});
});
calculations-api.php return only text message like "Success Payed!" so as you can see i im using client side DataTables...my problem is when i click to update data...data is updated on server side, returned message from calculations-api.php "Success Payed!" and DataTables is not refreshed...so i try this code to refresh DataTable after message is returned from server:
$('#datatable').DataTable().draw(false);
But table is not refreshed...so is there another solution? Reloading page is not solution, only DataTables.
example here:
http://live.datatables.net/yonakowu/346/edit
I'm trying to set the color of a button by setting its class (btn-primary).
I noticed that regardless of what I did, the button was still showing up as grey. When I checked to see what the button class was when live, it was showing as "btn-secondary btn-primary"
I saw other examples of what I was doing working, and eventually found the behavior changed depending on the datatables compiled script I was using.
If I used:
script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jszip-2.5.0/dt-1.10.18/b-1.5.2/b-html5-1.5.2/b-print-1.5.2/datatables.min.js"
it worked as expected
If I used:
script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/b-1.6.1/b-colvis-1.6.1/fc-3.3.0/sc-2.0.1/sp-1.0.1/datatables.min.js"
it kept the button as grey (dual class defined?)
Is there something I'm doing incorrectly? Is this just some odd side-effect of the blend of scripts I'm referencing? Is there some other way I can set the button color? Perhaps through direct editing of the style?
Greetings
I'm using PHP Datatable Library 1.9, and everything is fine.
Today I tried to use Mjoin as usual, but this time I have to do furhter conditioning by adding where.
and I got the error:
error: "SQLSTATE[HY000]: General error: 1 near "ANDinvsresults": syntax error"
It seems that the where statment do not add space here.
Is it something wrong in my usage, or a bug in editor library? and where exactly I can correct it ?
I used composer to require datatabel:
{
"require": {
"datatables.net/editor-php": "1.9"
}
}
And here is my php code:
$editor->join(
\DataTables\Editor\MJoin::inst('files_list', 'okey_id')
->link('files_list.belong_to','invsresults.key_id')
->order('created_at desc')
->fields([
Field::inst('key_id'),
Field::inst('type'),
Field::inst('belong_to'),
])
->where('files_list.type', 'invResult','=')
);
And here is the query when I enabled the debug:
query: "SELECT DISTINCT invsresults.key_id as 'dteditor_pkey', files_list.key_id as 'key_id', files_list.belong_to as 'belong_to' FROM invsresults as invsresults JOIN files_list ON files_list.belong_to = invsresults.key_id WHERE files_list.type = :where_0 ANDinvsresults.key_id IN (:wherein1, :wherein2, :wherein3, :wherein4, :wherein5, :wherein6, :wherein7, :wherein8, :wherein9, :wherein10) ORDER BY created_at desc "
I am tring to export data from datadable, exporing all data but not exporting symbols from table data
I wanted to have a custom sort function for a column in my table. I could find an example, which used aoColumns option, and my goal of custom sorting is achieved as well. However, is aoColumns a legacy option? Should I be using columns option?
This is how my datatable initialization looks:
myTab.DataTable({
aoColumns: [
{"sWidth":"40%", "bSortable":true},
{"sWidth":"60%", "bSortable":true, "sType":"customDate"}
]
});
Thanks.
I have the code of GridView and it turn to datatable with editor, when i click in one row (inline editor) i change the values of any cell after i use a button to do the (Submit) the Server (C#) dont get the edited values, it returns the original values, how i can solve it? im using Web Form with C# and .Net
Code: https://jsfiddle.net/JuJoGuAl/m5sqebvd/
How i can solve it?
i have a dynamic dataTable function to do a export with
exportOptions: {
columns: 'th:not(.noexportar)',
format: {
body: function (data, row, column, node) {
data = jQuery('<p>' + data + '</p>').text();
return jQuery.isNumeric(data.replace(',', '.')) ? data.replace(',', '.') : data;
}
}
},
But the Excel file keep the Header Column:
(POS) is the column that i dont wanna show in exports
How i can solve it?
I'm using the following method to add custom filtering features:
$.fn.dataTable.ext.search.push(function(oSettings, aData) {});
How can I obtain back which filter value is active on each column?
Also, if I save the table state with stateSaveCallback, those filters won't be saved. This makes me think that applying custom filters this way it's completely different from use this method: table.columns(colId).search(searchString, true, false).draw(true)
But how to use the custom one as if it is the standard one?