Hi team,
I noticed that the plugins received some updates/releases in GitHub with version 1.11.x: https://github.com/DataTables/Plugins/tags
But in NPM that latest is still 1.10.24 : https://www.npmjs.com/package/datatables.net-plugins
Is it expected ?
Can we help to fix it ?
Cheers
Hi,
After reading and searching for all the possible examples of using the Editor in Standalone mode, I didn't find a way to do an inline create of a new item in a collection.
inlineCreate()? So far, it seems it is only available for a table.Best regards,
VIncent.
My edit column is not aligned properly. It is not aligned to the rightmost part of the table. It ruins the layout.
How can I make it aligned.
$(document).ready(function () {
$("#users-table").DataTable({
"ajax": {
"url": '@Url.Action("GetList", "Users")',
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "ID" },
{ "data": "PERFIL" },
{ "data": "USERCD" },
{ "data": "USERNM" },
{ "data": "USERNIF" },
{ "data": "ABREVIATURA" },
{ "data": "COREACTIVO" },
{ "data": "USERML" },
{ "data": "PERFILWEB" },
{
"render": function (data, type, row) {
let toggleIcon = row.COREACTIVO === "S" ? "" : "";
return " | '" + toggleIcon + "";
}
}
],
"aoSearchCols": [ // Filters table in first load to show only active
null,
null,
null,
null,
null,
null,
{ "sSearch": "S" } // Index 6
],
language: {
search: "Procurar: ",
processing: "A carregar",
lengthMenu: "Mostrar _MENU_ registos",
info: "A mostrar de _START_ a _END_ registos de _TOTAL_ registos",
infoFiltered: "(filtrados _MAX_ registos de total)",
infoEmpty: "A mostrar 0 a 0 registos de 0 registos",
loadingRecords: "A carregar registos...",
zeroRecords: "Nenhum registo para mostrar",
emptyTable: "Tabela vazia",
paginate: {
first: "Primeiro",
previous: "Anterior",
next: "Próximo",
last: "Último"
},
aria: {
sortAscending: ": Ordenar por ordem crescente",
sortDescending: ": Ordenar por ordem decrescente"
}
},
pageLength: 25,
"pagingType": "simple_numbers",
"scrollX": true,
"scrollCollapse": true,
"fixedHeader": true,
fixedColumns: {
leftColumns: 0,
rightColumns: 1
},
dom: "<'row'<'col-sm-6'B><'col-sm-6'f>>"+'rtip',
buttons: [
{
"extend": 'colvis',
"text": '',
"columns": ':not(.permanent)',
className: "colvis"
},
{
text: '',
extend: "pageLength",
className: "show-entries"
},
{
text: '',
extend: 'collection',
className: "filter-active-inactibe-btn",
buttons: [
{
text: "Ativo",
name: "filter-active-btn",
action: function (e, dt, node, config) {
$("#users-table").DataTable().columns(6).search('S').draw();
this.active(true);
$("#users-table").DataTable().button('2-1').active(false);
$("#users-table").DataTable().button('2-2').active(false);
}
},
{
text: "Todos",
name: "filter-all-btn",
action: function (e, dt, node, config) {
$("#users-table").DataTable().columns(6).search("").draw();
this.active(true);
$("#users-table").DataTable().button('2-0').active(false);
$("#users-table").DataTable().button('2-2').active(false);
}
},
{
text: "Inativo",
name: "filter-inactive-btn",
action: function (e, dt, node, config) {
$("#users-table").DataTable().columns(6).search('N').draw();
this.active(true);
$("#users-table").DataTable().button('2-0').active(false);
$("#users-table").DataTable().button('2-1').active(false);
}
}
]
}
],
// Changes the color of the letter to red if the letter is N for COREACTIVO
"createdRow": function (row, data, index) {
if (data.COREACTIVO === "N") {
row.style.backgroundColor = "#ff000055";
}
},
// Defines the visibility of the column ID
"columnDefs": [
{
"targets": [0,6],
"visible": false,
"searchable": true
},
{
"targets": [9],
"className": "text-center",
"width": "50px"
},
{
"targets": [0,1,2,3,4,5,6,7,8],
"width": "20%"
}
]
});
$("#users-table").DataTable().buttons('2-0').active(true);
});
Hi all,
I want to update only single column via ajax. Datatable is initialized first from database then after loading all data i want to periodically update one column with another ajax source.
I've created a function and i called it after:
$(document).ready(function(){
function is simple i called a get link which gives me id and data, id is which row cell i want to update.
now the problem is how to display data where id is
Hi, everyone
I use datatables in a project and initialize it via an ajax request. In my case it can happen that there is a lot of data (up to 50 entries) in a row, as can be seen in the example. The whole content is a single string which is formatted to HTML in the backend.
I would like to implement the possibility for the user to collapse and expand the row data to provide a better overview. In fact, the first entry is truly important. I would like to do the whole thing via a link or something similar, which is at the bottom of the row. I need this function for two columns in my table.
I've seen solutions to similar problems, but unfortunately they didn't help me with my project.
Thank you very much in advance! 
I am passing a variable from an $ajax call ($taskFormType = $_POST['taskFormType'];) .
I want to use this in an if statement within '$columns = array' .
How can I do this?
<?php
date_default_timezone_set('America/Chicago'); // CDT
$today = date("Y-m-d");
include('i5db2connect.php');
$taskFormType = $_POST['taskFormType'];
$locationCode = $_POST['locationCode'];
$machineCode = $_POST['machineCode'];
// DB table to use
$table = 'NWFF.MTCTSKH';
// Used for optional WHERE clauses that will be appended to the SQL string
$extraWhere = "MTLOC ='" .$locationCode. "'and MTCODE = '" .$machineCode. "'" ;
// Table's primary key
$primaryKey = array('MTLOC', 'MTCODE');
// Array of database columns
$columns = array(
array( 'db' => 'MTLOC', 'dt' => 'location_code' ),
array( 'db' => 'MTCODE', 'dt' => 'machine_code' ),
array( 'db' => 'MTTSK', 'dt' => 'doc_link',
'formatter' => function($d, $row){
if($taskFormType == 'viewTask'){
return '<a id="doc_link" class="link" href="javascript:void(0)" onClick="openTaskForm(\'' . trim($row['MTCODE']). '\', \''.trim($row['MTLOC']).'\', \'' .trim($d).'\', \'viewTask\' )">' .$d. '</a>';
}else if ($taskFormType == 'copyTask'){
return '<a id="doc_link" class="link" href="javascript:void(0)" onClick="openTaskForm(\'' . trim($row['MTCODE']). '\', \''.trim($row['MTLOC']).'\', \'' .trim($d).'\', \'copyTask\')">' .$d. '</a>';
}
}
),
array( 'db' => 'MTTSK', 'dt' => 'task_number' ),
array( 'db' => 'MTLPMD', 'dt' => 'last_pm_date',
'formatter' => function( $d, $row ) {
if ($d > 0)
{
$dt = DateTime::createFromFormat('Ymd', $d);
return $dt->format('m-d-Y');
}
else
{
return '';
}
},
),
array( 'db' => 'MTLSMD', 'dt' => 'next_pm_date',
'formatter' => function( $d, $row ) {
if ($d > 0)
{
$dt = DateTime::createFromFormat('Ymd', $d);
return $dt->format('m-d-Y');
}
else
{
return '';
}
},
),
array( 'db' => 'MTLSCH', 'dt' => 'pm_scheduled' ),
array( 'db' => 'MTINTR', 'dt' => 'interval_to_next_pm' ),
array( 'db' => 'MTPM#', 'dt' => 'scheduled_pm_number' ),
array( 'db' => 'MTTYPE', 'dt' => 'type_of_pm' ,
'formatter' => function( $d, $row ) {
if ($d=='T'){
return 'Time';
}
else if ($d=='M')
{
return 'Meter';
}else{
return '';
}
},
),
array( 'db' => 'MTMETR', 'dt' => 'meter_reading' ),
array( 'db' => 'MTMTRL', 'dt' => 'meter_scheduled_amount' ),
);
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $connection, $select, $table, $primaryKey, $columns, $extraWhere)
Hi,
See indexes in http://live.datatables.net/tudofuga/37/edit
Steps to reproduce:
1. Select multiple rows, either in multiple clicks or single click with cmd
2. watch the consoled output of indexes.
Result: It is always the last selected/deselected row index even though wrapped in an Array [].
As per documentation of select,
The result is that if multiple items are selected in a single action (shift click in the os selection style for example) each item selected does not receive its own event, but rather the information about the selected items is conveyed in an array.
Can this be resolved.?
Dear All,
I need help from you! I need fixedheader, fixedcolumn and scrollx for my table. I have read that these does not work at the same time? However, I think they work good together apart from scrollX.
When I resize the window width (minimized), the table is not resize and the scollX is shown instead, but if I reload the page the table is resized and the scrollX is updated to correct value. I have tested to redraw the when I resized the window with no luck. Can I test something else?
I have done a jsfiddle that show the behaviour.
https://jsfiddle.net/fjr230np/
Cheers
Ludde
I'm using state persistence with stateSaveCallback and stateLoadCallback and everything works like a charm. Column ordering, search text and SearchBuilder settings works just fine. I'm happy with everything so far.
However, as my application is constantly deveoping and new columns are added in the model once in a while, state persistence data is lost, because column count is not any more the same it was when state was saved.
I understand this is suppossedly by design, but is there any way we can solve this? I mean, if new columns are added in the end of column definition (largest index), how can I get Datatables to understand that it's not an error state that the previously added state doesn't have the same amount of columns as the table currently holds. The last added colum should be visible by it's default setting (because it does not have a state saved yet) and ordered in the very end ot the table in my situation.
Anybody else having the same problem?
Hallo together, I really don´t know what to do.
I have this table, i want to click on a head of column (in blue), you can see there are green and red in the body. i want all the rows with red background on this column order come all up(reorder , order upwards.) Is it really possible, and what should i do?
thanks very much!!!
In looking at an example I had on a previous post, I want to change the checkbox to the method shown for a multi-select:
https://datatables.net/extensions/select/examples/initialisation/checkbox.html
However, the method in this example is not using defined columns. In this example:
http://live.datatables.net/siwufoxi/1/edit
how can I change Table3 to use the select checkbox? The one I am trying has [object object] behind the checkbox
Is there a reason why datatables is overriding a cell color? I used:
(Please note, I have tried both createdRow and rowCallback)
rowCallback: function( row, data, dataIndex)
{
$(row).css("background-color", "Orange");
$(row).addClass('red');
},
But it seems that datatables wants to use it's own color (from Firefox debugger):
background-color: rgb(255, 255, 255);
datatables.min.css:109
Best Match table.dataTable tr td
The row has the class added:
rgb(255, 165, 0);
element
Best Match this.style
orange
semantic.min.css:11
Matched .ui.ui.ui.ui.table tr.red:not(.marked)
rgb(255, 225, 223)
I did not post any examples because it is a basic table, and I have made no modifications to the datatable or CSS, and the css files and js files were downloaded from Datatables yesterday.
Link to test case: http://live.datatables.net/ragopezo/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi DataTables team,
I found a small styling issue when using the colvis button as the only button with bootstrap 4 styling. The left border radius is missing. This seems to happen only with collections, a single 'copy' button doesn't have this issue.
The test case above is using the latest libraries from the download builder.
Greetings,
Itrac
Hi there,
I am trying to apply German language settings to all the datatables generated within an RMarkdown script. I managed to do this via the following piece of code:
options(DT.options = list(
language = list(url = '//cdn.datatables.net/plug-ins/1.11.3/i18n/de_de.json')
))
In fact the datatables are being correctly exported and all buttons and formatting appears in German in the internal RStudio-browser. However, if I open the generated html file in Chrome or Firefox, the datatables are formatted in English.
I could not find any option to fix this. Please let me know if you know any solution to this, even if it means to include the code in a css file.. Here is the full code example for RMarkdown: (note that you have to change the 2 chunk-quotation marks
to 3 quotation marks to run the example.
---
title: "DT datatable language issue"
output: html_document
---
``{r setup, include=FALSE,echo=FALSE}
knitr::opts_chunk$set(echo = TRUE)
``
``{r load libraries, echo=FALSE, include=FALSE}
library(DT)
library(dplyr)
options(DT.options = list(
language = list(url = '//cdn.datatables.net/plug-ins/1.11.3/i18n/de_de.json')
))
``
## Test Table
``{r pressure, echo=FALSE}
cars %>% datatable()
``
I have 22 columns, but when I scroll over passed what is already on the screen, the columns do not scroll over with the rows. I do not have "fix column" installed.
edit: I discovered "scrollX".
Hi,
Just started looking at using DataTables.
Is it possible to show image in a cell, im my case reach row might have image I want to display and would like it to show on left most column.
The data is not predefined but fetched from some other website.
Please point me to right direction.
Thank you.
I want to have edit, delete, details buttons on the left side, not the right, since it scrolls off the page on the right because I have 22 columns. When I move them to the front of the <td> they take over the info in column 1, the rows shift to accommodate having those items on the left, but the columns do not move over with the rows. I tried <th>edit</th> to the front of the <thead> but then all my borders and pagination and general table formatting break. I'm sure there is an easy way to fix this, but I don't know what it is. Thanks
Hello,
I have two fields shows in the form according to a condition. I want to set validation "notEmpty" on these fields when show and off when hide.
Regards
I have columns that I want to be readonly depending on certain data in each row. With the datatable I use rowCallback and it works well:
"rowCallback": function (row,data) {
if (data.station.wind == false ) {
for (let i = 4; i < 13; i++) {
JQuery('td:eq(' + i + ')', row).css("background-color", "#B7B5B4");
JQuery('td:eq(i)',row).addClass('readonly');
}
}
}
Now I want to use the readonly class in the inline editor to return false. I am not sure how to get to the class for the cell (where I have question marks below). I am using preOpen .
vm.editor.on( 'preOpen', function ( e, mode, action ) {
var rowData = vm.dtHandle.row( vm.editor.modifier().row ).data();
/*if (JQuery(???????).hasClass('readonly')) {
return false;
} */
} );
I can't figure out how to reference the cell's class from the editor preOpen . I've looked through several posts but no luck so far.
Thanks.
Hello,
I am new to js and jquery so please correct any wrong statment I make.
i have a couple of questions.
I've acomplished loading data into my Datatable with an ajax request.
Now i would like to add new, edit and delete rows in my table. I am Using Spring MVC for my Backend. I am having trouble receiving the information on the backend.
I've read the Documentation and know what is being sent.
https://editor.datatables.net/manual/server#Create
How ever i would like to log it in the console when the button is being clicked. Where should i place my console.log() and what is the variable name of the information being sent?
I would like to add a row below a selected row. How can i replace the [0] in the payload?
and last in what format is the information being sent? JSON?
heres my code.
thanxs in advanced.
var editor;
var arbeitsTabelle;
editor = new $.fn.dataTable.Editor( {
ajax: {
create:{
type:'POST',
url: '/editor/create'
},
edit:{
type:'PUT',
url: '/editor/edit',
},
remove:{
type:'DELETE',
url: '/editor/remove'
},
},
table: "#arbeitsTabelle",
idSrc:'id',
fields: [ {
label: "Pid:",
name: "pid"
}, {
label: "Vorgaenger:",
name: "vorgaenger",
},
...
]
} );
arbeitsTabelle = $('#arbeitsTabelle').DataTable({
retrieve: true,
paging: false,
info: false,
columns: [
{ data: "id" },
{ data: "pid" },
{ data: "vorgaenger" },
...
],
dom: "Bfrt",
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor },
]
});