Hello, the editor modal window is longer than the available page height therefore the top is hidden and it doesn't scroll. The content inside the window does scroll and the page behind it scrolls too.
I'm pretty sure it depends on the navbar that is fixed on top. Maybe I could try to fix it using the zindex, is there a clever way to fix this issue?
I'm using Bootstrap v3.3.6, Datatables v1.10.7, Datatables Editor v1.4.2, jQuery v1.11.1
Hi,
I want to implement a custom action on a button (search and replace). I found already the multi-row (bulk edit) blog post and implementet my function like that.
I have the following javascript code in the Buttons section in my DataTable object:
{
text: "search and replace",
action: function (e, dt, node, config) {
var searchTerm = new RegExp($('#search').val());
var replaceTerm = $('#replace').val();
var rows = table.rows( {selected: true} ).indexes();
editor.edit(rows, false);
$.each(rows, function(i, rowIdx) {
var value = table.cell(node).data();
if (searchTerm !== '' && searchTerm.test(value)) {
if (replaceTerm !== '') {
editor.field('someField').multiSet(row.id(), row.data().someField.replace(searchTerm, replaceTerm));
}
}
});
editor.submit();
},
editor: editor
}
When I am searching and replacing for one term only it works fine. But if I want to search and replace multiple values on multiple rows it won't work.
The replace function works fine. console.log prints out the correct values. But these values aren't set inside the table row(s) and sent properly to the backend.
Any suggestions? Or is this impossible?
Hello,
I just started using datatable in one of my Angular 6 project, and I'm really lost when it gets to refresh my table over a selection in a dropdown menu.
Here is a preview of my app, and what I want to do =
So, first I select in the dropdown a value wich trigger a API call. The result is an array of data wich will be displayed in my table. Here's the thing, I don't know the structure of the array, as datas come from an XLS document, converted in JSON by a NodeJS backend.
Every XLS document is different, so I have to build the columns and the rows in my table. And that is working perfectly when I want to display a Bootstrap table.
But, I really want datatable features over that bootstrap table, such as search and pagination.
With the code below, I can display my table with Datatable features only on first selection in the dropdown.
If I select an other value in the list, my table is reloaded, but datatable functionalities are not, and I get an error :
DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
I don't know how to recreate the table with new data, when the function is triggered.
It's been irking me for several days, and i tried so much things I saw on the web, that I'm out of ideas.
If you guys have the solution, you'll save me !
The code :
HTML
<table datatable id="DataTables_Table_0" [dtTrigger]="dtTrigger" class="table table-hover table-striped table-bordered table-condensed">
<caption>Liste des véhicules dans la BDD</caption>
<thead class="thead-dark">
<tr>
<th *ngFor="let title of tabTitreColonnesXLS" data-field="title">{{title}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let _xlsLignes of tabLignesXLS">
<td *ngFor="let _data of _xlsLignes">{{_data}}</td>
</tr>
</tbody>
</table>
TYPESCRIPT COMPONENT
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';
@Component({
selector: 'app-datatable-imports',
templateUrl: './datatable-imports.component.html',
styleUrls: ['./datatable-imports.component.css']
})
export class DatatableImportsComponent implements OnInit ,AfterViewInit{
@ViewChild(DataTableDirective)
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
public tabLignesXLS:any;
public tabTitreColonnesXLS:any;
ngOnInit(): void {
}
ngAfterViewInit() {
}
public AfficherContenuXLS(data){
//data come API call from an other component wich call this one as Viewchild
this.tabLignesXLS=[];
this.tabTitreColonnesXLS=[];
//Titre des colonnes
let obj = data[0]
let _tabTitreColonnesXLS = Object.keys(obj)
for (var x in _tabTitreColonnesXLS){
this.tabTitreColonnesXLS.push(_tabTitreColonnesXLS[x])
}
//Données des colonnes
let _XLS = data
for (var _xlsLignes in _XLS){
let _xlsLignesSansEntete = Object.values(_XLS[_xlsLignes])
let _tabCellulesXLS:any=[]
for ( var _xlsCelulleLigne in _xlsLignesSansEntete ){
_tabCellulesXLS.push(_xlsLignesSansEntete[_xlsCelulleLigne])
}
this.tabLignesXLS.push( _tabCellulesXLS )
}
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
});
}
}
Using Editor Datatables if I enter:
Testing Apostrophe's out
It is saved as
Testing Apostrophe\'s out
I saw some forum posts about Magic Quotes, but I'm using PHP 7.14 so that should rule that feature out.
Any ideas about this appreicated.
Thanks
Hello,
I'd like to know how change a cell value in Datatables. I need to set the first cell of the last row with the value of rows.count().
Here's a part of my function to create the fill the datatable:
'rowCallback': function(row, data, index) {
lastStep = currentFlowsTable.data().count();
lastRow = currentFlowsTable.row(':last').data();
lastRow.STEP = lastStep;
currentFlowsTable.row(':last').data().STEP = lastStep;
}
But it does not show the updated cell's value. Am I using this in the wrong part of a datatable (I mean rowCallback option) ?
Thank you very much !
I'm trying to disable sorting on the edit & delete columns in this table (the unnecessary sorting icons appear to be widening the columns):
I've tried to follow the columnDefs documentation and here's my code, with the relevant lines commented out currently; the datatable script stops working as soon as I included them:
I'd be very grateful for any pointers as to where I am coming unstuck.
I'm not having great success searching for solutions to this issue. Sorry if this question has already been asked.
I am just trying to run the demo on Oracle 12.2c with Node.js. I suspect I have not created the database table correctly, though I've followed this as closely as I can. I do have some trouble creating the primary key insert trigger, and have to do it through a GUI to get it to run properly. (I think all its missing is referencing old as old new as new in the trigger creation code, though that seems like a ridiculous necessity). so it looks like this
create or replace trigger datatables_demo_on_insert
before insert on datatables_demo
referencing old as old new as new
for each row
begin
SELECT datatables_demo_seq.nextval
INTO :new.id
FROM dual;
end;
But other than that, I merely wrap the dates on the insert statements in a to_date() function, and run the SQL exactly as is in the setup guide linked above. But I keep getting this node error when attempting to pull up any of the example pages.
Unhandled promise error: [object Promise]Error: Primary key element is not available in the data set
stack: Error: Primary key element is not available in the data set
at Editor.pkeyToValue (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.ts:688:11)
at Editor.<anonymous> (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.ts:1072:38)
at step (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.js:42:23)
at Object.next (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.js:23:53)
at fulfilled (C:\Users\Mike\dev\db_editor\node_modules\datatables.net-editor-server\dist\editor.js:14:58)
Any help would be appreciated!
Pls. I'm new to use of composer and I have been trying to find a way but could not yet. Thus I need well detailed guide on how to use composer with datatable editor. thanks in advance.
I can't get Columns Visibility to show up when using jQuery UI
I believe in older versions of datatables you could do something this like to get "ColVis" to show up with jQuery UI
$(document).ready(function () {
$("#example").dataTable({
"bJQueryUI": true,
"sDom": '<"H"Cfr>t<"F"ip>',
"oColVis":
{
"bRestore": true,
"buttonText": "Columns",
"sAlign": "left",
"sRestore": "View All"
}
});
});
After reading the documentation it says that this has been moved to the buttons plugin. However the button doesn't show up when adding "jQueryUI: true' to the table options. How can I modify the code below to get the columns visibility button to show up when using jQuery UI?
Code taken from https://datatables.net/extensions/buttons/examples/column_visibility/simple.html
$(document).ready(function () {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'colvis'
]
});
});
Hello, I have CSV HTML5 button enabled on my data table to export data to csv. I have customized one column of my data table to display asterisk next to a string under certain circumstances and this asterisk is inside a span tag but it's also being exported to csv even though it's not part of the original data. Is there a way i can customize csv export to ignore the content inside span tag?
Thanks.
say we have this which adds the restore button on to the end of the column visibility button list.
var table = $('#example').DataTable( {
buttons: [
{
extend: 'colvis',
text: "Columns",
postfixButtons: [ 'colvisRestore' ]
}
]
} );
'text' allows you to change the text of the button itself. Is it possible to change the text of the 'colvisRestore' button? It's default text is 'Restore visibility'
Hi,
I am using Datatables for one of my page to display data.I am using server-side scripting to display the table.
In my HTML I have 17 columns.Some columns are fetched from the DB and others are created in the script and contain some mathematical calculations .Those are not present in any of DB fields.
My problem is that I need to sort those columns that have generated values. But this is not possible because serverSide sends the name of the column that i need to sort and in the serverside script i apply the order by in the query, but those are not present in the DB.
Does anyone knows how I can keep the serverSIde option and sort those generated columns? Or is this possible only on the client side?
Hey,
like i sad i have problem with sorting my dates, i have dates like 01.12.2018, 11.12.2018, 12.11.2018, etc
so i tried with that plugin but cant figure out how to implement ($.fn.dataTable.moment( 'd.m.Y' );) this in my js code, my code looks like below, where i made mistake?
<script>
$(document).ready(function() {
$.fn.dataTable.moment( 'd.m.Y' );
$('#test').DataTable( {
responsive: true,
"info": false,
"paging": false,
"columnDefs": [ {
"targets": 4,
"orderable": false
} ],
columnDefs: [
{ type: 'any-number', targets: 0 }
],
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Slovenian.json"
},
"order": [[ 0, "desc" ]],
} );
} );
</script>
Hi,
We are trying to use DataTables with ajax to call an MVC Controller action. Myjavascript is:
$('#myTable').DataTable(
{
ajax:
{
type: 'post',
url: '/api/AirTelemetry/FilteredDeviceLogs2',
data: JSON.stringify({ "siteID": "035", "parameterMethod": "" }),
contentType: 'application/json',
dataType: 'json',
dataSrc: '',
},
columns: [
{ data: 'sessionID' },
{ data: 'sampledUTC' },
{ data: 'sampledLocal' },
{ data: 'siteId' },
{ data: 'deviceId' },
{ data: 'timeBasis' },
{ data: 'parameter' },
{ data: 'analysis' },
{ data: 'value' },
{ data: 'verificationStatus' }
]
});
And the request being sent as shown in Fiddler is:
POST https://localhost:44366/api/AirTelemetry/FilteredDeviceLogs HTTP/1.1
Host: localhost:44366
Connection: keep-alive
Content-Length: 200
Accept: application/json, text/javascript, /; q=0.01
Origin: https://localhost:44366
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36
Content-Type: application/json
Referer: https://localhost:44366/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: *truncated
0=%7B&1=%22&2=s&3=i&4=t&5=e&6=I&7=D&8=%22&9=%3A&10=%22&11=0&12=3&13=5&14=%22&15=%2C&16=%22&17=p&18=a&19=r&20=a&21=m&22=e&23=t&24=e&25=r&26=M&27=e&28=t&29=h&30=o&31=d&32=%22&33=%3A&34=%22&35=%22&36=%7D
So the payload is being encoded in some way, resulting in a 400 - Bad Request from the server.
I have tried every combination of data: JSON.stringify({ "siteID": "035", "parameterMethod": "" }), ** I can think of, and every combination of **contentType: 'application/json',
The following code (vanilla JQuery post) works fine:
$.post({
url: '/api/AirTelemetry/FilteredDeviceLogs',
data: JSON.stringify({ "siteID": "035", "parameterMethod": "" }),
//data: { "SiteId": "035", "ParameterMethod": "" },
contentType: 'application/json',
})
.done(function (a, b, c) {
console.log("Passed");
})
.fail(function () {
console.log("Failed");
});
Has anyone encountered this?
I Need a help in adding customized checkbos to display in data tables
I need to add custome checkbox in data tables.
I'm getting a weird 404 error when populating select2 ajax url with function, outside of this error the function seems to work fine and select2 box is getting populated based on updated urls when the _mvp.commodity_category variable is updated.
Editor field init:
{
label: "Commodity:",
name: "connections.commodity_name",
type: "select2",
"opts": {
delay: 250,
inputclass: 'input-large',
placeholder: "Select a commodity.",
dropdownAutoWidth: true,
dropdownCssClass: "bigdrop",
ajax: {
url: function () {
if(_mvp.commodity_category!=null)
{
return "rest/views/commodity_ids/?category=" + _mvp.commodity_category;
}
return "";
},
dataType: "json",
data: select2_ajax_data,
processResults: connections_commodity_processResults,
cache: true
},
templateSelection: connections_commodity_templateSelection,
escapeMarkup: function (m) { return m; }
}
},
But when i open editor modal I get this weird 404 that returns the entire function as string.
http://devhost/dev/function%20()%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(_mvp.commodity_category!=null)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%22rest/views/commodity_ids/?category=%22%20+%20_mvp.commodity_category;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%22%22;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}
404 (Not Found)
I don't want most of my columns to be searchable, so I make that the default for all my data tables:
$.extend($.fn.dataTable.defaults, {
processing: true,
serverSide: true,
ajax: '#',
columnDefs: [
{
targets: '_all',
searchable: false
}
]
});
Then, where I want a searchable column, I'd like to do this:
<th data-name="number" data-searchable="true">Number</th>
However, it seems that this won't override what is set in columnDefs -- searchable stubbornly remains set to false in the ajax callback. If I use JavaScript rather than HTML5 data-* attributes to configure the table the searchable column works as desired, but I really like having the configuration right there in the HTML with the rest of the table definition.
Am I missing something, or is this by design?
Thanks!
Hi there,
Has one of you already experience with the following situation?
I would like to save a value with a checkbox in two different DB tables, e.g.
1. DB table bookings -> value status = "new" or "canceled"
2. DB table rooms -> value storno = 0 or 1
I can save in table rooms the value storno = 0 or 1 with the following code but
how can I additionally store the value status = "new" or "canceled" in the bookings table?
JS
var editor; // use a global for the submit and return data rendering in the examples
(function($) {
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax: '/php/table.bookings_test.php',
table: '#bookings_test',
fields: [
{
label: "Storno:",
name: "rooms.ca_storno",
type: "checkbox",
separator: "|",
options: [
{ label: '', value: 1 }
]
}]
});
var table = $('#bookings_test').DataTable({
ajax: '/php/table.bookings_test.php',
Processing: true,
ServerSide: true,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "alle"]],
"pageLength": 20,
columns: [
{
data: "rooms.ca_storno",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="storno">';
}
return data;
},
className: "dt-body-center"
}
],
rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.storno', row).prop( 'checked', data.rooms.ca_storno == 1 );
},
responsive: true,
columnDefs: [
{ type: 'date-eu', targets: 0 },
{ type: 'date-eu', targets: 10 }
]
});
$('#bookings_test').on( 'change', 'input.storno', function () {
editor
.edit( $(this).closest('tr'), false )
.set( 'rooms.ca_storno', $(this).prop( 'checked' ) ? 1 : 0 )
.submit();
} );
});
}(jQuery));
PHP
// DataTables PHP library and database connection
include( "lib/DataTables.php" );
// Alias Editor classes so they are easy to use
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, 'rooms', 'uid' )
->field(
Field::inst( 'rooms.ca_storno' )
->setFormatter( function ( $val, $data, $opts ) {
return ! $val ? 0 : 1;
} )
)
->process($_POST)
->json();
BR
i am using datatable which uses server side pagination on table scroll. So It loads the data as an when I scroll down the table. I want to send api call to the service when i reach the 100th records, next 200 th record and 300th record , so on.
How to set that limit as 100 ?
I tried iDisplyLimit : 50.
But not working.
Thanks in advance