so i have a table with a lot of column (approx more than 30) and i am using scrollx and scrolly option in javascript so it can show all column but with slider....
but recently in google chrome i got this weird render in column header, at first i think it only happen in my computer but now i tried it in other computer with google chrome it show the same.... so how to fix it? since most people now using google chrome...
In excel like navigation inline datepicker is not setting the date (not working in examples also) properly.
Help!!
I have 100,000 data to edit. Previously to display the data I have used data tables server side scripting to just display and multi column filtering. Now I want to edit. How can I approach? Could you please suggest me.
where can I get the column filter plugin
Hello volks,
i've just got the editor licence and i'm struggeling to get my table showing the information i want it to.
The first screenshot shows my current table, second shows the edit select field.
I want to have the label of the selected value from the DB in the table by default not the value.
I do also have a readonly field which has options defined which is also only showing the value not label.
**Status **should display the label of the current status in the table (shows int) and select on edit (this works)
**Type **should display the label and does not need to be edited
here is my js:
var editor; // use a global for the submit and return data rendering in the examples
var table; // use global for table
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
url: 'libs/basic/datatables/orderposition.php',
data: {
"collectiveinvoice": 141
}
},
table: "#datatable",
fields: [
{
label: "Status:",
name: "status",
type: "select"
},
{
label: "Beschreibung:",
name: "comment",
type: "ckeditor",
opts: {
toolbarGroups: [
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
removeButtons: 'Source,Save,Templates,NewPage,Preview,Print,Cut,Copy,Paste,PasteText,PasteFromWord,Find,SelectAll,Scayt,Replace,Form,Checkbox,TextField,Radio,Textarea,Select,Button,ImageButton,HiddenField,Subscript,Superscript,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Image,Flash,Smiley,SpecialChar,Iframe,Font,About,Maximize'
}
}, {
label: "Menge:",
name: "quantity"
}, {
label: "Preis:",
name: "price"
}, {
label: "Steuer:",
name: "tax",
type: "select"
}
]
} );
// Disable KeyTable while the main editing form is open
editor
.on( 'open', function () {
table.keys.disable();
} )
.on( 'close', function () {
table.keys.enable();
} );
// Activate an inline edit on click of a table cell
$('#datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
// Submit on leaving field
onBlur: 'submit'
} );
} );
table = $('#datatable').DataTable( {
dom: "<'row'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
ajax: {
url: 'libs/basic/datatables/orderposition.php',
data: {
"collectiveinvoice": 141
}
},
order: [[ 1, 'asc' ]],
columns: [
{ data: "id" },
{ data: "type" },
{ data: "status" },
{ data: "comment" },
{ data: "quantity" },
{ data: "price" },
{ data: "tax" }
],
select: false,
buttons: [
// Export Button
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
},
]
} );
} );
here is server side php:
Editor::inst( $db, 'collectiveinvoice_orderposition' )
->where( 'status', 0, '>' )
->where( 'collectiveinvoice', $_REQUEST['collectiveinvoice'] )
->fields(
Field::inst( 'id' )->set(false)->validator( 'Validate::unique' )->validator( 'Validate::numeric' ),
Field::inst( 'status' )->options( function () {
return array(
array( 'value' => '0', 'label' => 'gelöscht' ),
array( 'value' => '1', 'label' => 'aktiv' ),
array( 'value' => '2', 'label' => 'deaktiviert' ),
);
}),
Field::inst( 'quantity' )
->validator( 'Validate::numeric' )
->getFormatter( 'Format::toDecimalChar' )
->setFormatter( 'Format::fromDecimalChar' ),
Field::inst( 'price' )
->validator( 'Validate::numeric' )
->getFormatter( 'Format::toDecimalChar' )
->setFormatter( 'Format::fromDecimalChar' ),
Field::inst( 'tax' )->options( Options::inst()
->table( 'taxkeys' )
->value( 'value' )
->label( 'value' )
),
Field::inst( 'comment' ),
Field::inst( 'type' )->set(false)->options( function () {
return array(
array( 'value' => '0', 'label' => 'Manuell' ),
array( 'value' => '1', 'label' => 'Artikel (Kalk)' ),
array( 'value' => '2', 'label' => 'Artikel' ),
array( 'value' => '3', 'label' => 'Perso' ),
);
}),
Field::inst( 'file_attach' )->set(false),
Field::inst( 'perso_order' )->set(false)
)
->process( $_POST )
->json();
In addition, i want to display buttons based on the DB values of "file_attach" and "perso_order" so that they only show and have a reference in them to the db field, how would one do that? Or in other words how do i add a custom field to the table anyways (which is readonly)?
Thanks for this great tool!
Regards
// from the example
var TBL_datatables = $('#tbl_datatables').DataTable();
$('#tbl_datatables tbody').on('click', '.glyphicon-arrow-up', function () {
// current row data
var rowdata = TBL_datatables.row($(this).parents('tr')).data();
console.log(rowdata);
// What I want is to get the next or the previous data
// Thank you so much in advance
});
I have been following this:
https://editor.datatables.net/manual/php/mjoin
And my join is working correctly:
->join(
Mjoin::inst( 'data_sources' )//table to link to
->link('widgets.id','data_source_widget.widget_id' ) //left table id, name in link table
->link('data_sources.id','data_source_widget.data_source_id' ) //right table id, name in link table
->order('data_sources.description asc')// order of joined data - optional
->fields(
Field::inst( 'id' ) //first field read from joined table
->options( 'data_sources', 'id', 'description' )
->validator( 'Validate::notEmpty' ),
Field::inst( 'description' ) //second field read from joined table
)
)
I have a widgets table and a data_sources table which are linked by a data_source_widget table.
I am working on the Widgets editor page. I have the an array of data_sourecs being displayed in my Datatable.
Now I want the Editor to display a select which lists the description field from the data_sources table and allows the user to be able to select multiple data sources.
I guess I need to add something like this (this is for a simple select I am doing, using a foreign key):
Field::inst("widgets.widget_type_id") //foreign key in this table
->options('widget_types','id','description') //linked table, key (id) , value (text to display)
->validator( 'Validate::dbValues' ),
//this is needed to display it joined table.field_name
Field::inst('widget_types.description')->validator('Validate::unique'),
Is there an example of this anywhere?
Mick
Hey everyone and thanks in advance for any help you can provide.
I'm using DataTables with typescript and require. I've run into an issue where the ordering isn't working. When I take it out of typescript and require and just use it with normal JS, the ordering works fine with identical code. Any idea what could be causing this?
This is the typing file Im using
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery.datatables/index.d.ts
And here is the code
requirejs(["/Weblink2/Scripts/plugins/datatables.js"], function (datatables) {
$.extend(true, $.fn.dataTable.defaults, {
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"processing": true,
"serverSide": true,
language: {
processing: loadingMarkup,
}
});
$('#EinTable').DataTable({
"ajax": "/weblink2/MaintenanceSupport/MyAccount/ManageProvidersDataTables?idType=E",
"columns": [
{
"title": "Proivider Name", data: function (data) {
if (data.Entitytype == null) {
return "<strong>" + data.ProviderName + "</strong>"
}
else {
return data.ProviderName
}
}
},
{ "title": "ID", "data": "Id" },
{
"title": "Entity Type", data: function (data) {
if (data.Entitytype == 2) {
return "<select id='Entitytype' name='Entitytype' class='form-control'>\
<option value='2' selected='selected'>Group</option>\
<option value='1' >Individual</option>\
</select>"
}
else if (data.Entitytype == 0 || data.Entitytype == 1) {
return "<select id='Entitytype' name='Entitytype' class='form-control'>\
<option value='2' >Group</option>\
<option value='1' selected='selected' >Individual</option>\
</select>"
}
else {
return "<select id='Entitytype' name='Entitytype' class='form-control input-validation-error'>\
<option value='' selected='selected' ></option>\
<option value='2' >Group</option>\
<option value='1' >Individual</option>\
</select>" }
}
},
{
"title": "Active Status", data: function (data) {
if (data.Active == 1) {
return "<select id='Active' name='Active' class='form-control'>\
<option value='1' selected='selected'>Active</option>\
<option value='2' >Inactive</option>\
</select>"
}
else {
return "<select id='Active' name='Active' class='form-control'>\
<option value='1' >Active</option>\
<option value='2' selected='selected' >Inactive</option>\
</select>"
}
}
}
],
"columnDefs": [
{ "width": "40%", "targets": 0 },
{ "width": "20%", "targets": 1 },
{ "width": "20%", "targets": 2 },
{ "width": "20%", "targets": 3 }
],
"order": [0, "asc"]
});
I recently purchased DataTables Editor, created a new consolidated Datatables download including the Editor, and replaced the consolidated datatables.min.js file and verified that the Editor is included.
I have the following includes:
<link rel="stylesheet" type="text/css" href="../../../distLibs/css/datatables.min.css">
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/jquery-migrate-3.0.0.min.js"></script>
<script type="text/javascript" language="javascript" src='../../../distLibs/lib/moment-with-locales.min.js'></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/tinymce.min.js"></script>
<!-- includes all the plugins I need (DataTables 1.10.13, AutoFill 2.1.3, Buttons 1.2.4, Print view 1.2.4, Editor 1.6.1, Responsive 2.1.0, Scroller 1.4.2, Select 1.2.0) -->
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/datatables.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/datetime.js"></script>
<script type="text/javascript" language="javascript" src="../../../distLibs/lib/editor.tinymce.js"></script>
And my Editor field definitions are:
editor = new $.fn.dataTable.Editor({
ajax: "OTCalMaint.php",
table: "#cc-list",
idSrc: "RID",
fields: [
{label: "Title:",
name: "title"
},
{label: "Start:",
name: "start",
type: "datetime",
def: function () { return new Date(); },
format: 'dddd, MMMM Do, YYYY h:mm A'
},
{label: "End:",
name: "end",
type: "datetime",
def: function () { return new Date(); },
format: 'dddd, MMMM Do, YYYY h:mm A'
},
{label: "Description:",
name: "description",
type: "tinymce"
}
]
});
The bubble appears and all the fields appear except only the title appears for "Description".
There are no errors in the Web Console.
If I comment out one or the other of the tinymce includes, I do get and error.
I have Block Popups turned off in FireFox.
Quill performs as expected but I want to use Tinymce
Any thoughts?
Regards,
Jim
I saw that some people tried to select child rows, but I was wondering if there is a way to adjust the current selection method for select rows on the table to also only allow the user to select one child row. In other words, the user can only select one row at a time including child rows.
Hi,
I've two dropdowns in an inline datatable, the second dropdown is dependent() on the first. This all works fine except for one thing. If I load the page and immediately click on the dependent dropdown it will be blank. If I click out and in again it's fine, the change event has fired and the options are populated. Is there a way to immediately populate the cell on table load? The data is being loaded from a database so the first dropdown already has a value. I know there's a change and keyup event in the documentation, is there a list of the other events? Is there any way of manually invoking the dependent listener?
Thanks.
Hello,
I have a table with the data of users + their avatars however on page load I have more than 1500 requests (the avatar of each user) even though pagination is is enabled.
My config:
ajax: $("#user-table").data("url"),
paging: true,
iDisplayLength: 6,
bLengthChange: false,
The column def for the the avatar + name combo
{
aTargets: [ 0 ],
mRender: function ( data, type, full ) {
return '<img class="table-profile-image" src="' + full.avatar + '"/> ' +
'<a href="' + full.url + '">' + data + '</a>';
}
},
Is there a solution for this? (the best way would be to only load the images when they are displayed)
Hi
I am getting this error on the production server but not on my development laptop
Fatal error: Call to private method DataTables\Editor::_ssp_field() from context '' in /var/www/vhosts
/bookt.lanzarote1.com/httpdocs/inc/dt/php/lib/Editor/Editor.php on line 1444
Here is the debug for the development wamp platform which works fine - 3 tables each filtered / searched from select fields in form.
http://debug.datatables.net/amufuc
The server envronment is LAMP
Regards Mark
Hello @Alan
Please check this bin with Access-Control-Allow-Origin enabled
Check the Priority column. It doesn't seem to be ordered. Table is ordered by column #0 instead...
Screenshot
I've also tried data render within ColumnDefs - same problem. When I tried the same with no server side data load - works fine,
Will appreciate your help!
Thanks
Hello,
I am finding a significant (more than the 1-2 pixels which are common in IE10+) misalignment of columns using Microsoft Edge, while not happening in Chrome, Firefox and IE 11.
Example:
https://jsfiddle.net/fulmar/48835jg6/9/
Adjust table frame to be around 1000px to best show misalignment.
Some observations:
- misalignment seems to be most common when header text starts to wrap
- once x-scroll appears, misalignment occurs less
- forcing the header to not wrap (by using white-space: nowrap), while it works, is not an option as this often makes columns take up excessive space
(Example modified from https://jsfiddle.net/rbeasse/26hygack/), which was used as an example for existing issue https://github.com/DataTables/DataTables/issues/893))
In Editor, I have a field that has a large amount of options of type: "checkbox". Currently, they are in one long list. Is there a good way to split them up over multiple columns at a certain length? I'm also using Bootstrap4, but someone else may come across this and want to know how to do it in general as well.
Thanks!
..........my html:
$(document).ready(function() {
var dataTable = $('#acao_table').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"BF_acessoBbSqlite_acao.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".acao_table_error").html("");
$("#acao_table").append('<tbody class="acao_table_error"><tr><th colspan="4">Nenhum dado encontrado no servidor</th></tr></tbody>');
$("#acao_table_processing").css("display","none");
}
}
} );
} );
.... my server-side
if( !empty($requestData['search']['value']) ) {
$sql.=" AND (id LIKE '" . $requestData['search']['value'] . "%' ";
$sql.=" OR nome LIKE '" . $requestData['search']['value'] . "%' ";
$sql.=" OR cmt LIKE '" . $requestData['search']['value'] . "%' ";
$sql.=" OR mrid LIKE '" . $requestData['search']['value'] . "%' ) ";
}
$query = $sqlite_db->query($sql) or die("Com o search: BF_acessoBbSqlite_acao.php: get acao");
$totalFiltered = count($query->fetchAll());
$sql.=" ORDER BY " . $columns[$requestData['order'][0]['column']] . " " . $requestData['order'][0]['dir'] . " LIMIT " . $requestData['start'] . " ," . $requestData['length'] . " ";// adding length
$query = $sqlite_db->query($sql) or die("Erro no sql: BF_acessoBbSqlite_acao.php: get acao");
$data = array();
foreach ($sqlite_db->query($sql) as $row) { // preparing an array
$nestedData=array();
$nestedData[] = $row["ID"];
$nestedData[] = $row["NOME"];
$nestedData[] = $row["CMT"];
$nestedData[] = $row["MRID"];
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ), // for every request/draw by clientside
"recordsTotal" => intval( $totalData ), // total number of records
"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching
"data" => $data // total data array
);
echo json_encode($json_data); // send data as json format
<?php > -- VISUAL LINE -- ?>After implementing on-demand loading of data the default column-sort functionality is working inconsistently.
In some cases the data-table gets sorted in wrong order and in some cases the sort-image(arrows) is displayed incorrectly. Although in most cases the sorting is done correctly. Hence there's consistency issues.
I have set the descending order as default for the 'ID' column at the code-level. Here's the code for it: (This code works correctly. Whenever the page loads for first time the ID column gets sorted in descending order)
var bIsLoad = false;
var sorter = function () {
var search = {
SortColumn: bIsLoad ? settings.aoColumns[settings.aLastSort[0].col].data : "ID",
SortDirection: bIsLoad ? settings.aLastSort[0].dir : "desc"
};
bIsLoad = true;
return JSON.stringify(search);
}
But sometimes when we click the header to sort it sorts incorrectly .
Kindly see the attachment.
Here's my sample datatable JS code :
"dom": '<"top"lB>tr<"bottom"ip>',
"lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
"pageLength": 25,
"pagingType": "full_numbers",
"ordering": true,
"order": [[0, "desc"]],
"scrollX": true, "filter": true,
"responsive": true,
"serverSide": true,
"info": true, "processing": true,
"stateSave": true,
"ajax":
{
"url": "Home/Load",
"type": "POST",
"datatype": "json",
"data": function (d) {
d.searchParams = sorter;
},
},
Here the debug link : http://debug.datatables.net/idoquj
Can you tell me why the data get's sorted incorrectly? How can I solve this issue?
All I want is to make any column to sort accordingly consistently. Currently i
$(function(){
$("#addRowButton").click(function(){
alert("Click event works");
var n = parseInt($("#numberOfRowsTextBox").val(), 10);
var i=0;
var t = $("#example").DataTable();
alert("We got to the loop");
for(var i; i < n; i++){
t.rows.add(['(blank)','(blank)','(blank)','(blank)','(blank)']).draw( false );
}
});
});
Here is my code snippet - I have no errors in my console. any idea?
thanks,
J
I noticed that the first letter of strings I provide to DataTables are turned to upper case. As I'm new to DataTables I don't know how to influence this behavior (I would prefer it not to manipulate the data).
Thanks for any pointers!