Hi there 
I wanna get the title of this code :
<span class="tooltip" title="Avec projet(s)"><svg class="svg-inline--fa fa-lg fa-fw"><use xlink:href="#fa-avec-projet"></use></svg></span>
To include in this :
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
}
How I can write after .unique() or .sort() ? (yes my code is in the row of the column).
Because at this time, all this span is included.
Thank you
Below is how I initialize the table. The table renders correctly with a hyperlink to the document but it loads a bit slow. I have around 4000 records and it takes around 3 secs. I want to add other columns to the table which I need to customize by render function as the below one. When I do that the render time increases to about 10 secsn which is not acceptable
I have a listener on rowCreated but it does not log anything. What am I doing wrong?
$('#listDocuments').DataTable({
"ajax" : {
'url' :'/WAS/admin/getDocumentsList',
'type' : 'GET',
'dataSrc':''
},
"destroy" : true,
"deferRender": true,
"autoWidth" : false,
"columns": [
{
'data': 'documentName',
'defaultContent': 'documentName',
'render': function (data, type, row, meta) {
return generateHyperLink(row.documentName, row.documentLink);
}
}]
});
Hi,
I would like to search in French without accent, by example I could find "été" with searching "ete" or "été" or "éte"
It is possible with datatables ?
Thank you
Today is 2018/3/28.
Unfortunatelymet this bug happend again with the thymeleaf(which is strongly recomended by springboot)。
Thymeleaf has a strict rule about html which makes it can't parse the syntax like order: [[0,'desc'],[1,'asc']]。
So，I spilt the order option in more parts like below:
var myOrder = [];
myOrder[0] = [0,"desc"];
myOrder[1] = [1,"desc"];
$("#example").DataTable({
colReorder: true,
order: order,
initComplete: function () {
console.log("table complete！")
}
});
Finally, I made it and it works well.
Damn thymeleaf !
Just Hope you gus pay attention to this non-bug bug.
Hi All,
I've been trying to get my DataTable to load data using Ajax and I haven't been able to get the JSON loaded from my Django variable into the DataTable, despite validation that the JSON is correctly formatted. I had originally gotten the table running without Ajax, loading the data through django variable loops, but I want to implement Ajax to use data loading functionalities for large sets of data etc.
Here is the script / html:
<table id="test_table" class="display table table-striped table-bordered" border="1" cellspacing="0" width="100%">
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>Num.</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(document).ready(function() {
var json={{ test_data | safe }}
var data= json["data"]
var json2 = JSON.stringify(data)
window.alert(json2)
$('#test_table').DataTable({
"ajax": json2
} );
});
</script>
The JSON for json2 is the following:
[{
"first_name": "John",
"last_name": "Smith",
"number": "12345"
}, {
"first_name": "Alex",
"last_name": "Smith",
"number": "122345"
}, {
"first_name": "John",
"last_name": "Smith",
"number": "12345"
}, {
"first_name": "Alex",
"last_name": "Smith",
"number": "122345"
}]
Here is my view for the data:
def test_data(request):
test_all = TestData.objects.all().values('first_name', 'last_name', 'number')
test_all = json.dumps({"data": list(test_all)})
data = {'test_data': test_all,}
return render(request, 'test.html', data)
Might anyone be able to help here? I've tried implementing the dataTable with ajax using a few methods ("data" field and "column" values, etc.), but I always hit the blocker message DataTables warning: table id=test_table - Invalid JSON response and the dev tools don't give me a reason as to why the JSON didn't load. The ultimate goal is to be able to use server side processing (to enable deferLoading etc.)
Thank you so much!
Hi,
I'm a hobbiest programmer and just getting stuck using datatables to work when trying to load data through ajax with an "Uncaught SyntaxError: Unexpected token :" being returned. I can load the exact same data source from another destination and it works, so I'm not sure what's going wrong as only the source URL changes retrieves from.
Any assistance appreciated.
HTML
<div id="my-team-heading">My Team</div>
<table id="datatable-team" class="table">
</table>
Javascript
$(function () {
var teamtable = $('#datatable-team').DataTable( {
"ajax": {
url: "https://us-central1-adamfkltest.cloudfunctions.net/getTeamData",
dataType: "jsonp",
dataSrc: "values"
}
} );
} );
JSON
{
"range":"Sheet1!A1:AU36",
"majorDimension":"ROWS",
"values":[
[
"12 weeks",
"HAW",
"Grant Birchall",
"D",
"68.8",
"69",
"84",
"",
"",
"",
"",
"19",
"",
"",
"",
"",
"",
"",
"95",
"77",
"",
"",
"",
"",
"",
"",
"",
"",
"14",
"253",
"30",
"28/01/1988",
"193cm",
"89kg",
"Devonport",
"Defender",
"DEF",
"8"
]
]
}
I have been digging through the site trying to figure out a solution to my problem but have not been able to figure out which way to go.
I am using Datatables with editor and autofill and some other things like tabbing over. Everything works great.
The problem is that we are now adding hourly paid employees to our system where before we only used contractors.
With the hourly employees, we can't just add the lump sum that we pay as we used to do with contractors. It has to be done hourly. I have that part done where you can enter the hours, the rate and it calculates the pay. Where I am stuck is that we pay bi-weekly and we need to keep tabs on overtime.
I need to figure out how to base the hourly rate on the worker that is selected through an autofill that is set for the employee field and fill the hourly rate into the hourly rate field. It also needs to go fetch the right hourly rate based on if it is regular hours or overtime (this part shouldn't be that hard once I know how to fetch the data based on the employee).
Any help would be greatly appreciated.
Sven
i just wanted to do a simple task like selective export and it works properly, but as far as export all is concerned it takes only the data present at the client side. what i actually want is to export whole data using html5 excel export button can we achieve this(remember ii have done server side processing).
We have a DT column containing images and logos (using <img> tag).
Is it possible to include these images and logos as part of the PDF export? Or even as part of the "print" export?
We are using the colvis plugin and the exporter plugins for exporting to excel and PDF.
The exporter plugins do not respect the visibility/invisibility of columns into account and always export all columns.
Is it possible to configure the exporters to export only the visibile columns?
Hi, I am loading material data table in asp.net but getting this specific error : .dataTable is not a function
These are below files which i am including in my head section :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
I have tried every sequence and restart application and cache clearing etc. nothing worked also I have seen no other jquery been linked to page.
This error is there in console :
jquery.min.js:2 Uncaught TypeError: $(...).dataTable is not a function
at HTMLDocument.<anonymous> (test:321)
at l (jquery.min.js:2)
at c (jquery.min.js:2)
Any help would be appreciated thanks in advance.
P.S. : This same code is working perfectly fine in notepad++ but showing this error in vs studio 2015 with asp.net.
Is it possible to get the Editor to display a table as a custom field?
I've got this in the _fieldTypes.todo "create" function:
conf._input = $('<table id="'+Editor.safeId( conf.id )+'"><thead><tr><th>Id</th>'+'<th>Employee</th>'+'</tr></thead></table>');
And then I've got this in the _fieldTypes.todo "set" function:
$('#'+Editor.safeId(conf.id)).append("<tr><td>1</td><td>Thomas</td></tr>");
And yet only the table headers are displayed by the Editor, i.e. Id and Employee.
Any idea where I'm going wrong?
Thanks.
Hello,
I have a datatable created like below..
I am using select 1.2.3 plugin and I am able to select multiple rows.. but when I am trying to get the data of selected row
it only returns the first row data and not of all the rows..
receiptTable = $('#receiptModalTable').DataTable( {
dom: "RBt",
ajax: base_url + 'api/partyreceipt?' + $.param(_params),
idSrc: 'receipt_id',
select: {
style: 'multi'
},
autoWidth: false,
columns: [
{ data: "dispatch.parent_id" },
{ data: "receipt_id" },
{ data: "dispatch.dispatch_id"},
{ data: "receipt_date"},
{ data: "delivered_weight"},
],
buttons: [
{
text: 'Use Selected Receipts',
action: function ( e, dt, node, config) {
var data = receiptTable.row('.selected');
console.log(data);
//var receiptId = data['receipt_id'];
//editor.field('purchase_parent_id').val(receiptId);
//editor.field('dispatch.dispatch_id').val(data['dispatch']['dispatch_id']);
//$('#receiptModal').modal('hide');
}
}
]
});
There is no documentation related to getting data for all the rows..
Kindly help..
Is it possible to set a column header, if in the display view is a icon? The icon are not exported to the excel
Andreas
I managed to format the date in the date field to dd-mm-yyyy, when the user has entered his date. But it is not saved because I don't understand how to use setFormatter. The examples are not very clear (to me that is :-) )
this is what I have:
editor = new $.fn.dataTable.Editor( {
//ajax: {url: "php/table.deelneming_v2.php"},
ajax: {url: "data/deeln.txt"},
table: "#deelnTable",
idSrc: 'id',
fields: [ {
label: "relatienr:",
name: "client"
}, {
label: "naam:",
name: "naam"
}, {
label: "publicatie :",
name: "publdatum",
type: 'datetime',
/*
def: function () { return new Date(); },
format: 'DD-MM-YYYY',
fieldInfo: 'Verbose date format',
*/
opts: {
format: 'DD-MM-YYYY',
showWeekNumber: true
}
}, {
label: "dividend 2016:",
name: "div_2016"
}, {
label: "opgeofferd bedrag:",
name: "offer"
}, {
label: "verkrijgingsprijs:",
name: "verkrijgingprijs"
}, {
label: "goodwill:",
name: "goodwill"
}
],
i18n: {
create: {
button: "nieuw",
title: "deelneming toevoegen",
submit: "bewaar"
},
edit: {
button: "wijzigen",
title: "deelneming wijzigen",
submit: "bijwerken"
},
remove: {
button: "verwijder",
title: "verwijder deelneming",
submit: "bevestig",
confirm: {
_: "Weet u zeker om %d te verwijderen?",
1: "Deze regel 1 verwijderen?"
}
},
datetime: {
previous: 'vorige',
next: 'volgende',
months: [ 'Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December' ],
weekdays: [ 'zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat' ]
}
}
} ); //editor
and serverside:
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'deelnemingen' )
->fields(
Field::inst( 'client' )->validator( 'Validate::notEmpty' ),
Field::inst( 'naam' )->validator( 'Validate::notEmpty' ),
Field::inst( 'locatie' ),
Field::inst( 'offer' )
->validator( 'Validate::numeric' )
->setFormatter( 'Format::ifEmpty', null ),
Field::inst( 'verkrijgingprijs' )
->validator( 'Validate::numeric' )
->setFormatter( 'Format::ifEmpty', null ),
Field::inst( 'goodwill' )
->validator( 'Validate::numeric' )
->setFormatter( 'Format::ifEmpty', null ),
Field::inst( 'div_2016' )
->validator( 'Validate::numeric' ),
Field::inst( 'publdatum' )
//->setFormatter( 'Format::ifEmpty', null )
->validator( 'Validate::dateFormat', array(
"format" => Format::DATE_ISO_8601,
"message" => "Please enter a date in the format dd-mm-yyyy"
) )
->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 )
)
->process( $_POST )
->json();
Demo is available on http:\ficos.nl\test\index.html
The setFormatter function is not working for me: I guess DATE_ISO_8601 accepts yyyy-mm-dd only.
What am I doing wrongly?
"columns": [
{ "data": "Store", "name": "Store" },
{ "data": "Order", "name": "Order" },
{ "data": "Sku", "name": "Sku" },
{ "data": "Qty", "name": "Qty" },
{ "data": "OrderedDate", "name": "OrderedDate" },
{ "data": "TrackingInfo", "name": "TrackingInfo" },
{
"data":"OrderItemId" , "render" : function (data) {
return "<a href='#' class='btn btn-default' onclick='EditTrackInfo(" + data + ")'><span class='glyphicon glyphicon-edit'></span> Edit </a>";
},
I have a Datatable that has the option to edit/remove a row.
When i have edited a row, the modal from Datatables sends a request to my servlet(java) which looks like this:
action: edit
data[34][office]: qsdfqsd
data[34][username]: wqsdfqsdf
data[34][password]: QRSHy7
Now I want to get the values of this request which are:
id=34
office="qsdfqsd"
username="wqsdfqsdf"
password="wqsdfqsdf"
So I can put these values in the databank using java(Servlet).
Is there anyone who can help?
Kind Regards
Hello,
I have problem with editor plugin. I want to implement editor plugin as here: https://editor.datatables.net/examples/inline-editing/columns.html
But i am getting javascript errors like this:
popup.js:7 Uncaught TypeError: Cannot read property 'getSelected' of undefined
at popup.js:7
pace.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
jquery-1.12.4.js:9747 Uncaught ReferenceError: define is not defined
at eval (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1:5742)
at eval (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1:7850)
at eval (<anonymous>)
at jquery-1.12.4.js:349
at Function.globalEval (jquery-1.12.4.js:350)
at text script (jquery-1.12.4.js:10372)
at ajaxConvert (jquery-1.12.4.js:9332)
at done (jquery-1.12.4.js:9789)
at callback (jquery-1.12.4.js:10311)
at Object.send (jquery-1.12.4.js:10321)
my view file is like this:
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/datatables.editor/editor.dataTables.min.css" rel="stylesheet" type="text/css">
table id="example" class="display" cellspacing="0" width="100%">
thead>
tr>
th></th>
th>ID</th>
th>XXX</th>
/tr>
/thead>
/table>
script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js" type="text/javascript"></script>
script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js" type="text/javascript"></script>
script src="assets/js/plugins/datatables.editor/dataTables.editor.min.js" type="text/javascript"></script>
script src="assets/js/plugins/datatables.editor/custom.js" type="text/javascript"></script>
when i put first line alert("hello") into my custom.js file it doesn't work but when i put it to first line of dataTables.editor.min.js file, it works so i suppose the problem is inside the dataTables.editor.min.js file which i downloaded it from editors official site.
I looked for if i include multiple times of javascripts but everything seems correct.
I read a lot in the forums but did not find any solution.
Is there a way to solve this problem?
Im having issue, when i put Select * from data, datatables doesnt function anymore and it show all records 24k records...
what im missing?
Hi,
I have a history.vue file. In order to implement searchPane plugin from datatable I did the following:
I added the two files that are required:
//cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.css
//cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.js
Then at the place where DataTable is implemented
I changed the line from this.history_table = $('#history-table').DataTable(this.params.history);
to this.history_table = $('#history-table').DataTable( {data:this.params.history, searchPane:true} );
But, after this change my history table disappeared and I don't know how to proceed.
Please help.