hello
i'm new at DataTable ... I've been downloaded & i want to use in my project but it's not working ... this is my whole page code at the attachment ...
hello
i'm new at DataTable ... I've been downloaded & i want to use in my project but it's not working ... this is my whole page code at the attachment ...
I'm trying to implement decimal number formatting by using the comma instead of the dot. The error occurs when the Editor is going to save the data.
In PHP file i have this instance
Field::inst( 'rawProducts.olii' )->validator( 'Validate::numeric')->getFormatter( 'Format::toDecimalChar' )->setFormatter( 'Format::fromDecimalChar')->setFormatter( 'Format::ifEmpty', 0 ),
The data is rendered correctly with the comma, but when I click the save button I return the following error
This input must be given as a number.
Specifically, in the Mysql table the field is defined as float (6.2)
I've tried several options like entering the comma option in validation, replacing the setFormatter method with this function
->setFormatter( function($val, $data, $field) {return str_replace ( ',' , '.' , $val );})
I would also need to include a validation of minimum / maximum value but with this the problems multiply .
I have tried for many hours to come up with this issue but without results, no suggestions. Thanks in advance
Hello,
I am trying to show datatable dynamically
For Ex
First i need to select which columns i need to see and then click on button this will show only selected columns.
So every time i click on button it should show different columns and data according to column.
But what happens. For the first time Datatable is loading fine. But when i de select some columns or add new columns and click on button it gives this error
c is undefined
b.nTablewrapper is null
I searched and found that i need to destroy datatable and then reinitialize it.
But when i use destroy it doesnt show any data.
Below is my code
$('#table').DataTable().fnDestroy();
$('#table').DataTable(
scrollCollapse: true,
header : true,
"lengthMenu": [ 10, 50, 100 ],
footer: true,
"paging": true,
"ordering": true,
scroller: true,
"serverSide": true,
"destroy":true,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": "<a class='btn searchBtn' id='searchBtn'><i class='fa
fa-search'></i></a> "
},
dom: 'lBfrtip',
buttons: [
{
text: '<i class="fa
fa-refresh"> Refresh Records</i>',
action: function ( e, dt, node, config ) {
dt.ajax.reload();
}
}
],
"ajax":{
url : url,
type: "post",
error: function(data){
//error code
},
global: false,
},
deferRender: true
);
Hi,
I'm moving from foundation 5.5.x to 6.5.x and saw that foundation has changed the way they defines and style e.g. buttons. In version 5.5.x foundation used ul/li to define buttons, in 6.5.x they use div instead.
If you want to style datatables with foundation it seams that datatables expect the buttons to be ul/li and this cause foundation to fail to style the buttons correctly.
In general, hows the support for foundation 6.5.x in the latest datatables? Any plans to support the latest foundation versions?
Thanks in advance!
The child row button seems to use text-primary
colour, which appears to have hardcoded since it doesn't match any user themes that already override Bootstrap's text-primary
.
For example my text-primary
is green, but DataTables text-primary
is still the default blue? How do I fix this?
Hi Im trying to set the value of a session variable and use it in a "where condition",
I've read this https://editor.datatables.net/manual/php/conditions#Setting-field-values
but I just cant get what I want
Im doing this
include( "../../php/DataTables.php" );
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
$editor->field(
new Field( 'userid' )
->setValue($_SESSION['IdUsuario'])
);
$db->sql( "SET NAMES 'utf8'" );
Editor::inst( $db, 'altaestudios', 'IdAltaEstudios')
->fields(
Field::inst('altaestudios.FechaEstudio')
->validator( 'Validate::dateFormat', array(
"format" => Format::DATE_ISO_8601,
"message" => "Ingrese un formato válido de fecha yyyy-mm-dd"
) )
->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
Field::inst('altaestudios.activo'),
Field::inst('altaestudios.archivo'),
Field::inst('archivo.web_path'),
Field::inst('altaestudios.IdTipoEstudio'),
Field::inst('tipoestudio.NombreEstudio')
)
->leftJoin('tipoestudio', 'altaestudios.IdTipoEstudio', '=', 'tipoestudio.IdTipoEstudio')
->leftJoin('archivo', 'altaestudios.archivo', '=', 'archivo.IdArchivo')
->where('altaestudios.IdUsuario','userid') // my new variable if I set a number like 63 I get results.
->process( $_POST )
->json();
I have created a child row that opens just like this example:
http://olgatsib.comcdn.datatables.net/blog/2014-10-02
I want to make it so only one child can be shown at a time.
So IF one child row is already shown, then hide that first and then show the row that has been clicked on.
I have added a class to the added tr row when it is created. I now want to have some code that closes/hides it.
I have written the following but it is not working yet. Any advice appreciated.
var siblingTr = $(this).parent().parent().children('tr.child-row').first();
if (siblingTr.length) {
console.log('hide siblings');
var siblingRow = table_days_free.row( siblingTr );
siblingRow.child.hide();
}
I have a problem with generated content for a column, it is not working when using Ajax data source from objects, the buttons do not get rendred in the table. here my initialization code for the table:
var table = $('#example').DataTable( {
"ajax": 'http://localhost/two/test/api2',
"columns": [
{ "data": "name" },
{ "data": "adress" },
{ "data": "ID" }
],
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
I need to redraw table after some edit but it is now working here is my code what i am doing wrong?
function Success(response)
{
$("#info").hide();
$("#warning").hide();
if (!response.responseJson.isSuccess) {
$("#messageError").html(response.responseJson.Message);
$("#warning").show();
} else if (response.isEdit) {
var trCurrent = $("#" + response.model.Id);
var table = $("#example1").DataTable();
var rowdata = table.row(trCurrent);
rowdata.data()[0] = response.model.FirstName;
table.draw();
$("#messageInfo").html(response.responseJson.Message);
$("#info").show();
setTimeout(function () {
$("#Close").click();
},
1500);
} else {
var modelData = response.model;
ajaxAddNewRow(modelData,
function () {
$("#messageInfo").html(response.responseJson.Message);
$("#info").show();
setTimeout(function () {
$("#Close").click();
},
1500);
});
}
}
To be clear table wont update,new value wont show
I am trying to get the buttons (https://datatables.net/extensions/buttons/) to show in my example fiddle - http://jsfiddle.net/juro/edbzfrxd/ . The only examples I have found overwrite the "show # entries" drop-down, which I still want to display.
In my case, I am rendering a table based on values from PHP (products in my case). Then I want to display a dropdown (status, e.g. "sold", "not sold", etc.) - clicking on one of these, the list is filtered.
Any ideas?
GET https://example.com/fonts/glyphicons-halflings-regular.woff2
GET https://example.com/fonts/glyphicons-halflings-regular.woff
GET https://example.com/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)
I already have Bootstrap CSS loaded, a customised Bootstrap theme CSS loaded, and the DataTables Bootstrap styling CDN CSS loaded but I still get these error messages?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css"/>
<link rel="stylesheet" href="/css/theme.css">
<link rel="stylesheet" href="/css/style.css">
Hi all,
I am using a datatable (d1) editor which opens a dialogbox containing another datatable (d2). When trying to edit the lines in d2 no input is taken. The editor in d2 is shown "doubled" like in the picture. Every help will be appreciated.
Thanks a lot
Adrian
The server wants the url to include the ID of the record being edited in the PUT. I have the ID in the data. How do change the URL based on the data?
For example if the record ID were 251, I'd want to PUT the update here:
http://example.com/api/update/251/
Hello guys.
I would like to modify the fields in a form (show / hide) according to the value selected in a select field that has three values.
This process has to be done with three different criteria depending on the selected value.
Return the code I used, can you help me to figure out where I am wrong?
Thanks a lot.
editor.dependent( 'options', function ( val ) {
return val === 'Simple' ?
{ hide: ['1', '2', '3', '4', '5','6','7','8'] } :
{ show: [] };
return val === 'Simple2' ?
{ hide: ['5', '6', '7', '8'] } :
{ show: ['1', '2', '3', '4'] };
return val === 'Simple3' ?
{ hide: ['1', '2', '3', '4'] } :
{ show: ['5', '6', '7', '8'] };
} );
Hello to All.
I need to use "OR" condition and "AND" condition at same time, but working only that one which is upper. Here is my code, can anyone tell me my error?
->where( function ( $q ) use( $todaydate1, $todaydate, $time, $paa ){
//$q->where('username', $p)
$q->where( 'date', $todaydate1, '=' );
$q->or_where( function ( $r ) use( $todaydate, $time ) {
$r->where( 'date', $todaydate );
$r->where( 'time', $time, '>=' );
} );
} )
->where( 'username', $paa)
How to use them at same time?
I use datatables in booster for develop and open all button (copy, csv, execl, pdf and print). I found problem on very browser on some PC. In show but print button and it not work! pls help!!!!
I have a details row with datatables. Details row is working properly, but when i go to the other page this error comes up.
Here my HTML
<table id="dt_basic" class="table table-striped table-hover" width="100%">
<thead>
<tr>
<th></th>
<th class="text-center">ID</th>
<th class="text-center">Nama Bank</th>
<th class="text-center">Nama Akun</th>
<th class="text-center">No. Rekening</th>
<th class="text-center">Actions</th>
</tr>
</thead>
</table>
My JS
$('#dt_basic').dataTable({
processing: true,
serverSide: true,
ajax: 'datatables/dataBank',
columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
{ data: 'id', name: 'id', orderable:true},
{ data: 'nama_bank', name: 'nama_bank', orderable:true },
{ data: 'nama_akun', name: 'nama_akun',orderable:true },
{ data: 'no_rek', name: 'no_rek',orderable:true },
{ data: 'action', name: 'action', 'searchable':false },
],
"sDom": "<'dt-toolbar hidden-print'<'col-xs-12 col-sm-11'f><'col-sm-1 col-xs-12 hidden-xs'l>r>"+
"t"+
"<'dt-toolbar-footer hidden-print'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"autoWidth" : true,
"preDrawCallback" : function() {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_dt_basic) {
responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
}
},
"rowCallback" : function(nRow) {
responsiveHelper_dt_basic.createExpandIcon(nRow);
},
"drawCallback" : function(oSettings) {
responsiveHelper_dt_basic.respond();
},
order: [[1, 'desc']],
"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
'iDisplayLength': 50,
});
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>a</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>b</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
event.preventDefault();
var table = $('#dt_basic').DataTable();
var data;
var SimpanOrEdit;
$('#dt_basic tbody').on('click', 'td.details-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');
}
} );
} );
if i stay in this page, i can reload and access the datatables. It's working
But when i going to the other page, i got this error
jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'style' of undefined
at Ha (jquery.dataTables.min.js:62)
at Z (jquery.dataTables.min.js:13)
at t.<anonymous> (jquery.dataTables.min.js:126)
at t.iterator (jquery.dataTables.min.js:100)
at t.<anonymous> (jquery.dataTables.min.js:126)
at Function.adjust (jquery.dataTables.min.js:103)
at t.<anonymous> (jquery.dataTables.min.js:126)
at t.visible (jquery.dataTables.min.js:103)
at t.<anonymous> (jquery.dataTables.min.js:138)
at t.iterator (jquery.dataTables.min.js:100)
If i remove this in my js
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
Everythings work fine. But my table doesnt have row details
Im using Laravel. I have tried to use Yajra and i got the same error. Please help me. Thanks in advance ...
Hi!
Problem 1
When I test datatables in my Web application with IE9. There are only Copy and Print exports available.
When I test it on Firefox 45, all exports are appear namely Copy, Excel, CSV, PDF and Print.
It seems to have a bug with Internet Explorer 9.
Problem 2
Sometimes (not everytime), datatables are blocked on the loading state. By clicking on Next, it "debugs" it and the data appear in the datatables.
How to debug it?
Thank you in advance for your response.
Hi, why header width not match with column data width?, instead if user filter something or sort any
Hi Allan,
I´ve try upload file (with custom action) from mobile browsers and the action fail.
My test environment:
Secuence action: (on my test):
On Chrome , on my form press "Choose file..." button on Datatables Editor , go to gallery picture (on device), select an *.jpg image and when return to form it´s frozen. None error mesage is showed , and the picture It´s not show it on the form. And on server side its not uploaded to server.
How I can to debug this issue?
Thank you indvance!
Eduardo
JS: form and table code (main code):
var parser_origin = 'https://xxxxxxx.com'; \\ NOTE: xxxxxx , is my test domain, omitted on purpose
editor = new $.fn.dataTable.Editor( { //ahora inicializo datatable.editor. se lanza con el $(document).ready anterior
ajax: {
url: parser_origin + "/_country/spain/v137/lacarte.restaurants.back/alacarte/php/mi.carta.php",
type: "POST",
data: function ( d ) {
// ¡¡¡ Personalizar el site para cada cliente!!!!
d.site = id_establecimiento(); //llamada a mi funct. Recupero el (ID), guardado tras logarse
}
},
table: "#example", //se necesita para upload
fields: [ {
label: "Nombre:",
name: "nombre",
status: "This field is required"
},
....
{
label: "Imagen:",
name: "image",
//status: "This field is required", //add, foto lo usa scan and get app
type: "upload",
display: function ( file_id ) {
return '<img src="'+table.file( 'files_cartas', file_id ).web_path_thumb2+'"/>'; //show image optimized
},
clearText: "Clear",
ajaxData: function ( d ) {d.append( 'site', id_establecimiento() ); }, // here I´ve add " }, "
noImageText: 'No image'
},
....
var table = $('#example').DataTable( {
//$('#example').DataTable( { // ori: cuando no se usa upload
responsive: true,
dom: "Bfrtip",
ajax: {
url: parser_origin + "/_country/spain/v137/lacarte.restaurants.back/alacarte/php/mi.carta.php",
type: "POST",
data: function ( d ) {
// ¡¡¡ Personalizar el site para cada cliente!!!!
d.site = id_establecimiento(); //llamada a mi funct. Recupero el (ID), guardado tras logarse
}
},
columns:
[
...
{
data: "image",
render: function ( file_id ) {
return file_id ?
// ver en table tamaño +adecuado: width="200" height="133", proporcion (4:3) para fotos de 480x320
'<img src="'+table.file( 'files_cartas', file_id ).web_path_thumb2+'" class="" width="120" height="79"/>' :
null;
},
defaultContent: "No image",
title: "Imagen"
},
...
PHP: (focus on code)
// DataTables PHP library
include( "../../../../_DataTables/php/DataTables.php" );
$site=$_POST['site'];
$idioma='es'; //se fija el idioma del pais. Es para la app de gerente
// este code esta relacionado con "upload custom actions". INICIO
if ( $_SERVER["REQUEST_METHOD"] == "POST" ) { // comprueba que el metodo es POST (se hizo)
// Web and thumbs paths to file
$webPath = '/upload_cartas/';
$webPathThumbs1 = '/upload_cartas/thumb1/'.$site. '/';
$webPathThumbs2 = '/upload_cartas/thumb2/'.$site. '/';
// System paths
$sysPath = $_SERVER['DOCUMENT_ROOT'] . $webPath; // todas las images q subo las dejo en /upload/. Un script las borrara
$sysPathThumbs1 = $_SERVER['DOCUMENT_ROOT'] . $webPathThumbs1 ;
$sysPathThumbs2 = $_SERVER['DOCUMENT_ROOT'] . $webPathThumbs2 ;
// Create an array to hold variables to be used in the closure function
$varArray = array (
"webPath" => $webPath,
"sysPath" => $sysPath,
"webPathTumbs1" => $webPathThumbs1,
"sysPathThumbs1" => $sysPathThumbs1,
"webPathThumbs2" => $webPathThumbs2,
"sysPathThumbs2" => $sysPathThumbs2
);
}
// este code esta relacionado con "upload custom actions". FIN
function make_thumb($src, $dest, $desired_width) {
if (!file_exists($dest)) {
$source_image = imagecreatefromjpeg($src);
$width = imagesx($source_image);
$height = imagesy($source_image);
$desired_height = floor($height * ($desired_width / $width));
$virtual_image = imagecreatetruecolor($desired_width, $desired_height);
imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $width, $height);
imagejpeg($virtual_image, $dest);
}
}
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Join,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'r_cartas' )
->fields(
...
Field::inst( 'image' )
->setFormatter( 'Format::nullEmpty' )
->upload(
// Custom upload actions. start
Upload::inst( function ( $file, $id ) use ( $varArray, $db ) {
move_uploaded_file( $file['tmp_name'] , $varArray["sysPath"] .$id. '.jpg' );
make_thumb($varArray["sysPath"] .$id. '.jpg', $varArray["sysPathThumbs1"].$id. '.jpg', 480);
make_thumb($varArray["sysPath"] .$id. '.jpg', $varArray["sysPathThumbs2"].$id. '.jpg', 120);
$db->update(
'files_cartas', // Database table to update
array ( //[
"web_path" => $varArray["webPath"] .$id. '.jpg',
"system_path" => $varArray["sysPath"] .$id. '.jpg',
//"system_path" => $varArray["sysPath"] . $file['name'] //escribe nombre de fich.
"web_path_thumb1" => $varArray["webPathTumbs1"] .$id. '.jpg',
"sys_path_thumb1" => $varArray["sysPathThumbs1"] .$id. '.jpg',
"web_path_thumb2" => $varArray["webPathThumbs2"] .$id. '.jpg',
"sys_path_thumb2" => $varArray["sysPathThumbs2"] .$id. '.jpg',
), //],
array ( "id" => $id )
//[ "id" => $id ] //ori
);
return $id;
//var_dump($file); //ONLY TEST
} )
// Custom upload actions. end
->db( 'files_cartas', 'id', array(
'site' =>$site,
'filename' => Upload::DB_FILE_NAME,
'filesize' => Upload::DB_FILE_SIZE,
'web_path' => '',
'system_path' => '',
'web_path_thumb1' => '',
'sys_path_thumb1' => '',
'web_path_thumb2' => '',
'sys_path_thumb2' => '',
) )
// for upload file
->where( function ( $q ) use ( $site ) {
$q->where( 'site', $site );
} )
->validator( function ( $file ) {
return$file['size'] >= 3000000 ?
"Files must be smaller than 3000K o 3,0 Mb" :
null;
} )
->dbClean( function ( $data ) {
// Remove the files from the file system
for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
unlink( $data[$i]['system_path'] ); // upload file folder
unlink( $data[$i]['sys_path_thumb1'] ); //my thumb file folder #1
unlink( $data[$i]['sys_path_thumb2'] ); //my thumb file folder #2
}
// Have Editor remove the rows from the database
return true;
} )
->allowedExtensions( array( 'jpg' ), "Please upload an image file with JPG extension" )
),
Field::inst( 'creado_date' )
)
->join(
Mjoin::inst( 'alergenos' )
->link( 'r_cartas.id', 'r_cartas_alergenos.item_id' )
->link( 'alergenos.id', 'r_cartas_alergenos.alergeno_id' )
->fields(
Field::inst( 'id' )
->validator( 'Validate::required' )
->options( 'alergenos', 'id', 'name' ),
//->options( 'access', 'id', 'code' ),
Field::inst( 'name' ),
//add mostrar codes alergenos en tabla
Field::inst( 'code' )
)
)
->where( 'site', $site)
//->where( 'id_lang', $idioma )
// puedo anidar where´s pero usando diferentes campos
->process( $_POST )
->json();
JSON output: focus on files_cartas (files)
{"data":[{"}],"options":{"alergenos[].id":[{},
"files":{"files_cartas":{"765":{"id":"765","site":"342800010","filename":"dessert-398966_640.jpg","filesize":"62137","web_path":"\/upload_cartas\/765.jpg","system_path":"\/home\/tripntry\/www\/upload_cartas\/765.jpg","web_path_thumb1":"\/upload_cartas\/thumb1\/342800010\/765.jpg","sys_path_thumb1":"\/home\/tripntry\/www\/upload_cartas\/thumb1\/342800010\/765.jpg","web_path_thumb2":"\/upload_cartas\/thumb2\/342800010\/765.jpg","sys_path_thumb2":"\/home\/tripntry\/www\/upload_cartas\/thumb2\/342800010\/765.jpg"},"763":{"id":"763","site":"342800010","filename":"cod-1252654_640.jpg","filesize":"80948","web_path":"\/upload_cartas\/763.jpg","system_path":"\/home\/tripntry\/www\/upload_cartas\/763.jpg","web_path_thumb1":"\/upload_cartas\/thumb1\/342800010\/763.jpg","sys_path_thumb1":"\/home\/tripntry\/www\/upload_cartas\/thumb1\/342800010\/763.jpg","web_path_thumb2":"\/upload_cartas\/thumb2\/342800010\/763.jpg","sys_path_thumb2":"\/home\/tripntry\/www\/upload_cartas\/thumb2\/342800010\/763.jpg"},"767":{"id":"767","site":"342800010","filename":"cocktail-1542495_640.jpg","filesize":"38365","web_path":"\/upload_cartas\/767.jpg","system_path":"\/home\/tripntry\/www\/upload_cartas\/767.jpg","web_path_thumb1":"\/upload_cartas\/thumb1\/342800010\/767.jpg","sys_path_thumb1":"\/home\/tripntry\/www\/upload_cartas\/thumb1\/342800010\/767.jpg","web_path_thumb2":"\/upload_cartas\/thumb2\/342800010\/767.jpg","sys_path_thumb2":"\/home\/tripntry\/www\/upload_cartas\/thumb2\/342800010\/767.jpg"}}}}