When using inline editor to edit the cells of a DataTable, the default behavior is to submit the changes to the server when the cell is blurred. This results in a separate AJAX call for each cell edit. What I would like is to use a button to submit ALL changes at once after the user is done editing the table, instead of individual cell submissions. Anyone know how to do this?
↧
Inline editor and submitting all cell data at once, instead of submitting individual cell changes
↧
Using columns.render in Service Implementation
In the service implementation, how do you use the columns.render method to render the data as a URL?
In the traditional implementation you can call the columnDefs using JavaScript:
"render": function ( data, type, full, meta ) {
return '<a href="'+data+'">Download</a>';
So I'm looking for the syntax for rendering that data from my PHP controller using the service implementation.
I know this isn't correct, but I'm currently trying to use something like this:
return [
'select' => true,
'columnDefs' => [
'targets' => 0,
]
];
↧
↧
Using columns.render in Service Implementation to link data.
In the service implementation, how do you use the columns.render method to render the data as a URL?
In the traditional implementation you can call the columnDefs using JavaScript:
"render": function ( data, type, full, meta ) {
return '<a href="'+data+'">Download</a>';
So I'm looking for the syntax for rendering that data from my PHP controller using the service implementation.
I know this isn't correct, but I'm currently trying to use something like this from within the getBuilderParameters() method:
return [
'select' => true,
'columnDefs' => [
'targets' => 0, //This targets correctly
'visible' => true, //I can set this to false and it hides the column, so I know I'm at least partially there.
'data' => null,
'render' => [
//Need Code
],
]
];
↧
type: "checkbox" not showing
Hi, I can't get my MySQL BOOLEAN field showing as a checkbox. Would you help me by adding checkbox to your example page? I notice it has most input elements but is missing the checkbox.
Many thanks
↧
Layout Change
I have a table with many filed headings. I do not want to make people horizontally scroll which most people find awkward. I would like to have my table look more like a form or like the popup that comes up when you click on new... Is this possible?
↧
↧
DB2 and Editor
We use DB2 as our datasource.
Has anyone got a working example of using DB2 with Editor?
↧
buttons plugin intermittently just does not appear
I have an issue, with the buttons plugin sometimes not rendering, and there are no javascript errors or warnings. I am create datatables with options like this:
dom: 'lfrtipB',
buttons : ['colvis', 'copyHtml5', 'csvHtml5', 'excelHtml5'],
colReorder : true,
data: ...,
columns: ...
Sometimes the buttons appear, and sometimes they do not. If I reload the page, they appear. Here is the contents of my downloaded .zip for datatables:
Buttons-1.2.4/
ColReorder-1.3.2/
DataTables-1.10.13/
JSZip-2.5.0/
I am loading datatables like this
this.table = $(this.tableElement).DataTable(opts);
This is a dynamic single page app, made with aurelia, and sometimes I need to re-draw a table in a custom element, which I am doing some cleanup like this:
if(this.table) {
this.table.destroy();
$(this.tableElement).empty();
}
^^ does the above also cleanup the buttons plugin?
Is there a way to get the buttons plugin to be more verbose if it fails to load? Any other suggestions for solving this? I am kind of stuck here.
↧
Preventing browser unresponsive timeout when exporting large table to Excel.
Hey all,
I am currently playing around with the export to excel, pdf, cvs, ect plugin for DataTables for a POC. I tried creating a table with 2000 rows and the exporting it to excel. While it does work, the browser thinks the page has become unresponsive, and it tries to kill the page. Is there anyway to prevent this? I'd like to just display a loading dialog or spinner while writing the file, but I can't find any pre or post function callbacks to support this functionality, but I could just be missing it. Code below, to save time I have JavaScript add the 2,000 rows once the 'Add Rows!' button is clicked:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>
</head>
<script type="text/javascript">
var count = 1;
$(document).ready(function() {
var table = $('#example').dataTable( {
"scrollY": "200px",
"scrollX": true,
"scrollCollapse": false,
"ordering": true,
"order": [[ 3, "asc" ]],
"paging": false,
"dom": 'Bfrtip',
"buttons": [{extend: 'excelHtml5', title: 'POC Filename'},
{extend: 'pdfHtml5', title: 'POC Filename'}],
"filename": 'test.xlsx'
} );
$(window).bind('resize', function () {
table.fnAdjustColumnSizing();
} );
$("#add").click(function(){
for(var i = 0; i<2000; i++){
var row = [count + .1, count + .2, count + .3, count + .4,
count + .5, count + .6, count + .7, count + .8,
count + .9];
var rowNode = $("#example").DataTable().row.add(row).node();
$(rowNode).css('text-align','left');
$(rowNode).attr('id', "row" + count);
count++;
}
$("#example").DataTable().draw();
});
});
</script>
<button type="button" id ="add">Add Rows!</button>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
</tr>
</tfoot>
</table>
</html>
↧
Issue with Invalid JSON, yet lints clean
I'm trying to build a tabbed report using 5 datatables. I have abandoned this idea, as I have been unable to get it to work.
I have switched to single pages for each, but hitting the same issues.
3 of the tables are returning invalid JSON errors, in fact I'm getting 8+ alerts per page on the same query.
I don't understand why the JSON is not working, and why its attempting to run AJAX 8+ times per page
I've included my code here: http://live.datatables.net/jamidaza/1/edit?html,js
The example doesn't work, as it requires the php data component.
However, I've included a small working set of data below as it is returned from php/ajax
{"draw":15,"recordsTotal":"56282","recordsFiltered":"13","data":[["2","06-JUN-14","246246","246246","246246","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","246246criteria_null_value",null,"criteria_null_value",null],["3","06-JUN-14","26500?","265000","265009","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26500?criteria_null_value",null,"criteria_null_value",null],["4","06-JUN-14","26501?","265010","265019","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26501?criteria_null_value",null,"criteria_null_value",null],["5","06-JUN-14","26502?","265020","265029","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26502?criteria_null_value",null,"criteria_null_value",null],["6","06-JUN-14","26503?","265030","265039","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26503?criteria_null_value",null,"criteria_null_value",null],["7","06-JUN-14","26504?","265040","265049","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26504?criteria_null_value",null,"criteria_null_value",null],["8","06-JUN-14","26505?","265050","265059","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26505?criteria_null_value",null,"criteria_null_value",null],["9","06-JUN-14","26506?","265060","265069","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26506?criteria_null_value",null,"criteria_null_value",null],["10","06-JUN-14","26507?","265070","265079","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26507?criteria_null_value",null,"criteria_null_value",null],["11","06-JUN-14","26508?","265080","265089","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26508?criteria_null_value",null,"criteria_null_value",null],["12","06-JUN-14","26509?","265090","265099","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26509?criteria_null_value",null,"criteria_null_value",null],["13","06-JUN-14","2651??","265100","265199","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","2651??criteria_null_value",null,"criteria_null_value",null],["14","06-JUN-14","265265","265265","265265","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","265265criteria_null_value",null,"criteria_null_value",null]]}
Any assistance appreciated
Allan
↧
↧
Is there a Server-Side PHP example available for 1.10
There is a 1.09 version, using PHP with Oracle.
However, I haven't found an updated version for 1.10.
With the parameter changes, I want to ensure I'm doing things correctly.
An example PHP would be quite useful if it doesn't already exist.
Thank you,
Allan
↧
DataTable missing sorting icon
Hello,
Unfortunately, i have tried every single possibility of solution for this problem, including the one described in a discussion in this forum.
The problem is the fact that the sorting icon on my datable doesn't appear. Another problem/inconvenient is the type of icon. Basically are two types, the most standard one and the most awesome, and i want to use the last one mentioned.
I really tried everything. Import of .js and .css, definitions in the php page.
I don't know what to do now.
Thank you,
Best regards,
msvf.
↧
DT EDITOR: alternative for submit:changed? (submit:edited)
I'm trying to minimize the data flow between server and browsers (sometimes request data gets cut because it's too long), so I've tried to use:
formOptions: {
main: {
submit: 'changed'
}
},
I've noticed that this actually only sends changed fields, so if I select multiple fields and one of them is not changed (new value = old value), I won't get that key POSTed to server for data sets for which value remained unchanged. Would there be a way to still send the key that is missing, which would mean that we are submitting "edited" fields and not only "changed" fields? I would prefer that, so that I can always configure my validator based on first data set and then validate the whole data with it (I think that's sufficient).
Is there a mode or way around it and submit all "edit" fields, not only "changed" ones?
↧
One Search button for two categories
Hi,
I have different categories in my table and I want to implement one search button to show two categories (of 5).
Actually I use this code:
{
text: 'Purchased',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
table.columns( 1 ).search( "Purchased" ).draw();
}
},{
text: 'Sold',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
table.columns( 1 ).search( "Sold" ).draw();
}
}
And I tried to change it into this (which doesn't work also with enabled regex):
{
text: 'Purchased or Sold',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
table.columns( 1 ).search( "Purchased|Sold" ).draw();
}
}
Have anybody an idea to merge the to buttons without changing the categories?
Thanks in advance
Patrick
↧
↧
Rows on datatables not visible for certain users in Chrome
I have a visualforce page using Datatables. It is working in all browsers but, for certain users the rows in the table are not visible while using Google Chrome. Latest javascript version library is being used in the page
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js.
Is there any setting or something on the page that is not being supported on these user's browser?
↧
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.
↧
Trying to use jquery.modal with Editor
I am trying to present a modal from within the Editor bubble.
I am using jquery.modal.js from GitHub.
The modal appears behind the bubble and I see it when I close the bubble.
How can I make it appear on top of the bubble like a datepicker does?
Or is there a better, more Editor friendly way, to display a modal over the Editor bubble?
Regards,
Jim
↧
Datetime field not showing error message from server
Hi! I'm running into an issue where I'm sending down an error message in the fieldErrors array in json to a datetime field, but the only text displaying in the editor-datetime-error div is 'Error'.
It's finding the correct field and setting an error, but the message doesn't seem to be inserted. Any ideas on what I might be doing wrong?
↧
↧
Remove checkbox from header
Hi there,
I have just started getting into Data Tables and am struggling with trying to remove a checkbox from the header cell of the column. I am using checkboxes to help the user see when a column is selected but I can't figure out how to remove the one that is inserted automatically in the header of the column that is making it look a bit ugly. I am probably missing something really obvious.
Here is the Javascript I am using.
Any help is appreciated.
Thanks.
$('#grAddUserTable').DataTable({
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]],
pageLength: 5,
responsive: true
});
↧
scrollTo() specific row in the next pagination
i'm already implement the scroller for datatable and want to use scrollTo function
the pagelengthdisplay is 63 and when i do table.row(70).scrollTo(), it can't be done
the function tell that no index was found in the page
when i do table.row(60).scrollTo() it work nicely
how can i make that table.row(70).scrollTo() to work, any solution for this problem
thank you,
edos
↧
Unable to add additional columns due to ajax error
Hello!
At the moment I'm attempting to add another column to my page. However, I will get an ajax error whenever I do. It's fine with 10 columns, but as soon as I add the 11th, the ajax error will appear.
Here's my debugger
http://debug.datatables.net/ewolon
And the console error shows:
responded with a status of 403 (Forbidden)
↧