Hi All,
Just wondering if there's a way to change how the alternating row color functions.
Currently it highlights each row on an odd/even - but what I'm hoping for is to highlight rows based on the first column?
I've had a look at the RowGroup extension - but don't want to actually 'group' then items with a header row.
Cheers,
Jeff.
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hello,
I have an Editor DataTables input field as select field, which gets populated from a nested table.
TL;TR: How to rename the datatables title without the columns.title option?
this is my php server script:
$editor->field( Field::inst( 'tableA.'.$field )
->options( Options::inst()
->table( 'tableB' )
->value( 'user_id' )
->label( 'last_name' )
->where( function ($q) {
$q->where( 'activ', 1 );
$q->and_where( function ($r) {
$r->where( 'role', 'Zoopäd' );
$r->or_where( 'role', 'Moderation' );
});
})
)
->validator( Validate::dbValues() ));
the $field variable comes from a foreach loop through the columns
and the js function:
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: 'getTermine.php',
table: '#tabTermine',
fields: [
// more field here
{
label: 'ZooPäd',
name: 'zsv_termine.zoopaed',
type: 'datatable',
placeholder: 'ZooPäds wählen...',
multiple: true,
config: {
select: {style: 'multi'},
language: {
searchPlaceholder: 'Suche',
search: '',
info: 'Mehrfachauswahl möglich',
select: {rows: {_: '...%d ZooPäds ausgewählt', 0: '', 1: '...ein ZooPäd ausgewählt'}}
}
}
}
//more fields
]
})
});
So far, it's working perfectly. But I cannot figure out, how to change the "Label" string above the select options (see screenshot)
I tried the columns.title option.
columns: [
{ title: 'some title' }
]
This works on the "Label" string but seems to overwrite the data and I don't now, where the data comes from in this scenario. It's not field, nor tableA.field, nor tableB or the column head of tableB.
Is there another way to replace this string, or can you tell me, what is expected in the columns.data attribute?
thank you
Patrick
I want to send email with attached Excel created from Datatables buttons.
I created controller to send email.
and created datatables to export excel
I do not know how to get the excel in ajax to send to controller.
this is my code but it is not working
$('#example-table').DataTable({
dom: 'Blfrtip',
buttons: [
{
extend: 'excelHtml5',
title: 'Data',
text: 'Export To Excel',
exportOptions: {
format: {
body: function (inner, rowidx, colidx, node) {
if ($(node).children("input").length > 0) {
return $(node).children("input").first().val();
} else {
return inner;
}
}
}
},
action: function (e, dt, node, config) {
//var files = $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
var table = $('#example-table').DataTable();
var data = table.buttons.exportData();
var files = $("#fileUploader").get(0).files[0];
var url = "/test/SendEmail";
formData = new FormData();
formData.append("fileUploader", files);
jQuery.ajax({
type: 'POST',
url: url,
data: formData,
dataType: 'xlsx',
cache: false,
contentType: false,
processData: false,
});
}
},
]
Hello.
When I try to export my datatable with more than 100000 records to excel or csv I get an out of memory message in the browser.
Has anyone had this issue happen to him.
Here is how to perform the initialization of the datatable
table = $('#tabla_consultas').DataTable({
orderCellsTop: true,
data: result,
pageLength: 30,
autoWidth: true,
initComplete: function() {
$('#sidebar2').removeClass('active');
$('html').css('overflow','auto');
$('.overlay').removeClass('active');
},
dom: 'Bfrtip',
language: {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "<b>Buscar:</b>",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"Page": "Página",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fas fa-copy fa-3x" style="background: none;"></i>',
titleAttr: 'Copy',
title: name
},
{
extend: 'excelHtml5',
text: '<i class="fas fa-file-excel fa-3x" style="background: none;"></i>',
titleAttr: 'Excel',
title: name
},
{
extend: 'csvHtml5',
text: '<i class="fas fa-file-csv fa-3x" style="background: none;"></i>',
titleAttr: 'CSV',
title: name
},
],
columnDefs: columnas,
columns: title
});
Hi,
let's take the multi row editing example.
If I would use the inline or the bubble editing to update, let's say, a particular "Position", then only the modified cells would be sent to the server.
If I use the main editing mode (i.e. by clicking the "Edit" button) and update, for instance, only the "Position" cell of a couple of rows, then all the rows data is sent to the server (the data can be checked in the preSubmit function).
This makes sense; but in my use case I, dynamically, hide some fields from the displayed modal (after clicking the "Edit" button) and I don't want that these fields are sent to the server.
This would allow me to reduce any possible data overwriting conflict.
How can I implement this?
Is there any attribute that I can, dynamically, add (and remove) to the fields?
Thanks!
Link to test case: https://jsfiddle.net/0kuwsLt7/5/
Debugger code (debug.datatables.net): https://jsfiddle.net/0kuwsLt7/5/
Error messages shown:
Description of problem:
Hi,
i have problem with header is not fit column, i've been using .columns.adjust() or ( like in this web https://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/) edit in html width=100% but useless. can you refer me some keyword for my case ? thanks before 
I have an array of array of size 500*1000. When i try to load this, i get Aw Snap memory error from Chrome browser. It was all fine till Chrome v102. Now in the latest version we get this error.
Code : https://drive.google.com/file/d/1pUs5GvZTYlX2n0ZxHghbIpErOBSfzi8z/view?usp=sharing
Link to test case: http://jsfiddle.net/tgsbqr8k/1/
Debugger code (debug.datatables.net): /
Error messages shown: /
Description of problem:
Hello,
i want to set data-order attribute after initialization. The cells are firstly empty, then their values are dynamically set after a http request (i directly populated cells from a JS object in my test case).
I set value and data-order on each cells once this request is done, then each cell's cache is cleared and the table is drawed.
But after that the order doesn't work as expected : it is not not based on data-order attribute as you can see.
In my example, the employees should be ordered by their lastname.
I hope my question is well explained (sorry for my english), a test case is linked to this topic.
Thanks in advance for your help !
Jérôme
Want to set different row size for two table on single page but m unable to set it gets overwrite.
I have used two script which contain two different row size but while running the page it will overwrite to scripts and show same row size for both the tables kindly help..
Link to test case: https://stackoverflow.com/q/73965727/679449
Debugger code (debug.datatables.net):
Error messages shown: none
Description of problem: I have some rows with cells containing multiple values. The counts appear correctly in the search pane, but when clicked, do not show the rows containing the multiple values. See row #1 which has two "Offices". Any suggestions?
I have a filter checkbox and it's working perfectly, what I wanted to add next is an input of numbers beside the checkboxes to filter how many of said data to filter.
live example: http://live.datatables.net/xepaduje/3/edit
example: Let's say column 6 is a child row with images if I click the checkbox for image (1222) and input number 1 it will return rows with 1222 existing once or more, and that is the normal behavior, but if the input number is 2 it will search for rows where 1222 exist twice or more this is also working even though it's not on the example, but the problem with this is when you click another checkbox with input number 1 the already clicked checkbox will also become input number 1.
this is the actual code
$('input:checkbox').on('change', function () {
//getting the input number for the specified checkbox
var x = $(`#count-${this.value}`).map(function(){
return this.value
}).toArray().join("")
var positions = $('input:checkbox[name="Characters_Filter"]:checked').map(function() {
return '(.*' + this.value + `){${x}}`;
}).get().join('');
//filter in column 6, with an regex, no smart filtering, not case sensitive
table.column(6).search(positions, true, false, false).draw(false);
});
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I am working in a legacy java environment at the server side and find myself having problems to parse the JQuery Datatables request (either sent as GET or POST) because the nested '[]' notation (e.g. "columns[0][search][Regex]=false" using classical bean libraries as this notation doesn't really conform to a bean standard).
Therefore I was wondering whether I could have Datatable post the query parameters as a JSON string (e.g. what you get with 'table.ajax.params()'). That would sound logical since it also expects a JSON result. I am a novice at javascript and JQuery/Datatable so I don't see directly how to do this.
Hello ,
I want to use datatables with pagination, I have a database table with more than 1000 rows
How to use it
Thanks a lot
Hello,
I would like to get the value of the logs to show in the table,
Example of log:
{"gestcol_colaboradores":{"id_colaborador":"1231233","nome":"Nome LastName","data_nasc":"2022-09-01","nif":"22222222","sexo":"1","nacionalidade":"11","telefone":"999999999","email":"email@email.com","morada":"MORADATESTE","cp":"9999-999","localidade":"Local","distrito":"2","dc":"1","data_atendimento":"0000-00-00","notas":""}}
My JS
/*
* Editor client script for DB table colaboradores_logs
* Created by http://editor.datatables.net/generator
*/
(function($){
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="" cellspacing="" border="0" style="width:100%;table-layout: fixed;" >'+
'<tr>'+
'<th style="width:100%">Dados:</th>'+
'</tr>'+
'<tr>'+
'<td>'+d.valores+'</td>'+
'</table>';
}
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/logs/table.logs_colaboradores.php',
table: '#logs_gestcol_colaboradores',
fields: [
{
"label": "Utilizador:",
"name": "utilizador"
},
{
"label": "Atividade:",
"name": "atividade"
},
{
"label": "Dados Colaborador:",
"name": "valores",
"type": "textarea"
},
{
"label": "ID Colaborador:",
"name": "id_colaborador"
},
{
"label": "Data:",
"name": "data"
}
]
} );
var table = $('#logs_gestcol_colaboradores').DataTable( {
order: [[ 5, "desc" ],],
scrollCollapse: true,
pageLength : 30,
language: {"url": "js/Portuguese.json"},
dom: 'Bfrtip',
ajax: 'php/logs/table.logs_colaboradores.php',
columns: [
{
"className": 'dt-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"data": "utilizador"
},
{
"data": "atividade"
},
{
"data": "valores", "visible": false, //log values
},
{
"data": "id_colaborador"
},
{
"data": "data"
}
],
rowCallback: function ( row, data, index ) {
if ( data.atividade == "create" ) {
$('td', row).css('background-color', 'rgb(0, 255, 0, 0.2)');
}
else if ( data.atividade == "edit" ) {
$('td', row).css('background-color', 'rgb(255, 255, 0, 0.2)');
}
else{
$('td', row).css('background-color', 'rgb(255, 51, 0, 0.2)');
}
},
select: true,
lengthChange: false,
buttons: [
{ extend: 'copy', editor: editor, text: '<i class="fas fa-paste"></i>',titleAttr: 'Copiar',},
{ extend: 'excel', editor: editor, text: '<i class="fas fa-file-excel"></i>',titleAttr: 'Guardar',},
]
} );
$('#logs_gestcol_colaboradores').on('click', 'td.dt-control', function () {
var tr = $(this).closest('tr');
var row = table.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');
}
} );
} );
}(jQuery));
my current php:
<?php
include( "../lib/DataTables.php" );
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
Editor::inst( $db, 'logs_gestcol_colaboradores', 'log_id' )
->fields(
Field::inst( 'utilizador' ),
Field::inst( 'atividade' ),
Field::inst( 'valores' ), // log values
Field::inst( 'id_colaborador' ),
Field::inst( 'data' )
)
->process( $_POST )
->json();
I save my logs like this
->on( 'postCreate', function ( $editor, $id, $values, $row ) {
logChange( $editor->db(), 'create', $id, $values );
} )
->on( 'postEdit', function ( $editor, $id, $values, $row ) {
logChange( $editor->db(), 'edit', $id, $values );
} )
->on( 'postRemove', function ( $editor, $id, $values ) {
logChange( $editor->db(), 'delete', $id, $values );
} )
I tried to json_decode, but I need to get the "valores" first then decode it to set it as data.
Is there anyway I could show the variables instead of the whole array?
Error messages shown:
Error adding field - unknown field type select2
Description of problem:
Paying customer using last version of the Editor. I tried to include multiple release of select2 from version 3 to 4 and rc. But the editor is not finding select2, I use it on the page without any issue. Anyone can help me investigation this?
Currently I set the columns with the data from the JSON using columns:
// setting the columns from the html builder
->columns($this->getColumns())
// setting the data
protected function getColumns()
{
return [
['title' => 'Id', 'data' => 'id'],
['title' => 'Status', 'data' => 'status'],
['title' => 'Account Number', 'data' => 'account_number'],
['title' => 'Account Name', 'data' => 'account_name'],
];
}
But I need to combine the account_number and account_name in a single column called Account Information. How should I do that? I got lost in the docs, I'm not sure if it's something to do via columnDefs, or editColumn or setting the row data somehow?
Test case identifying issue (Note this is someone else's example but highlights the issue)
Description of problem:
In the above test case the table has the required individual column filters and they are functioning as required for filtering but the filter columns are not acting responsively. When you collapse the size of the page columns get collapsed as expected and can be expanded with the + symbol but he filter headers are not, they are still displayed off the side of the page. How do I get these column filters to hide along with the column data?
Any help is appreciated...
Regards,
Rob O.
I want to this code-
<tr class="odd"><td><img src="https://ffp.dgfood.gov.bd/foodfriendly/uploads/realimage/muktagacha465/vr-1210655.jpeg" alt=" " style="height: 150px; width: 150px;"></td><td class="sorting_1">1</td><td>7320154722</td><td>মোঃ তাজুল ইসলাম</td><td>বৈবাহিক অবস্থাঃ বিবাহিত <br> <i>স্বামী/স্ত্রীর নামঃ মোছাঃ হাছিনা খাতুন</i><br>স্বামী/স্ত্রীর এনআইডিঃ 7770137326</td><td>গ্রাম/রাস্তা: হরিরামপুর পুর্বপাড়া<br>পোস্ট অফিস: দুল্লা-2210<br><br> ওয়ার্ড নম্বরঃ 1<br>উপজেলাঃ মুক্তাগাছা জেলাঃ ময়মনসিংহ</td><td>গ্রাম/রাস্তা: হরিরামপুর<br>ইউনিয়ন: দুল্লা<br> ওয়ার্ড নম্বরঃ 1<br>উপজেলাঃ মুক্তাগাছা জেলাঃ ময়মনসিংহ</td><td>
</td></tr>