Good morning, in excel export customize for example I can get the value of the specific cell with the function:
$('is t', this).text();
Is it possible to get the value of the background colour (define with html tag in <td>) of a specific cell?
Thank you if you can help me
Tito
Hey Guys,
i have a little problem with the integration of the deepLink plugin into my existing table.
This is my original table
$(document).ready(function() {
var dataTable = $('#mytable').DataTable( {
"iDisplayLength": 30,
"pagingType": "full",
"ajax": "Database.txt",
} );
} );
Now my table looks like this.
$(document).ready( function () {
$('#mytable').DataTable( $.fn.dataTable.ext.deepLink( [
'search.search'
] )
);
});
So where do i have to place my settings, for example.
"iDisplayLength": 30, or
"pagingType": "full", or
"ajax": "Database.txt",
Does anyone know that ?
I know its a dumb question but i don't get it.
Thx Samu
Hi, I have created a button that creates a new row, without Editor appearing, and it works fine:
//Create Empty
new $.fn.dataTable.Buttons(table, [{
extend: "create",
text: "Create Empty Row",
action: function(e, dt, node, config) {
editor.create(false).submit();
}
}]);
table
.buttons().container().appendTo($('#createempty'));
How might I go about extending this so that I can create 5 blank rows with one button click? Can I create multiple actions with the above code?
I've been working on a couple of joined tables (recipe / ingredient), and so far I have a table that shows ingredients (editable using inline), and a table that shows recipes (editable with jqueryui editor). The goal is to make the editor jqueryui display a list of ingredients for the selected recipe, and be able to add/edit/delete entries.
What I've done is create a display controller that, in the "open" function, creates dom nodes so the result is a table within my recipe editor jqueryui. This new table is then initialized as it's own DataTable with it's own editor and ajax. Both the child editor and child table both use an ajax modify function so it sends the ID of the recipe in the ajax, so the PHP script can correctly join the recipe and ingredient tables and retrieves only ingredients for the specified recipe (the new DataTable does retrieve and display the correct data).
The problem I'm having is that it whenever I try to save changes to an ingredient amount (by selecting a recipe and editing the amount in the dynamically-created ingredient table), I get a JS error:
Uncaught TypeError: Cannot read property 'canReturnSubmit' of null
at HTMLDocument.<anonymous> (dataTables.editor.js:21)
at HTMLDocument.dispatch (jquery.js:5226)
at HTMLDocument.elemData.handle (jquery.js:4878)
The new values are saved, but the table does not update (until I manually have it reload values from DB) and the jqueryui of the editor does not go away (or if I set it to inline edit, it stays as an editable input, rather than reverting to a table value - same error occurs)
I would prefer not to post the website here, but I have attached the relevant code. If there appears to be anything missing, I'd be happy to provide it.
I have not provided the SQL for the tables or the PHP for the tables, but can if necessary. This looks like a JS problem to me though, so didn't see the need to include.
How to export multiple datatables in to multiple worksheets in single Excel workbook on single click using Datatable export buttons. Please help me.
I have a table where I am storing a value to copy in the last column.
I am using the column render to do this. My table contains special characters, and I am also using mark.js and diacritics-neutralize. The problem I am having is that somehow enabling the render option interferes with the diacritics neutralize and the filter doesn't match special characters. What am I doing wrong?
Here is my datatables code:
// Initialize DataTables
$('.datatables-table').DataTable({
// Enable mark.js search term highlighting
mark: true,
'columnDefs': [
{
'targets':[5],
'render': function(data, type, full, meta){
return '<button type="button" class="btn btn-light float-right copy-text" data-toggle="modal" data-full-path="' + full[5] + '">Copy</button>'
}
}]
});
I made a fiddle to show the issue here:
https://jsfiddle.net/Lfxap5nh/
Hi,
I want to filter the list in a combobox, from a datatable editor. When I use the where condition, I do not have any errors, but it does not return any records.
Editor::inst( $db, 'tb_diccionario' )
->field(
Field::inst( 'tb_diccionario.materia_id' )
->options( Options::inst()
->table( 'tb_materia' )
->value( 'id' )
->label( 'materia' )
->where( 'tb_materia.activo', 1 )
),
Field::inst( 'tb_materia.materia' ),
->leftJoin( 'tb_materia', 'tb_materia.id', '=', 'tb_diccionario.materia_id' )
*Activo es un campo de la tabla materia de tipo tinyint.
I believe I am missing something, probably the mapping of data is all out of wack. However the pdf export works fine but when I do "copy,csv ,export to excell" the data shows the number of rows but the data is not there but the header seems to come out fine.
jQuery.fn.DataTable.Api.register('buttons.exportData()', function (options) {
if (this.context.length) {
var jsonResult = $.ajax({
type: "POST",
//datatype: "html5",
url: "/Home/GetData/?CheckDate=' + $("#EventDates option:selected").val(),
success: function (result) {
},
async: false
});
var a = jsonResult.responseJSON;
return { body: jsonResult.responseJSON, header: $("#tblPayroll thead tr th").map(function () { return this.innerHTML; }).get() };
}
});
Hi,
I use DataTables.MVC5 and at binding it throws this error:
System.ArgumentNullException: The value of the search cannot be null. If there's no search performed, provide an empty string. Parameter name: value
Can you help me, please?
Hi @allan and other community members,
Request your help in this.
Functional Requirement
I have an php based editor implementation for a table called "Travel Expense". There are two buttons "Advance Request" and "Submit" each of it is connected to its own editor instance. Now i have a separate table called "Remarks" whenever the user click's "Advance Request" or the "Submit" button I insert a record in to the "Remarks" to record the history of the transaction as shown below.
Action: Advance Paid Submitted on: 2019-01-03T17:20 User: kamal.e
Action: Approval Request Submitted on: 2019-01-03T17:21 User: kamal.e
Technical Implementation
I have a Datatable connected to PHP ajax
Two Editor instance for each button as show below
if (submiteditor == null)
{
submiteditor = new $.fn.dataTable.Editor( {
serverSide: true,
ajax: {
url: "../../php/cud/travelapprovalcud.php",
type: "POST",
data: function(d){
d.userid = "<?php echo $loginid; ?>";
d.status = $("#reportstatus").val();
d.showdraft = true;
}
},
table: "#travelexpenserecordentrytable",
fields: [
{
label: "Expense ID",
name: "travelexpenserecord.teid",
type: "readonly"
},
{
label: "Status",
name: "travelexpenserecord.status",
type: "readonly"
},
]
});
}
if (adveditor == null)
{
adveditor = new $.fn.dataTable.Editor( {
serverSide: true,
ajax: {
url: "../../php/cud/travelapprovalcud.php",
type: "POST",
data: function(d){
d.userid = "<?php echo $loginid; ?>";
d.status = $("#reportstatus").val();
d.showdraft = true;
}
},
table: "#travelexpenserecordentrytable",
fields: [
{
label: "Expense ID",
name: "travelexpenserecord.teid",
type: "readonly"
},
{
label: "Status",
name: "travelexpenserecord.status",
type: "readonly"
},
{
label: "Advance Required",
name: "travelexpenserecord.advreq"
}
]
});
}
In order to achieve insertion of remarks entry I use the submitSuccess function as show below,
adveditor
.on('submitSuccess', function(e, json, data, action, xhr){
e.preventDefault();
console.log("Advance");
console.log(json);
console.log(data);
console.log(action);
var dtx = json.data[0];
managebuttons(dtx);
insertremarks(dtx, "Advance Request");
});
submiteditor
.on('submitSuccess', function(e, json, data, action, xhr){
e.preventDefault();
console.log("submit");
console.log(json);
console.log(data);
console.log(action);
var dtx = json.data[0];
managebuttons(dtx);
insertremarks(dtx, "Approval Request");
});
I also have listeners for "initEdit", "presubmit", "open". When the user clicks the button "Submit" or "Advance" the events are called multiple times because of which the "Remarks" entry are made multiple times instead of just one time. Similar the event "Open" is also called multiple times. The number of time it gets called is unpredictable sometime 3 or 4 or 1.
You can check the entire code and sample implementation here.
https://accounts.inphase.in/pages/tvl/tvldup.php
Why is this happening or where am i going wrong ?
Thanks in advance for your help.
hello,
I'm trying to insert a detail table in DataTables, but datatables alert me with this message, every time i reload the webpage
DataTables warning: table id=dataTables-smp - Requested unknown parameter '1' for row 3. For more information about this error, please see http://datatables.net/tn/4
and i don't think there's something wrong with the table result. the table still load the data completely.
oya, i also try to ignore the warning message using
$.fn.dataTable.ext.errMode = 'none';
but it not working properly in sorting, filtering, column visibility
Thanks
Hi All,
I wanted to insert a "Heading column" when the editor window is opened. This changes based on the context, if a new record is created no heading is displayed where as if a existing record is edited it displays some text. I have used the below code
editor.on('open', function(e,json,data){
console.log('open');
console.log(json);
console.log(data);
console.trace();
if (data == 'edit')
{
var html = "<center><div id=\"headingtext\" class=\"alert alert-success\">Approve for payment</div></center>";
$('div.DTE_Form_Content').prepend( html );
}
});
This method is invoked twice so the prepended html appear twice. Please see the picture below. If i see the stack trace it is invoked from the same handler twice.
I have a similar code in similar html page but there it is only invoked once. I'm using the following header files
<!-- Required datatable js -->
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>
<!-- Buttons -->
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
<script src="../../assets_uplon/plugins/datatables/jszip.min.js"></script>
<script src="../../assets_uplon/plugins/datatables/pdfmake.min.js"></script>
<script src="../../assets_uplon/plugins/datatables/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
<!-- Key Tables -->
<script src="https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js"></script>
<!-- Responsive -->
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>
<!-- Selection table -->
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<!--datatables-editor ext -->
<script src="../../php/Editor181/lib//js/dataTables.editor.min.js"></script>
<script src="../../php/Editor181/lib//js/editor.bootstrap4.min.js"></script>
I use the DataTables download page to add the packages I require for my project and then use the 'Download' tab at the bottom to receive the files to put in my project. I put the full DataTable folder that's been extracted into my project /libraries/ folder. Upon looking into the folder I received it does not include the licence agreement file for MIT which (unless my understanding is wrong) I need to include in my project as per the licence?
Maybe the line about keeping the copyright agreement on https://datatables.net/license/ is enough? I just thought you had to include the actual licence file directly in your project?
Also after looking at the licencing page I'm pretty sure it means I can use it in a commercial proejct (I want to sell something which uses datatables) but just wanted to treble check this is the case.
if (e.keyCode == 40){ //arrow down
table.$('tr.selected').removeClass('selected');
tr.next().addClass('selected');
tr = table.$('tr.selected');
}
if (e.keyCode == 38){ //arrow up
table.$('tr.selected').removeClass('selected');
tr.prev().addClass('selected');
tr = table.$('tr.selected');
}
data = table.row('tr.selected').data();
While exporting to excel,PDF(more than 10000), always the browser is getting hanged and export is not working.
DataTable version is 1.10.18
Button version is 1.3.3
Hello!
I've been trying to use the datatables scroller to load data dynamically as the scrolling happens. The only problem I'm having is with triggering the ajax to fire again. It doesn't call the ajax in an appropriate position in the table. The same problem occurs in the 50k example on this website.
I've been able to get it to fire by manually setting a height between 25 and 50 viewport height. Here's my initialization:
DOM:
`<table id="permissionsTableList" class="hbs-grid hbs-list" style=" width:98%;height: 25vh !important">
<thead>
</thead>
<tbody></tbody>
</table>
`
Datatables initialization:
$('#permissionsTableList').dataTable({
destroy: reinit,
"bScrollInfinite": true,
"bScrollCollapse": true,
"order": [0, 'asc'],
"deferRender": true,
"scrollY": "50vh",
"serverSide": true,
"scroller": {
loadingIndicator: true,
},
"ajax": function (data, callback, settings) {
$.ajax({
type: "GET",
url: "URL?handler=GetData",
data: { start: data.start, length: 50 },
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
success: function (d) {
setTimeout(function () {
callback({
draw: data.draw,
data: d,
recordsTotal: @Model.Data.Count(),
recordsFiltered: @Model.Data.Count(),
});
}, 50)
}
})
},
Any help figuring out this problem is apprfiated.
There appears to be an issue with scrollCollapse enabled that causes the number of rows to be loaded initially to be less than expected.
This appears to be a similar issue to the one described here: https://datatables.net/forums/discussion/31165/problem-with-initial-display-when-using-scroller-with-serverside-scrollcollapse
The following is a test case that reproduces the issue using the nightly builds: http://live.datatables.net/qopijexe/1
This appears to happen in both Firefox and IE11. For Chrome, this issue only occurs if the viewport is sufficiently small. About half the width of the table should work.
This has been tested on Chrome, Firefox, and IE11 in both CentOS 7 and Windows 7.
Using DataTables 1.10+ and cannot access any API functions.
It always returns with .... is not a function
So I have my datatable, which I initialize with a local and empty dataset
So far so good.
Now I want to change the data by calling the API through
datatable.clear();
datatable.rows.add(newDataArray);
datatable.draw();
However, not matter what function I try to call with booked_events_datatable.clear(); for instance, it always throws js error:
I even check if the my datatable object is really availabe before calling clear()
result:
Is it an issue that the table id is the same value than my table js var
Should'nt be, right? So what else is the issue here?
I spent hours and could not find the cause for this weird problem.
Please help.
Hi
I'm a new DataTables user - testing basic functionality on local machine (Netbeans)but getting the following error:
TypeError: cannot read property 'aDataSort' of undefined...
Could anyone point me in the right direction?
<html>
<head>
<title>DATA TABLES - TEST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CUSTOM HEADER DEF AND LINKS -->
<link rel="shortcut icon" href="#">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script> $(document).ready( function ()
{
$('#tableA').DataTable();
}
);
</script>
</head>
<body>
<div>HANZI - RADICALS</div>
<table id="tableA" class="display">
<table style="width:100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
<td>Row 1 Data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Trying to find a specific example of a connection to a MySQL view (or just a table) as the source for a DataTable report.
Thanks