Table contains more columns accessed by using X-scroller, but if I add responsive Modal details display it shows only 3 columns instead of all.I want it to be work properly with scrolling for large no of columns.Actually I am getting data from web service,but due to tech.problem I have attached similar scenario.
My jsFiddle is:https://jsfiddle.net/xk9ayg5v/
↧
responsive Modal details display is not wotking for large no of columns with horizontal scrolling
↧
Data tables Grouping for rows with child colums
I am using DataTables and based on this example;
https://datatables.net/examples/advanced_init/row_grouping.html)
I would like to adapt it to GROUP ROWS WITH CHILD ROWS WITHOUT AFFECTING THE CHILD ROWS.
I.e. based on the above example from the link, I would like to group all the employees based on office location and considering the fact that each row employee might have childrows eg, telephone email, etc
I would highly appreciate it. if someone comes to my aid on this
↧
↧
Multiple KeyTable instances across multiple tables
I have two <table> elements on a single page. Each table element is associated to its own private DataTable instance (instead of a single DataTable instance that wraps multiple table elements). I would like to use KeyTable for keyboard navigation and Editor for inline editing in both tables.
The problem that I'm having is that all KeyTable instances listen for keydown events on the document element. In other words: when I press a key, all tables on my page respond to that key. This tends to break the code in unexpected ways because KeyTable event handlers are executed in a state that would not be possible if there was only a single table.
Example:
Focus a cell in one table and press enter to activate inline editing. All other tables on the page will also respond to the keypress, but the code will crash because there is no lastFocus.cell for Editor to start inline editing.
I don't know how to get around this since keypresses are handled globally instead of per table.
↧
on Data Table row click event image pops up
I am looking to have an image popup on row click of a data table. As in this example: https://datatables.net/examples/advanced_init/events_live.html an alert message is shown, when a row is clicked, I would like to have an image instead of alert message.
↧
Dynamic Child Rows
Hi,
I am wondering if we can have dynamic child rows in a table? Meaning the number of child rows varies based on the parent row I select.
↧
↧
Issue with Moment.js plugin
Hi Allan,
with the fix provided by you the moment.js plugin works fine with format: 'L' now.
I also need to use format: 'LLL' though and this causes another problem.
While moment.js properly returns "11. Februar 2017 11:31" as "tomorrow" from this
momentLocale = 'de'; //used in Editor
moment.locale('de');
tomorrow = moment(currentTime).add(1, 'day').format('LLL');
there is however an issue using it in Editor:
{
label: "End of Bid Period:",
name: "rfp.bidtime_end",
type: "datetime",
def: function () { return tomorrow },
format: 'LLL',
opts: {
showWeekNumber: true,
momentLocale: momentLocale
}
}
The default works fine and displays "11. Februar 2017 11:31". If I pick a different date time and want to save it Editor sends this to the server: 0000-00-00 00:00:00. I could see it in my debugger. I tried with format: 'L'. That worked fine but it is not the format I need in this case. So the problem is really about the 'LLL' and Editor. I would really need most of these formats to work:
https://momentjs.com/
Please help.
↧
Remove only horizontal scrollbar
Hi Team,
How can I remove horizontal scroll bar from table as I'm facing alignment issue for header and data.Once I scroll to right the data gets aligned,otherwise header and data alignment are mismatched.Could anyone suggest me how to remove horizontal scroll.
Below is my code,options I have used:
$.get("dyndata.jsp",function(data){
var x= JSON.parse(data);
var cols = [];
var exampleRecord = x[0];
//get keys in object. This will only work if your statement remains true that all objects have identical keys
var keys = Object.keys(exampleRecord);
//for each key, add a column definition
keys.forEach(function(k) {
//alert("k "+k)
cols.push({
title: k,
data: k
//optionally do some type detection here for render function
});
});
//initialize DataTables
var table = $('#example').DataTable({
scrollY: "500px",
scrollX: true,
scrollCollapse: false,
paging: false,
ordering:false,
columns: cols
});
//add data and draw
table.rows.add(x).draw();
highllight();
});
↧
Mutliple Columns For Checkboxes (Editor)
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!
↧
Don't use getAll
Hello, I'm new using tables, I currently have a ruby application that lists all the products, but I'd like the server to bring only the necessary per page, as I have to modify my datatable so that it works
If you can help me please
↧
↧
How to catch an event on pagination buttons next/previous of DataTables
Can anybody show me an example of how to catch the events on pagination buttons next/previous of datatables? In particular I'm interested for the "next" button. It would really help me if you have an example of how to catch the event of a particular pagination button.
I have searched and in datatable and found that to catch an event you should use this :
$('#example').on('page.dt', function ()).DataTable();
But this catches the events for all the pagination buttons. I want to know how to do it for a particular one("next" in my case).
Thanks in advance
↧
Aligning header with data
I'm struggling to align the header with the data when I align left. It's fine if I align center. If I align left, the header is approx 0.5cm further to the right of the data. I've attached a picture of what it looks like:
Here is my javascript:
$('#results').DataTable({
destroy: true,
data: final,
paging: false,
info: false,
bFilter: false,
aaSorting: [],
bSortClasses: false,
columns: [
{ "data": "league" },
{ "data": "home_team" },
{ "data": "away_team" }
],
columnDefs: [
{ "title": "League", className: "left", "targets": [0] },
{ "title": "Home Team", className: "left", "targets": [1] },
{ "title": "Away Team", className: "left", "targets": [2] }
]
});
Here is my CSS:
.left {
text-align: left;
}
.center {
text-align: center;
}
↧
Mutliple SQL Joins with one-many relationships
I am trying to figure out how best to deal with multiple joins where there are multiple one-many relationships.
The desired DataTables display result (also to be edited in Editor):
Volume_A | Service_1 | url_1, url_2
| Service_2 | url_3
| Service_3 |
------------------------------------
Volume_B | Service_1 | url_5, url_6
| Service_4 |
That information would be populated by the following tables:
CUSTSVCS
id, name, description
URL
id, name, notes
CUSTSVC_URL
id, custsvc_id, url_id
VOLUME
id, name, description, other_junk
HOST_CUSTSVCS
id, volume_id, custsvc_id
I can rather easily display the Volume and associated services, but not the URL tied to each service on each specific volume. Maybe there is a better way to structure the database?
↧
Sorting by computed column doesn't work (server side)
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
↧
↧
Run script BEFORE exporting begins - Buttons Plugin
Hi there,
I need to trigger a function which makes some changes to the DataTable at the point that a user hits one of the export buttons (e.g. print, csv etc). These changes need to take place before the export/action actually commences, but it doesn't look like there are any events being fired here.
Looking at the documentation I can see that there is the 'button-action' event (https://datatables.net/reference/event/button-action), but this only fires after the export has started, so my changes are not carried through into the export.
Is there anything I can do to achieve running some code before the export actually starts? I guess having a 'before' event fire will be a feature request otherwise...
Thanks,
Elan
↧
Editing in Related Tables
I'm trying to port an existing web app into DataTables/Editor. Any record in the table being edited might have zero to many related records in another table. Is there any way from within an Editor form to invoke the editor again on the related table record in the related table? I'd like to be able to create a record in the related table when necessary, as well as to display the related records in that table. So far, I haven't found a way to do this within the DataTables/Editor framework.
Since this is a feasibility question, I don't have a problem pagers debug or link to. However, I can provide more detailed information if that would help someone who wants to respond.
↧
PDF Export Styles
I want to style the exported pdf. in the console.log(doc) I see some styled named tabelHeader,...
Is it possible to change these settings?
I tried with
customize: function(doc){
styles: {
tableHeader:{
fillColor:"#F0F8FF"
}
}
But this did not work.
Andreas
↧
"Requested unknown parameter" when colspan is used
Im getting the "Requested unknown parameter" warning because my table has a row which uses colspan. See attached image.
<tr class="t2_tr">
<td colspan="15" class="t2_hc_line table-header-lines">Cold War Kids - First</td>
</tr>
Is there a setting I can use to avoid this warning?
↧
↧
Is there a way to add a ranking column to a html table of numbers?
Hi, Is there a way to add a ranking column to a html table of numbers? I'm trying to replicate a table that was created in Excel using Excel's Rank() function. Anyone know if this can be done using DataTables? I already have the numbers in html page. See two attachments.
↧
FixedButtons... (or how to keep buttons from scrolling)?
I've just started with datatables and while I have integrated FixedHeaders and can get that to work, I was wondering if there is anyway to also keep the buttons from scrolling as well (i.e. keep them with the fixed header).
Thx
↧
Scroller serverside fetch data as it scrolls
Can anyone point me to example where we can fetch data as datatable is scrolled?
I can see that it fetches all the data at once not as it is getting scrolled.
↧