I am trying to calculate the multiplication into cells, it is ok, but I need to send this value for another cell. How can I send this new value for another cell?
↧
How to send a new value to a cell?
↧
Does deferRender also remove rows?
I am using deferRender to only render rows as I scroll. When I use the browser inspector, I can see there are only 72 rows (in my case). I see that by running $('.dataTables_scrollBody tbody').children().length. I was surprised when I started scrolling down the page to see that top rows are removed from the DOM, as well, so the count stays 72 no matter what.
Is there a way to keep any previously rendered rows around? Can you confirm this is due to the scroller plugin and deferRender? Is there an event that gets fired whenever a row/cell is destroyed, in case I need to perform clean up?
↧
↧
Multi Filter doesn't communicate with the colvis function
Hi all,
with the help of the community I was able to put a multi filter search in the head of a table. But with using the colvis function, this filter doesn't communicate with the columns. As you see in the example they indeed reduce from e.g. four to three columns, but the search function doesn't go with the colvis function. The function stays in the original column.
https://jsfiddle.net/RoloTomasi/vhp3fjxd/6/
Any ideas?
Thanks in advance
Rolo
↧
Responsive + Editor with opt-in for inline editable fields
I'm using a setup similar to this, but instead of using this
$('#example').on( 'click', 'tbody td:not(.child)', function (e) {
editor.inline( this );
} );
I'm doing this
$('#example').on( 'click', 'tbody td.editable', function (e) {
editor.inline( this );
} );
which makes it a more "opt-in" method than just assuming the user can edit all the fields. This has worked great until I realized that same method isn't carrying over to the "DTR" child elements (the elements that get pushed off the page when the viewport isn't large enough to show them - see screenshot below). I'm hoping to find a way to carry my className: 'editable' classes set in the columns option over to the child elements as well. Any help would be much appreciated!
DTP child elements
↧
dentro de mi tabla tengo combobox
como puedo hacer para que el buscador encuentre lo que tengo en el combo box
↧
↧
syntax for clicked datatable and data by index
I have three datatables on a page that each have the first column having '.details-control' item. Instead of having three different onClick functions I would like to make just one. To do that, I need:
1) the onClick to know what datatable is clicked
2) I need to access the third data element for each table instead of hard-coding the field name since for each table the field name will be different.I tried data[0][3] as well as data[0,3] and even data[3]. None of these worked.
What is the syntax for each of these two items?
$('.display tbody').on('click', '.details-control', function (e) {
e.preventDefault(); //TODO: not working!!!!!!!!! Don't want to select/deselect when .details-control is clicked
var data = dependencytable.row($(this).parents('tr')).data(); //don't want to hardcode the tablename
alert(data["Dependencies"]["note"]); //don't want to hardcode the data element name
});
↧
layout: 'columns-6',
↧
ckeditorClassic - Configure buttons and add source buuton
I need to change some buttons on ckeditorClassic, and add a source button to edit the source in the editor content. There is a plugin for the editor to add the source button:
https://ckeditor.com/cke4/addon/sourcearea
Any suggestions to achieve this in the datatables editor?
↧
How to combine or merge cells, using php-codeigniter
Hello, im using codeigniter and php to create this table.
im using collapse from bootstrap to view childrow like datatable can do. but i dont understand to use js, so im using only php here. the childrow is a new row with only 1 td, and that causing error
is there any solution to make childrow using only php?
from what i know, if you want to merge cells in php you only create 1 td with colspan=12, but datatable not allowing that..
here is when im creating the td with no value
here is when im deleting the td and causing errors
and the attachment file is the code that i wrote
↧
↧
Override default button export options?
Almost all my datatables have the last two columns that I don't want to print etc. I did this:
$.extend($.fn.dataTable.defaults, {
buttons: {
buttons: [
{
extend: 'print',
exportOptions: {
columns: [':lt(-2)']
}
}
]
}
});
I have a default call on a class that loads the datatable.
Now I have the odd table that I want to clear this and print all columns. So I clear that class and manually initialize:
$('#odd_table').dataTable({
buttons: {
buttons: [
{
extend: 'print',
text: '<i class="far fa-print"></i> Print',
orientation: 'landscape',
exportOptions: {
columns: [0, 1]
}
}
]
}
});
No mater what I specify in the exportOptions the default options are applied. I figured this was as easy as changing the default settings.
↧
Semantic UI and Editor seem to be not a good couple together
I do not know how to give a live example as the Editor is not available via CDN to link to the live editor. However, I am having a problem controlling the inline field width when a cell is edited.
The best way to describe it is, if the table's column header is 2 letters:
<table>
<thead>
<tr>
<th>CT</th>
<tr>
</thead>
</table>
When you click in the cell to edit it, nothing is shown. I can add a few more letters to the name, and it will then start to show data. I have tried a bunch of semantic css as well as:
{
targets:[0],
width: "50%"
},
But nothing seems to fix it until I remove the "form" class from the cell, which at that point it turns it into datatables input field.
↧
State Saving Challenge
I am using the same Data Table with three different configurations on three different pages with different URLs (The following links aren't working - only to explain in which way the URLs deviate from each other.)
https://www.mySite.eu/?page=ctrMgmtServerSide
https://www.mySite.eu/?page=ctrMgmtClientSide
https://www.mySite.eu/?page=ctrMgmtInboxExp
I noticed that layout changes (e.g. column visibility) are effective for all of my three different pages regardless on what page I make them.
How can I make sure that state saving will only be effective for the page I make the change on, not for the other two pages using the same Data Table?
↧
Limit number of rows in the table
Hi guys, I need to create a condition or simply limitation when in my table has 10 records,
the idea is only allow 10 records no more.
do you have any idea?
thank you.
↧
↧
where condition not a field .net
I am filtering a second datatable based off a selected row of the first database. However, if there is nothing selected on the first datatable, I would like the second datatable to show all records. Is this possible? Currently, if unselected I am settting it to -1.
ajax: {
url: '/api/Contacts',
type: 'post',
data: function (d) {
var selected = applicationtable.row({ selected: true });
if (selected.any()) {
d['Contacts.ApplicationID'] = selected.data().ApplicationID;
} else {
d['Contacts.ApplicationID'] = -1;
}
}
},
it doesn't like the orWhere because it is expecting a fieldname
.Where(q =>
{
q.Where(r =>
{
r.Where("Contacts.ApplicationID", request.Form["Contacts.ApplicationID"]);
r.OrWhere(request.Form["Contacts.ApplicationID"],"-1");
});
})
↧
row selection server side
hello friends,
I want a table with server side processing but with User selectable rows (multiple rows) features.
With server side table when change current page and when come back, the first selection disappear.
this my code:
$(document).ready(function() {
/fetchData();
$("#filter").click(function(e){
fetchData();
})/
var selected = [];
var url = "<?=base_url().'Hpg_leads/getIncomingLeadList';?>";
$("#full-database-table").dataTable({
"destroy": true,
"autoWidth": true,
"pageLength" : 25,
"processing": true,
"serverSide": true,
"order": [[3,"desc"],[4,"desc"],[6,"asc"]],
"ajax": {
"url": url,
"type": "POST",
"data": function(dtParms){
source_ids = ($('#id_source').val()).join(',');
dtParms.idsource = source_ids;
dtParms.starting_date = $('#starting_date').val();
dtParms.ending_date = $('#ending_date').val();
console.log(dtParms);
return dtParms;
},
},
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
},
language: {
"processing":"Traitement en cours...",
searchPlaceholder: '',
sSearch: 'Rechercher : ',
lengthMenu: 'Afficher MENU leads par page',
paginate:{"previous":"Précédent", "next":"Suivant"},
zeroRecords: "Aucune information n'est disponible",
info: "Affichage de page PAGE de PAGES",
infoEmpty: "Aucune information n'est disponible",
infoFiltered: "Filtrage de MAX total leads"
},
"columnDefs": [
{
"targets": 2,
"render": function ( data, type, row) {
return "
";
} ,
}
],
});
$('#full-database-table tbody').on('click', 'tr', function () {
var id = this.id;
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
} else {
selected.splice( index, 1 );
}
$(this).toggleClass('selected');
} );
});
↧
Overflow Issue - Semantic UI search input - Results div container stays within table border
I am conditionally rendering inputs and textareas inline, something like below, to replace data with an <input> if a condition is met.
render: function(data, type, row) {
if (row['id']) {
data = '<input type="text" value="' + data + '">';
}
return data;
}
On another table, I'm able to insert a calendar for each row by giving it a unique id with meta.row. The calendar looks as it would on a normal form input.
{ title: "Mfg Date", data: undefined, orderable: false,
render: function(data, type, row, meta) {
data = '<div class="ui calendar" id="calendar-' + meta.row + '"><input type="text" value="' + moment().format('MMMM D, Y') + '"></div>';
return data;
}
},
Now I want to insert a search input.
{ title: "Part Number", data: "part_no",
render: function(data, type, row) {
if (row['comments'].substring(0, 2) === '??') {
data = '<div class="ui form"><div class="ui search input" id="searchParts"><input class="prompt" type="text" value="' + data + '"></div><div class="results"></div></div>';
}
return data;
}
}
This works, except it stays within the table border instead of overflowing outside of the table, like the calendar example above. I believe the main difference is the search input has a results div container. The results are fully rendered but as the last row in the table, completely obscured and a scrollbar is added. I have added a couple extra rows to the image below so that the results are partially visible and to show they are behind the table border.
The search results container has a z-index of 998, which I have been led to believe may be relevant. Not sure if anybody has any suggestions for things to try, but I thank you in advance.
↧
what is the procedure to connect editor with nodeJS..??
what is the procedure to connect editor with nodeJS..??some one will explain step by step please
↧
↧
datatable going unresponsive for large table
hello all,
in my table i have 40,000 row with 80 column and i also using server side processing. i wanted to load all the data in one page is this possible using this library?
also my problem is that while loading the data it take lot of time and after some time the page is going to be unresponsive.Also i does not want to use pagination and lazy loading with table scrolling.
in my current scenario i am able to add 10,000 records with 80 columns. can we achieve 40000 rows with 80 column on one page with out using pagination and lazy loading? if yes how?
↧
footerCallback total is not calculate
my footerCallback not work plss help me
it is my code
$(document).ready(function() {
$('#example').DataTable({
"ajax": {
"url": "script.php",
"dataSrc": ""
},
"columns": [{
"data": "catname"
},
{
"data": "stname"
},
{
"data": "buyingprice"
},
{
"data": "salesprice"
},
{
"data": "monname"
},
{
"mRender": function(data, type, row) {
return parseInt(row.salesprice / row.number);
}
},
{
"mRender": function(data, type, row) {
return parseInt(row.salesprice - row.buyingprice);
}
},
{
"mRender": function(data, type, row) {
;
}
},
{
"data": "number"
},
{
"data": "sum"
},
{
"mRender": function(data, type, row) {
return parseInt(row.number - row.sum);
}
},
sum = came from 
and I want to calculate this three columns {
"mRender": function(data, type, row) {
return parseInt(row.salesprice / row.number);
}
},
{
"mRender": function(data, type, row) {
return parseInt(row.salesprice - row.buyingprice);
}
},
{
"mRender": function(data, type, row) {
return parseInt(row.number - row.sum);
}
},
it is my footer callback code
var thuTotal = api
.column(4)
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
$(api.column(4).footer()).html(thuTotal);
↧
how to disable datepicker to show on custom field error message (Datatables Editor)
Hello,
I've added date time picker on a custom field within the editor, but the problem that every time I trigger an error on that composite field, the picker displays even there's no error with the date itself.
I've done it like so:
new Editor.DateTime($('input.date', this), $.extend({
format: conf.format, // can be undefined
i18n: that.i18n.datetime,
onChange: function () {
$('input.date', self).trigger('input');
$('input.date', self).trigger('change');
}
}, conf.opts));
How I can disable datetime picker from being shown completely even if there's an error with the date field?
Thanks in advance.
↧