Hi!
I have a question. Is there a way to add an icon in the search box position? Is there a way to add attributes to that icon such as data-toggle and data-target so i can open a bootstrap modal when clicked?
Thank you very very much!!
↧
Icon with data-toggle and data-target in search box position
↧
Example of Nested DataTable with Row Re-order of Outer Table Row?
I have seen nested tables and row reorder function separately. Can you point me an example of two combined? The inner table has to be a different table, not just td.details-control.
↧
↧
data rendering
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I am trying to create one column named <th>Status</th>
, whose value is determined by conditions on other column,
Like
if( data.value1 > 0 & data.value2){
return 'Placed';
}
where value1 , value 2 are from other columns.
Thanks
↧
Adding css to a specific cell
I am populating and displaying my data using Datatables. I am attemping to add css to the background of a specific cell under my Revenue Growth Column if a certain condition is met.
For example: if revenue growth column is less then 3 then I would like to make that cell background-color: red
Here is the array I am using to populate my table :
const data = [
{title: "Walk in", totalRevenue: 2002, growth: 3.2},
{title: "Retail", totalRevenue: 1231, growth: 2.2},
{title: "Hospital", totalRevenue: 5421, growth: 1.9},
{title: "Online", totalRevenue: 2442, growth: 3.2},
{title: "Fitness", totalRevenue: 8742, growth: 0.3}
]
I've attempted this by using
rowCallback: function(row, data, index){
if(data[2] < 3){
$(row).find('td:eq(2)').css('background-color', 'red');
}
Which I believe is checking column 3 which would be the value of my growth in my array. Currently with this line of code my data table has not changed.
My expected outcome is to have the background display red for any of the values that is less then 3.
Here is a link to a jsfiddle for an example of what I am working with:
↧
How to use excel button in SPFx
Hi,
I need to use excel button in SPFx to export table in excel format. But using buttons npm packages i am not able to use excel button.
Can anyone please let me know that how we can use excel button in SPFx.
Thanks
↧
↧
Table Selection reports different amount of rows
I'm using the Selection plugin, and trying to identify which row is selected and how many so I can work with that information. By default, my table is already showing how many rows are selected using select-info, but this number varies from the methods I'm using to gather that information myself. Here is an example of what I'd be doing
var table = $('#table_id').DataTable({
select: true
});
table.on('click', 'tr', function() {
$('#selectedButton').html('Selected: ' + table.rows({selected: true}).count());
});
Obviously I have the button created somewhere else. Anyways, the number reported using the default label in select-info is always correct and matches the visuals, but the number listed using the table.rows().count() method is always one step behind. So on the first click and selection, it shows 0. then on the next click it shows 1. I can select multiple, or go back to 0, it will always show the number of the last click. I then decided to work with the .select() and .deselect() methods to test those. I added a simple method to try and select all of the rows
table.rows().every( function() {
this.select();
});
This did not effect any of the rows outside the one that was clicked. There was no change visually, the default counter remained at one, no .selected classes were added, but the thing that did change was how many rows were labeled as selected using my table.rows().count() method. It's almost like there are two different counts happening.
To test further, I added another button and html change to the on('click') method. This button would track the ID that is in the first cell of the row, and change it depending on what row was clicked. It looks something like this
$('#infoButton').html('Selected: ' + table.row(this).data()[0]);
This showed that the clicks were registering on the correct rows properly, and that the timing of the on('click') method seemed fine. For some reason, any methods I try to use to count the amount of rows selected show up wrong. I've tried table.rows('selected').data().length, and a few other methods. They return the same, delayed by one step, response. I'm sure I'm missing something simple, but this has really confused me. Thank you in advance.
↧
searchPanes custom filter
Hi,
how can i add a custom filter from a date column (d-m-Y), i need a filter for "month" and a filter for "year"
↧
Buttons plugin breaks > 1.6.0
I can't update Buttons plugin cause it break all buttons. All list ( COLUMN VIS, EXPORT, SHOW ALL, ....) become empty. See pic:
My last working version is 1.6.0. If I try to update >= 1.6.1 I get trouble.
I don't know how to debug it...I don't see any error in firebug.
It seem a CSS problem cause firebug show me content:
I've already tried to temporary disable all other scripts except jquery.js and bootstrap.js...no success.
Any suggest?
↧
Import csv on select fields
Hi,
I use the papaparse to import data from csv files - which works as long I have text fields in editor.
But (logically) import of select fields does not work the same way - as setting the label (i.e. green as color)
instead of the key (i.e. 5 as the reference to the color green) is something different.
Here is the extract of editor code:
editor = new $.fn.dataTable.Editor( {
ajax: "tableedit_process",
fields: [
{ label: "ID", name: tablename + ".ID", type: "readonly",},
{ label: "LABEL", name: tablename + ".LABEL", type: "text"},
{ label: "PARENT_ID", name: tablename + ".PARENT_ID", type: "select", placeholderDisabled: false,placeholder: '--Please choose--'},
I use the function as defined here.
My idea is to change the "field.multiset" in case of a select field to setting the ID <editField in Datatable> instead of the value itself.
Could look like:
// function that updates the existing records
function updateRecords() {
if (toUpdate.length > 0) {
editor.edit(toUpdateIds, {
title: 'Confirm update',
buttons: 'Update',
message: 'Click the <i>Submit</i> button to confirm the update of ' + toUpdate.length + ' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
});
for ( var i=0 ; i<fields.length ; i++ ) {
var field = editor.field( fields[i] );
var mapped = fieldData[ field.name().replace(tablename+".","") ];
for (var j = 0; j < toUpdate.length; j++) {
if (field.s.opts.type == "select") {
// QUESTION: HOW TO ACCESS the options coming from here??
field.multiSet("row_"+tabbi.row(toUpdateIds[j]).id(), toUpdate[j][mapped]);
}
else
field.multiSet("row_"+tabbi.row(toUpdateIds[j]).id(), toUpdate[j][mapped]);
}
}
}
}
Is this the right approach? Or should it also work if I set the value (and not the ID)? In my example this did not work...
And if it is correct : How can I access the options-values for the select-fields?
Thanks,
Pascal
↧
↧
Send the table on PHP
Hello there,
so i do this code : https://jsfiddle.net/y6ogvj05/
so when i clic on Validation i need to send all the tab on my php server_processing, can u help to understand why i can get all table info please
i think problem is here :
'''
$("#valider").click( function()
{
console.log(table.data());
}
);
'''
so how get all table info to send him on py server_precess.php ?
thanks
↧
how to update select options based on previous selected values in Individual column searching
Hello everyone, I hope I will get help here as I am stuck over a week and couldn't make it work.
I am applying Individual column searching (select inputs) on the footer of my DataTable and using bootstrap-select. When I select multiple options It filters my data and works fine.
But when the search is applied I want the options in all selects to be updated based on current selected values.
So in my demo if I select office London and New York, I want to see in field Name only people where are only in London or New York, not all names.
There is a proposed solution here, it was only for single select inputs but helpful as start but unfortunately i couldn't figure out how to make mine with multiple select works.
Here is my demo https://jsfiddle.net/3gahmtbr/ I commented my code for better explanation. Any suggestion please why {search:'applied'} is not working in my case ? Thank you very much.
↧
The modal in editor is not showing header and footer.
The header and footer section of the modal is not shown in any of the modal with following configuration.
editor = new $.fn.dataTable.Editor( {
table: "#data_table",
idSrc: 'id',
ajax: "...",
display: 'bootstrap',
fields: [
.....
]
} );
Inspection shows the display option set to none. Are they hidden by default, do we have options to show/hide them?
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
↧
Colspan header responsive issue
I am running into an issue where I have a header with two rows and some rowspans/colspans. When I use the table on mobile, it not only displays wrong but also doesn't keep the header info, the coloring is removed, etc.. Thoughts?
This is how it looks on mobile:
This is how it looks on desktop:
This is the top portion of the table
<table id="playerSummaryList" class="display responsive cell-border compact" cellspacing="0" width="100%">
<thead>
<tr>
<th rowspan="2" valign="bottom" >Player Name</th>
<th colspan="5" class="text-center">Offense</th>
<th colspan="5" class="text-center">Defense</th>
<th colspan="6" class="text-center">Total</th>
</tr>
<tr>
<th class="text-center">W</th>
<th class="text-center">L</th>
<th class="text-center">T</th>
<th class="text-center">%</th>
<th class="text-center">Pts</th>
<th class="text-center">W</th>
<th class="text-center">L</th>
<th class="text-center">T</th>
<th class="text-center">%</th>
<th class="text-center">Pts</th>
<th class="text-center">W</th>
<th class="text-center">L</th>
<th class="text-center">T</th>
<th class="text-center">%</th>
<th class="text-center">C%</th>
<th class="text-center">Pts</th>
</tr>
</thead>
↧
↧
editor inline problem- how to chose which data will sent to server
hey i want to add in inline edit one more field to the field that been edit,
this field has not been change, but it must sent to server for my calculation.
i dont want to sent the entire row data, only the field that been edit and one more that is very important
in the picture, the only two fields i want to sent in gray box
↧
sorting huge number
i have problem in datatable sorting with huge number like this :
362516690048775976
362516690048775977
362516690048775978
362516690048775979
362516690048775980
362516690048775981
the sorting with huge number not working
thanks
↧
FixedHeader column click
Example : https://jsfiddle.net/mqapoxu8/4/
Table ordering is set to false, fixedHeader to true.
I intercept the column header click with
$('.device-table').on( 'click', 'thead th', function () {
alert('x');
} );
It works fine except when the table has been scrolled. Any solution ?
↧
Format values from table for Editor instance
Hi all,
I stumbled upon the following problem:
I have a column in my table which contains 1 or 0.
with the render function I got it to display the 1 or 0 as a word in my table. I want to have the same in my editor instance, so that the user wont need to select 1 or 0 but rather the word.
Example
1 = taken
0 = empty
I want to have a dropdown in my Editor which shows taken / empty as options rather than 1 or 0.
Is that possible?
Thanks a lot!
↧
↧
Validation mensage keep say its wrong
Hi there.
I'm testing the usable experience setting some values and try to make a better experience for the cliente. I'd like a help on this exemplification:
First, i tried purpose a wrong value on the first row the ge the whong mesenge:
1º Put na invalid value on salary and i worked like this:
2º I'd moved for the next row and tried purpose a wrong value on second row:
It seems to me that appear a field name that wasnt showed on the firt messenge.
3º Then I went for the first row again an tried an valid value. The messenge kept apearing
I trying on the Editor example:
https://editor.datatables.net/examples/extensions/keyTable.html
Can anyone help me to make the user experience better on the wrong messenges? It seems to me that is a messenge log on the rows.
Thank you. Cauê
↧
I am displaying a 20k row datatable through django. It is very slow to render. database is sql.
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="call">
<div class="spacer"></div>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th> Variable Name</th>
<th>Return Type</th>
<th>Rule A</th>
</tr>
</thead>
<tbody>
{% for data in variable %}
<tr>
<td>{{ data.variable_name }}</td>
<td>{{ data.return_type }}</td>
<td>{{ data.rule_a }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
↧
infinite select/deselect loop
Link to test case: http://live.datatables.net/mesorudu/1/edit
Description of problem:
I've copied the code from https://datatables.net/blog/2019-01-11. In my case I want to allow display of the table for the click event on the + details-control field, and edit of the table when the user selects the row.
I've removed the editor function in the child row for now, as this doesn't seem to be related to the problem.
In http://live.datatables.net/mesorudu/1/edit, when the user selects the row, the code goes into an infinite select / deselect loop.
Any guidance would be appreciated.
Possibly I need to stop propagation in the select and/or deselect handler if some condition is met?
[note: if I remove the table.detach call in destroyChild, the select only fires once but deselect/select events are lost - see http://live.datatables.net/mofumuzi/1/edit -- having said that I think we should try to understand the infinite loop when most closely based on the example in https://datatables.net/blog/2019-01-11]
↧