Hi!
I tried to use the slim versoin of Jquery, and Datatable breaked when using "Excel" export button.
Thats because Datatable relies on the Jquery .parseXML function
Is it possible to use the stardand javascript .parseXML?
So we can decrease dependence on Jquery and use the Slim version.
Thanks a lot!
Rodrigo.
my footerCallback not work plss help me
it is my code
$(document).ready(function() {
$('#example').DataTable({
"ajax": {
"url": "script.php",
"dataSrc": ""
},
"columns": [{
"data": "catname"
},
{
"data": "stname"
},
{
"data": "buyingprice"
},
{
"data": "salesprice"
},
{
"data": "monname"
},
{
"mRender": function(data, type, row) {
return parseInt(row.salesprice / row.number);
}
},
{
"mRender": function(data, type, row) {
return parseInt(row.salesprice - row.buyingprice);
}
},
{
"mRender": function(data, type, row) {
;
}
},
{
"data": "number"
},
{
"data": "sum"
},
{
"mRender": function(data, type, row) {
return parseInt(row.number - row.sum);
}
},
sum = came from 
and I want to calculate this three columns {
"mRender": function(data, type, row) {
return parseInt(row.salesprice / row.number);
}
},
{
"mRender": function(data, type, row) {
return parseInt(row.salesprice - row.buyingprice);
}
},
{
"mRender": function(data, type, row) {
return parseInt(row.number - row.sum);
}
},
it is my footer callback code
var thuTotal = api
.column(4)
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
$(api.column(4).footer()).html(thuTotal);
I have a scrolling table with 25 columns. The first 5 are fixed. I am initializing the tooltips with drawCallback.
When scrolling the remaining 20 columns, the tooltips for the fixed 5 also scroll left rather than staying over the TD on which they should be initialized. I understand that the fixedColumns plugin uses a cloned table, so I attempted to namespace the initialization to the cloned table, but that did not work (no tooltips initialized).
I have attached a test page which demos the problem. You'll notice that if you scroll the table and then hover any of the fixed columns, their tooltips are no longer over the correct columns. The tooltips are only in the correct position when the table is not scrolled.
I did it according to the instructions and got an example on my website:
https://sl19374928zzaljekswdf.vibory.pro/editor01/examples/simple/simple.html
But I would like to do this in a Joomla CMS. To make it work in a separate module.
Hi, I'm using Datatables and it's great. I'm displaying with server-side processing approx 500k records from MySQL. Everything is working fine, but recently in IE I noticed strange behavior. When I click on row, in all other browsers except IE the row child will open (with executing another DB query to get the row child data).
In IE it's also working in most cases, but sometimes, the child row is not opening, just a part of the details are opened and I get an error message in browser console, that it's not able to read value from DB. When I click on it again, the child row closes and by click on it again, it opens normally. Did you experienced similar behavior? Thanks
Hello,
In angular 2+ application, I use datatables.net work (can see it, use it, filter, ...) but I get some errors in the console.
The error is :
ERROR TypeError: Cannot read property 'headerRow' of undefined
at Object.eval [as updateRenderer] (ng:///SharedModule/GridBalanceComponent.ngfactory.js:84)
at Object.debugUpdateRenderer [as updateRenderer] (vendor.js:47883)
at checkAndUpdateView (vendor.js:47259)
Could you tell me whats wrong ?
In the .TS file
getDashboardBalance(){
this.invoiceService.getDashboardBalance().subscribe((data) => {
this.balances = data["balances"];
this.dataTable = {
headerRow: [ 'A', 'B', 'C', 'D', 'E', 'F' ],
footerRow: [ 'A', 'B', 'C', 'D', 'E', 'F' ],
dataRows: data["balances"]
};
},
error => {
});
}
ngAfterViewInit(){
$('#myTable').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[15, 30, 50, -1],
[15, 30, 50, "All"]
],
responsive: true
});
var table = $('#myTable').DataTable();
}
<!-- In the HTML -->
<table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>{{ dataTable.headerRow[0] }}</th>
<th>{{ dataTable.headerRow[1] }}</th>
<th>{{ dataTable.headerRow[2] }}</th>
<th>{{ dataTable.headerRow[3] }}</th>
<th>{{ dataTable.headerRow[4] }}</th>
<th class="disabled-sorting text-right" width="60"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of dataTable?.dataRows">
<td>{{row['customerName']}}</td>
<td>{{row['customerReference']}}</td>
<td>{{row['invoiceAmount']}}</td>
<td>{{row['amountReceived']}}</td>
<td>{{row['balance']}}</td>
<td class="text-right">
<a routerLink="/blabla" routerLinkActive="active">
<span class="btn btn-primary btn-link btn-icon btn-sm edit">
<i class="fa fa-bank"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
datatable excel export, how can we apply multiple styles to same cell , currently it overwrites the old style.
$('row c[r*="G"]', sheet).attr('s', '52');
$('row c[r*="2"]', sheet).attr('s', '50');
$('row c[r*="3"]', sheet).attr('s', '50');
Hi
The 1st editor form uses the standard create, edit and remove extensions but form #2 gets called from a custom button. DT and editor form #1 share the same Ajax method. Form #2 has a different Ajax method that should not refresh the DT as the data it handles is different background data the user can edit but not see directly via the DT. He needs to click the custom button to view and edit that data. The forms handle data across 2 different tables who share the same foreign key.
var editor2 = ModifyCustomerSubPackSNsAssociations_editor();
(DT code)
buttons: [
{ extend: 'create', editor: editor1 },
{ extend: 'edit', editor: editor1 },
{ extend: 'remove', editor: editor1 },
{
text: '@(lblo.lblAssociatedSNs)',
extend: 'edit', editor: editor2
}
],
Code for ModifyCustomerSubPackSNsAssociations_editor:
function ModifyCustomerSubPackSNsAssociations_editor() {
var editor = new $.fn.dataTable.Editor({
destroy: true,
ajax: {
url: '/CustomerSubsPacks/CRUDCustomerSubsPacksSNs/',
data: function ( d ) {
return $.extend( {}, d, {
intContTpe: intContTpe1
} );
},
type: 'POST',
async: true,
cache: false
},
table: '#tblDataTable',
fields: [
{
label: '',
name: 'CustomerSubsPacksSNs.id'
}, {
label: '@(lblo.lblServiceNumbers):', //cdr formats and price lists don't show ticked when opening editor
name: 'CustomerSubsPacksSNs[].id', //SNs
type: "checkbox"
}
]
});
return editor;
}
How do I reference editor2 correctly? The form opens but ajax method CRUDCustomerSubsPacksSNs never gets hit when form opens. Browser console does not throw any errors. Thanks.
how to programmatically determine at an arbitrary point in time by which column and how the table is sorted?
How to programmatically sort a table by a specific column?which event is directly related to the user changing the table sort
how to get row value by index
i need my excel in this format could someone please held to do that
HERE IS MY CODE
jsfiddle.net/xh6k2fpj/1/
Editor Inline, input sent empty even he has value before edit
this wired because i have the same table but with diffrent parmas in other view that working fine with editor inline
in this view when i want to edit, Air_Fare_T.AirFare_Code_T always sent empty on inline edit
i have this serverSide code:
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult GetDataAirFareTrip(int id)
{
var settings = Properties.Settings.Default;
var formData = HttpContext.ApplicationInstance.Context.Request;
using (var db = new DataTables.Database(settings.DbType, settings.DbConnection))
{
var editor = new DataTables.Editor(db, "Air_Fare_T", "Air_Fare_T_Id");
editor.Where(q =>
q.Where("Air_Fare_T.AirFare_Costing_T_Id", "(SELECT AirFare_Costing_T_Id FROM Air_Fare_T WHERE AirFare_Costing_T_Id= " + id + ")", "IN", false)
);
editor.Model<ViewModel.AirFareTripEditorVM>("Air_Fare_T")
.Field(new Field("Air_Fare_T.Air_Fare_T_Id")
.Validator(Validation.Numeric())
.Set(false)
)
.Field(new Field("Air_Fare_T.AirFare_Costing_T_Id")
.Validator(Validation.Numeric())
)
.Field(new Field("Air_Fare_T.AirFare_Code_T").Xss(true)
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null))
)
.Field(new Field("Air_Fare_T.Air_Fare_T_Type").Xss(true)
.Validator(Validation.Numeric())
.Options(new Options()
.Table("AirFare_Trip_Type")
.Value("AirFare_Trip_Type_Id")
.Order("AirFare_Trip_Type.AirFare_Trip_Type_Id")
.Label("AirFare_Trip_Type_Name")
)
.SetFormatter(Format.IfEmpty(null))
)
.Field(new Field("Air_Fare_T.Air_Fare_T_Currency").Xss(true)
.Validator(Validation.Numeric())
.Options(new Options()
.Table("CurrencyCosting")
.Value("Currency_Id")
.Order("CurrencyCosting.Currency_Id")
.Label("Currency_Name")
)
.SetFormatter(Format.IfEmpty(null)))
.Field(new Field("Air_Fare_T.Air_Fare_T_Price").Xss(true)
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null)))
.Field(new Field("Air_Fare_T.Air_Fare_T_PAX").Xss(true)
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null)))
.Field(new Field("Air_Fare_T.Air_Fare_T_Total").Xss(true)
.Validator(Validation.Numeric())
.SetFormatter(Format.IfEmpty(null)));
editor.Model<ViewModel.CostingAirlineEditorVM>("Costing_Airlines")
.LeftJoin("Costing_Airlines", "Costing_Airlines.Airline_Id", "=", "Air_Fare_T.AirFare_Code_T");
editor.Model<ViewModel.AirFareTripTypeEditorVM>("AirFare_Trip_Type")
.LeftJoin("AirFare_Trip_Type", "AirFare_Trip_Type.AirFare_Trip_Type_Id", "=", "Air_Fare_T.Air_Fare_T_Type");
editor.Model<ViewModel.CurrencyCostingEditorVM>("CurrencyCosting")
.LeftJoin("CurrencyCosting", "CurrencyCosting.Currency_Id", "=", "Air_Fare_T.Air_Fare_T_Currency");
// Post functions
editor.PreCreate += (sender, e) =>
{
var totalVal = getTotalValTrip(e.Values, id);
editor.Field("Air_Fare_T.Air_Fare_T_Total").SetValue(totalVal[1]);
editor.Field("Air_Fare_T.Air_Fare_T_Price").SetValue(totalVal[0]);
};
editor.PreEdit += (sender, e) =>
{
var totalVal = getTotalValTrip(e.Values, id);
editor.Field("Air_Fare_T.Air_Fare_T_Total").SetValue(totalVal[1]);
editor.Field("Air_Fare_T.Air_Fare_T_Price").SetValue(totalVal[0]);
};
editor.Process(formData.Unvalidated.Form);
DtResponse data = editor.Data();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
how to paint each row of different colors, using bootstrap 3 classes, information, success, warning, etc., using a foreach cycle
Hello, I am using the buttons.colVis plugin. After turning it on, the buttons are arranged horizontally ... And although they work, the appearance of the buttons does not change. Not visible button pressed or not. Also, I did not find how it is possible to exclude one of the column visibility buttons, with their help it is possible to make visible columns that should be constantly not visible. How can I arrange the buttons vertically, make the on / off switch visible, exclude the button for the first column?
// Dieser Service hilft beim Erstellen Ihrer Datentabelle-Optionen
vm.dtOptionsBestaende = DTOptionsBuilder.newOptions()
.withDataProp('data')
.withDOM('Brtip')
.withDisplayLength(36)
.withLanguage(dtLanguageDe)
.withOption('order', [0, 'asc'])
.withOption('select', {
info: false,
style: 'single',
toggleable: false
})
.withOption('ajax', {
url: 'Bestaende/GetDtFlatexDepotBestaende', // Aufruf von - controller/method
error: function (jqXHR, textStatus, errorThrown) {
alert('Es ist ein Fehler aufgetreten:\n' + errorThrown + '\nBitte Seite neu laden.');
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
},
type: 'POST',
data: function (d) {
d.FilterDatumVon = moment(vm.datumVon).format('Y-MM-DD HH:mm:ss');
d.FilterDatumBis = moment(vm.datumBis).format('Y-MM-DD HH:mm:ss');
d.FilterDepotBezeichnung = vm.filterDepotBezeichnung;
d.FilterISIN = vm.filterIsin;
},
})
.withOption('serverSide', true)
.withOption('orderMulti', false)
.withOption('deferRender', true)
.withOption('paging', true)
.withOption('processing', true)
.withOption('rowCallback', vm.rowCallback)
.withOption('scrollX', true)
.withOption('stateSave', true)
.withOption('buttons', [ 'colvis' ])
;
Hi, I have a data table with check boxes at the last column of the table. User can check multiple check boxes. When the second page is clicked, checked boxes in the first page are lost. Is there any option to retain same data after pagination. I'm doing ajax datatable, previous when I used to create html table and initialize as data table, this problem is not there. Please suggest. By the way below is my data table initialization code.
function InitializeCheckGrid(url, type, data, checkPosisition, CheckClass, checkValue)
{
var table = $('#example').DataTable
({
"ajax": {"url": url, 'type':type, 'data':data, 'dataType':'json'},
"sPaginationType": "full_numbers",
"lengthChange": false,
"pageLength":25,
"dom": "Bfrtip",
"orderCellsTop": true,
"fixedHeader": true,
"columnDefs": [{
'targets': checkPosisition,
'orderable': false,
'searchable':false,
'render': function (data, type, full, meta){
return '<label class="' + CheckClass + '"><input type="checkbox">' + checkValue + '</label>';
}
}],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
},
"buttons": ['copy', 'excel', 'pdf', 'csv', 'print']
});
/*table.buttons().container()
.appendTo('#example_wrapper .col-sm-6:eq(0)');*/
// Handle click on "Select all" control
$('#example-select-all').on('click', function(){
// Check/uncheck all checkboxes in the table
var rows = table.rows({ 'search': 'applied' }).nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
// Handle click on checkbox to set state of "Select all" control
$('#example tbody').on('change', 'input[type="checkbox"]', function(){
// If checkbox is not checked
if(!this.checked){
var el = $('#example-select-all').get(0);
// If "Select all" control is checked and has 'indeterminate' property
if(el && el.checked && ('indeterminate' in el)){
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
}
I've previously been using column().visible() with the column index to toggle the hiding and showing of a column. However, as more columns and customisation has been added, it's become laborious to keep a track of the indexes, especially when columns are not added to the end of the table but in the middle.
To make it easier I've switched to columns().visible() as it enables me to select the column using a jQuery selector (which I don't think the former does?). After switching over, I now have a problem whereby I can hide the column when toggling the visibility from a dropdown, but it doesn't reappear when selected again.
Page:
JavaScript:
var y = $('#tableBrowseProperties').DataTable({
"responsive": {
details: {
type: 'none',
display: $.fn.dataTable.Responsive.display.childRowImmediate,
renderer: function (api, rowIdx, columns) {
var data = $.map(columns, function (col, i) {
return col.hidden ?
'<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
'<td class="w-50"><strong>' + col.title + ':' + '<strong></td> ' +
'<td class="w-50 text-right">' + col.data + '</td>' +
'</tr>' :
'';
}).join('');
return data ?
$('<table id="dt-vertical-table" class="table table-striped w-100"/>').append(data) :
false
}
}
},
colReorder: true,
"searching": false
});
y.columns([$("#th-capitalisation"), $("#th-ae-fee"), $("#th-yield-bid"), $("#th-yield-mid"), $("#th-price-bid"), $("#th-price-mid"), $("#th-return-bid"), $("#th-return-mid"), $("#th-update"), $("#th-discount-bid"), $("#th-discount-mid")]).visible(false);
y.on('column-visibility.dt', function (e) {
y.columns.adjust().draw();
});
$('div.toggle-vis').on('click', function (e) {
e.preventDefault();
// Get the column API object
var attr = $(this).attr('data-column');
var column = y.columns($(attr));
// Toggle the visibility
column.visible(!column.visible());
y.columns.adjust().draw( false );
$(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
});
$('div.toggle-offer').on('click', function (e) {
e.preventDefault();
var columns = y.columns([$('#th-price-offer'), $('#th-yield-offer'), $('#th-return-offer'), $('#th-discount-offer')]);
columns.visible(!columns.visible());
y.columns.adjust().draw( false );
$(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
});
$('div.toggle-bid').on('click', function (e) {
e.preventDefault();
var columns = y.columns([$('#th-price-bid'), $('#th-yield-bid'), $('#th-return-bid'), $('#th-discount-bid')]);
columns.visible(!columns.visible());
y.columns.adjust().draw( false );
$(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
});
$('div.toggle-mid').on('click', function (e) {
e.preventDefault();
var columns = y.columns([$('#th-price-mid'), $('#th-yield-mid'), $('#th-return-mid'), $('#th-discount-mid')]);
columns.visible(!columns.visible());
y.columns.adjust().draw( false );
$(this).children('label').children('.uniform-checker').children('span').toggleClass('checked');
});
If using server side mode, and your columns's data is specified with a function, I've found that when you call ajax.reload() on your table, it calls that data function on the old data before calling it on your new data.
Here is a jsfiddle example https://jsfiddle.net/anneb574/1o6mtwxc/23/
I have made it so that whenever the data function is called, it logs the id of the row, so you can see what it's being called on.
If you go to the second page of data, and click the reset button, you'll see that the function is called on the page 2 data twice before being called on the page 1 data.
This seems fairly harmless, albeit inefficient, but my setup is a bit more complex and it's causing issues for me. (basically, I have a complex data layer providing data to the table, which my column's data fn needs to access, but with extra calls to data that no longer exists, I have to add more logic to prevent errors)
I have no experience with JS so please use small words!
I look at filter api, but my js skills are poor.
I want to filter the Datatable based on the first 1-4 invisible columns. (col1=?) AND (col2=?)... So could be just 1st col, could be all 4.
I would like to apply each filter request on button click event.
Could someone point me in right direction?
Also how to remove a filter?
thank you in advance for your help for my very noob questions.
He there,
I am using Editor and would like to add a computed value to the JSON string for being displayed in the table. It just needs to be displayed in the table - there is no need for saving it in the Database (there is no corresponding field in the Database ;-)).
How can I add such a computed value to the JSON string with Editor?
Thanks in advance!
Hi,
I have a table with only one row. There will never be more rows, because it is just a table for settings.
I would like to use the standalone mode with inline or bubble editing.
My goal is, that on page-load the fields are prefilled with the values from row_1 and can be edited.
What do I do wrong? Thanks in advance!
<div class="panel" data-editor-id="row_1">
<dl>
<dt>Jahresstatistik:</dt>
<dd>
<span data-editor-field="c_settings.dashboard_show_hours_year_statistics"></span>
</dd>
<dt>Nicht exp anzeigen:</dt>
<dd data-editor-field="c_settings.dashboard_show_total_hours_not_exported"></dd>
<dt>Office:</dt>
</dl>
</div>
</div>
<!-- Grid Row Main -->
<?php include 'templates/footer.php'; ?>
<script>
var editor;
(function($){
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "datatables_php/ajax.be_settings_hours.php",
onFieldError: 'focus',
fields: [
{
label: "Dashboard Jahresstatistik:",
name: "c_settings.dashboard_show_hours_year_statistics",
type: 'radio',
options: [
{ label: 'Ja', value: '1' },
{ label: 'Nein', value: '0' }
]
},
{
label: "Dashboard nicht exportierte Stunden",
name: "c_settings.dashboard_show_total_hours_not_exported",
type: 'radio',
options: [
{ label: 'Ja', value: '1' },
{ label: 'Nein', value: '0' }
]
},
]
} ); // EO Editor Instanzierung
$('[data-editor-field]').on( 'click', function (e) {
editor.inline( 'row_1' );
} );
editor.field('c_settings.dashboard_show_hours_year_statistics').input().addClass('form-check-input');
editor.field('c_settings.dashboard_show_total_hours_not_exported').input().addClass('form-check-input');
} ); // EO Doc ready
}(jQuery)); //
</script>