Example: editor.on('initEdit', function(a, b, c){ var myEditor = this; });
I did not see any examples showing this. I am currently using the above in many places to get an editor instance inside my event.
Is that okay?
↧
Is there a reason not to use "this" in an editor event?
↧
Export to Excel very slow from version 1.10.17
Hi,
I'm using datatables on a big amount of data, containig more than 6000 row, ~ 25 column each.
I was using it with dT version 1.10.16 and I wanted to upgrade the version to the last one 1.10.19.
I've noticed that the Export to Excel functionality is very very slower with the last version.
After trying several time switching versions, with the same dataset, I've got this results:
version <= 1.10.16 is very fast (~ 4 seconds)
verison >= 1.10.17 is very slow (> 30 seconds)
You can see here the difference:
version 1.10.16
version 1.10.17
Did some of you also noticed this behaviour?
thanks!!
frasurf
↧
↧
column.search() blank values
I have a table were we are listing some projects that we are working on. I have a column called "Claimed by" which shows who is going to be working each item. I've used this technique to add a search footer to search the individual column. This is great for finding the pieces assigned to specific people.
How can I use the same search to find the empty ones?
I've done the following to see the values in that column table.column(ref).data().unique().sort() and I see that I have both empty string and null values which should be returned in this search.
I tried table.column(ref).search("").draw() but that just clears the search. And I tried the same with null but it returns nothing.
In addition to the code to get results, I'm wondering is there an easy user interface to allow my users to quickly find the "emptys"?
↧
How to avoid exporting certain text on the column?
On my table, there is a column with a hidden span with hidden text, that I need to order dates correctly while showing them in a format that's not 'yyyy/mm/dd'. However, when I export the table some random characters (
) appear on those columns. I believe that it's trying to export that hidden span, and when it fails to decipher it, it inserts those characters.
Is there a way to tell the program not to export that information? And if not, is there a way I can show the dates with the format 'dd/mm/yyyy' and force to order that column correctly (if I don't put the hidden span with the format 'yyyy/mm/dd', it orders the information as text, placing 01/02/1999 before '20/03/2018)
Thank you all!!
↧
Activate keyboard layouts in forms
Is there a possibility for mobile devices enabling the specific keyboard layout in forms or inline edit as provided in HTML5 (Input-Types)?
↧
↧
Generator for Editor with NodeJS issues (for the developers)
I tested today Generator for Editor with NodeJS and I noticed 2 minor issues which I already fixed but it might be of interest for the developers. Both concern the generated index.js:
- The line:
let db = require('./db');
is missing.
- After:
db.raw(query, bindings)
at the end of the file there is this line:
});
which shouldn't be there.
↧
Options array
Pulling my hair out. I'm trying to populate a select field with data from ajax response.
This is my ajax response:
{"data":[{"DT_RowId":"row_00001","deviceAsset":"Click to Add...","deviceOwner":"Users Name","deviceLocation":"The Location","deviceDept":"The Dept"}],"options":{"deviceLocation":[{"label":"Location 1","value":"Location 1"},{"label":"Location 2","value":"Location 2"},{"label":"Location 3","value":"Location 3"}]},"files":[]}
This is my editor declare:
editor = new $.fn.dataTable.Editor( {
ajax: deviceTBL+'&request=system',
fields: [ {
label: "Asset:",
name: "deviceAsset"
},
{
label: "Owner:",
name: "deviceOwner"
},
{
label: "Location:",
name: "deviceLocation",
type: "select",
placeholder: "Select a location"
},
{
label: "Department:",
name: "deviceDept"
},
]
} );
The data loads in the table no issues. But when I click to edit in bubble, the dropdown is empty except for the place holder. What am I missing?
↧
Enter op 'submit' button
When I tab through the form until the focus is on the submit button and then press enter, an error is raised:
dataTables.editor.js:4941 Uncaught TypeError: Cannot read property 'canReturnSubmit' of null
at HTMLDocument.<anonymous> (dataTables.editor.js:4941)
at HTMLDocument.dispatch (jquery.js:3)
at HTMLDocument.r.handle (jquery.js:3)
I'm not sure any functionality is lost, but I think the relevant function should check whether field is valid.
↧
Add number filter and range bar filter to the second row of the TablePress table.
I need to add number filter and range bar filter to the second row of the TablePress table. The table example is shown in the following link:
Http://brickevo.com/release/wp_grid_pro/index.html
It may use the Javascript of DataTables to modify TablePress to complete the function modification.
https://datatables.net/manual/installation
Please help me, thank you~
↧
↧
Search in child rows coming from ajax Call
Hi, I had the code working where i can load the child rows from the ajax call and keep them open even after the reload.
My next take is to do a search for the child rows who database is coming through ajax, cannot use hidden fields option as i had that coming coming from a separate query
tried many ways in google forums but could not find how can i implement it,
Following this post
https://stackoverflow.com/questions/30471089/datatables-search-child-row-content/30476168
but unable to fix it how should i do it, because i have some links which does the crud operations and redraw the table, now i want to implement the search so even after the redraws i should be able to find the data and keep the child rows open where the search is found
Thanks
I have nothing written as such, but will try to give a shot, if something can work
↧
DataTable sort time is not working
Page script js:
$.fn.dataTable.moment( 'MM/DD/YYYY' );
// omit the process of creating dom element...
$(table)
.find("table")
.DataTable({
ordering: true,
order: [],
destroy: true,
"dom": 'Bfrtip',
buttons: [
{
extend: 'csv',
title: fileName
}
]
});
quite wondering how to solve this, appreciated to the help of any kinds
↧
DataTable column render display html entities securely
I have this stupid hack data in my database:
<script>console.log('LOOOOOOOL'); alert('LOOOOL');</script>Sobat Bulat menjual berbagaimacam jajanan berbentuk bola mulai dari yang manis-manis hingga gorengan. Menu kami antara lain bola udang, bola ayam bawang, bola jagung kentang, dan masih banyak lagi.
then I use datatable with server-side type to display it, then the alert show up. How to prevent it? I've tried to encode the html entities via columnDefs render function but not working. alert still showing up. I want to display it encoded (raw text). please help.
↧
Footer with page navigation is missing after migration to production server
Hi Forum,
I moved my website using Datatables onto the production server (in our Company-Intranet; non-public). I missed no files to upload and there are no errors showing up on console, but the footer with page navigation is not available anymore. Do you have any hints for me?
Thx and regards
Dom
↧
↧
Single column with multiple rows
How can I create a single column without a header/title which has multiple values as rows? usig datatables rows and columns
↧
Buttons is breaking UIkit theme structure
Hi,
I am using UIkit for my tool and so I have integrated DataTables and required components to it. I am using pageResizer to auto resize the table inside its container. UIkit being rendered properly without any issues.
Here is what I am importing to the html page to make it work.
<!-- UIkit -->
<link rel='stylesheet' href='css/uikit.min.css'>
<!-- dataTables -->
<link rel='stylesheet' href='css/dataTables.uikit.css'>
<!-- jQuery -->
<script src='js/jquery-3.3.1.min.js'></script>
<!-- dataTables -->
<script src='js/jquery.dataTables.min.js'></script>
<script src='js/dataTables.uikit.js'></script>
<!-- UIkit -->
<script src='js/uikit.min.js'></script>
<script src='js/uikit-icons.min.js'></script>
<!-- Additional dataTables plugins/Extensions -->
<script src="js/dataTables.pageResize.min.js"></script>
Everything works okay so far.
Now I am trying to import the Buttons extension and it breaks the code for table being rendered with UIkit classes.
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.html5.min.js"></script>
I have captured pictures from Developer Tools (F12) in Chrome to see the difference in structure.
I am 99% sure that I am using the correct configuration when initializing the table but it is something wrong inside the Buttons extension script that is breaking it up. I am suspecting that possibly because Buttons Extension is still not utilized for UIkit yet ?
It would be great if we can fix that so that I can use buttons on my tool. Thanks.
↧
How do i specify the child rows for each row in my table ?
I'm using the datatable example of child rows without the ajax and im having a problem where my child rows all have the same data.
function format ( d ) {
// `d` is the original data object for the row
return '<div class="col-md-8" style="padding-top:20px;">'+
'<table class="table table-bordered">'+
'<tr>'+
'<th>'+
"Product Name"+
'</th>'+
'<th>'+
"Quantity"+
'</th>'+
'</tr>'+
'<tr>'+
'<td>'+
"data here"+
'</td>'+
'<td>'+
"data here"+
'</td>'+
'</tr>'+
'</table>'+
'</div>';
}
$('#manageOrderTable tbody button').on('click', function () {
var tr = $(this).closest('tr');
var row = t.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
This is my table:
<tbody>
@php
$x=0;
@endphp
@foreach ($orders as $order)
<tr>
<td></td>
<td>{{$order->order_date}}</td>
<td>{{$order->client_name}}</td>
<td>{{$order->client_contact}}</td>
<td class="details-control">
<button class="btn btn-info btn-xs">
<b>Items : </b> {{$item_count["$x"]}}
</button>
Item Id: @for ($y = 0; $y < $item_count["$x"]; $y++)
{{$item_list["$y"]->product_id}}
@endfor
{{-- <!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn btn-info btn-xs"><b>Items : </b> {{$item_count["$x"]}}</button>
<button type="button" class="btn dropdown-toggle btn btn-info btn-xs" data-toggle="collapse" data-target="#extra_info{{$x}}" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
</div>--}}
{{-- <div id="extra_info{{$x}}" class="collapse">
@for ($y = 0; $y < $item_count["$x"]; $y++)
{{$item_list["$y"]->product_id}}
@endfor
</div> --}}
</td>
@if ($order->payment_status==1)
<td><label class="label label-success">Full Payment</label></td>
@elseif($order->payment_status==2)
<td><label class="label label-info">Advance Payment</label></td>
@else
<td><label class="label label-warning">No Payment</label></td>
@endif
<td>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="{{route('orders.edit',$order->order_id)}}" id="editOrderModalBtn"> <i class="glyphicon glyphicon-edit"></i> Edit</a></li>
<li><a type="button" data-toggle="modal" id="paymentOrderModalBtn" data-target="#paymentOrderModal" data-due="{{$order->due}}" data-id="{{$order->order_id}}"> <i class="glyphicon glyphicon-save"></i> Payment</a></li>
<li><a type="button" onclick="printOrder({{$order->order_id}})"> <i class="glyphicon glyphicon-print"></i> Print </a></li>
<li><a href="{{route('orderDelete',$order->order_id)}}" type="button"> <i class="glyphicon glyphicon-trash"></i> Remove</a></li>
</ul>
</div>
</td>
</tr>
@php
$x++;
@endphp
@endforeach
</tbody>
I want to show the item id of each row in the child table.
↧
Actions after uploading a file
Hey,
i'm using a standalone editor to do some upload of files, but after the upload i want to run some custom functions (server side is php) on the uploaded file, and then store the output of these functions either in the returned json or in the db.
How would i handle this? what hook should i use for it?
Maikel
↧
↧
inline row validation when field changes
hi everybody,
I've read one or two posts here making questions about the possibility of entire row validation when a field changes. In my case, what i need is to validate each field onPreSubmit and focus on the input that has the error, making it editable. I've changed the method so that if the changed value is valid, I close the editor instance and open a new one for the invalid field(next field to be validated) , returning false.
But it seems to be useless, it makes a previous submit and then makes the invalid field editable with the error behind.
is there any (better) way to achieve this?
Thanks in advance, guys!
↧
ckeditor5 Cannot read property 'create' of undefined
Hi,
I followed your instructions to integrate the plugin ckeditor5.
I want to integrate ckeditor 5 and I added js / editor.ckeditor5.js
and below the JS code of your page, https://editor.datatables.net/plug-ins/field-type/editor.ckeditor5
My field
{
"label": "Descripcion:",
"name": "trabajos.descripcion",
"type": "ckeditorClassic"
},
But I have an Error,
editor.ckeditor5.js:93 Uncaught TypeError: Cannot read property 'create' of undefined
Can you help me?
↧
Cannot edit fixed columns
We are using DataTable with Fixed Columns, Scroller, Editor and KeyTable with inline editing and using server-side rendering.
We are having an issue with being unable to edit any of the fixed columns (there are 6). When clicking into a fixed column cell, the orange editor outline appears but there is no cursor and cannot be typed into. If I click on the same cell again, it seems that sometimes I am editing the table underneath. We also have validation rules on these cells, and error message will sometimes cause the fixed columns and the table underneath to be misaligned.
Please let me know what is the best way to engage support for this issue. I tried re-creating our scenario on http://live.datatables.net/seweyepe/1/edit (this is in-work).
↧