Hi,
i have the following question:
I would like to add a file to the file selection manually like i can do with other values, something like this:
editor.val( 'name', 'Testname' ]);
editor.val( 'files[].id', [{'id':'newFile.jpg'}]);
Means: I would like to add the picture via API like i would have choosen the "choose file" button.
Questions: What´s the correct format for the JSON ?
I have tried a lot but can´t get it to work 
Does anybody have an idea ?
Thanks and Kind Regards, Christoph
Hi, I am trying to calculate age from 2 fields using editor dependent. I want to enter date of birth and date of death in editor and have the age field populated. I am using moment.js and I have no problem doing this in the table once the data is submitted but I want to see it in editor after the date fields are populated (before submitting). I'm using standard date type fields.
Could it be that the format of the date in the field (once populated) is not correct for working out time between dates? At this stage I am only trying to calculate the seconds between the dates.
Any help would be appreciated.
editor1.dependent( [ 'importtest.DeceasedDateOfBirth', 'importtest.DeceasedDateOfDeathExact' ], function ( val, data, callback ) {
if(editor1.field('importtest.DeceasedDateOfBirth').val() != '' &&
editor1.field('importtest.DeceasedDateOfDeathExact').val() != '')
{
var dateofbirth = editor1.field('importtest.DeceasedDateOfBirth').val().getTime()/1000;
var dateofdeathexact = editor1.field('importtest.DeceasedDateOfDeathExact').val().getTime()/1000;
var age = (dateofdeathexact - dateofbirth);
editor1.field('importtest.DeceasedAge').val(age);
}
} );
Hi
I'm trying to implement this ex. https://datatables.net/examples/advanced_init/footer_callback but can't exactly see what the html should be for my table. Here's the table I have:
<table id="tblDataTable1" class="table table-bordered table-striped table-hover" style="width:100%">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>ContactType</th>
<th>ContactID</th>
<th>Type</th>
<th>Reference</th>
<th>PaymentMethod</th>
<th>Date</th>
<th>Notes</th>
<th>Representative</th>
<th>Paid</th>
<th>AttachedFile</th>
<th>NetAmount</th>
<th>Tax</th>
<th>GrossAmount</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>
</table>
The data displays fine but if I add the footer I get a fuzzy footer, it does not appear under the table and the sum does not show:
Here's my footer js code which I have in the DT's structure:
footerCallback: function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
dblNetTotal = api
.column(12)
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column(12).footer() ).html(
dblNetTotal
);
},
Thanks.
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
i've implemented an bootstrap switch for input type checkbox, meanwhile im using an join data from 2 table...
With the inline editing, for the datatable where there is no join, its working perfectly but with the datatable that use join, with the inline editing it doesnt get the correct value of the checkbog but with the modal form editing it gets the value correctly...
I'm I have a datatable with 1,500 rows. I have paging set and I'm displaying 50 records per page.
I the third element is the data is a checkbox. I'm trying to get the total count of checked checkboxes, but I'm unable to even return the total count of rows
// Find indexes of rows which have checked in the second column
var indexes = dt.rows().eq(0).filter(function (rowIdx) {
return dt.cell(rowIdx, 2).data().indexOf("checked='checked'")>1 ? true : false;
});
//I'll call this function like this
var count = dt.rows(indexes).lengh;
//Unfortunately dt.rows isn't looking in all 1500 rows and only looks at the first 210
I'm trying to concatenate 2 values firstName and lastName as select box values to use in the inline editor.
The following code gives me the firstName and lastName as the label value but the line for the value is only giving me the firstName as the value.
Field::inst( 'transferdata.transferToCarer' )
->options( Options::inst()
->table( 'accounts' )
->value( 'firstName', 'lastName' )
->label( array('firstName', 'lastName'))
)
->validator( Validate::dbValues() ),
Can anyone help?
Thanks
Rod
in node.js use editor.where(),console display
(node:5452) UnhandledPromiseRejectionWarning: TypeError: The operator "undefined" is not permitted
I am having trouble understanding how to use data from two columns together for the footer. The examples given use something like this:
total_WAN = api
.column(1)
.data()
.reduce(function (total, num) {
return intVal(total) + intVal(num);
}, 0);
however, what I need to do is to sum (column(1)*column(2))
from what I see, the reduce function will only work with one column?
Description of problem:
My "select" event it populates multiple tables related to the select row using the ID of the selected record. I'm using server side processing and I only want to fire the deselect event to fire on an actual deselect. Is there a way to only fire the 'deselect' when the user has actually deselected a row not when the user selects a new record.
Here is my 'Select' event:
table.on('select', function (e) {
$('#sPrg').DataTable().draw();
$('#sPr').DataTable().draw();
$('#sTech').DataTable().draw();
$('#sTRp').DataTable().draw();
});
Here is my DeSelect event:
table.on('deselect', function () {
$('#sPrg').DataTable().draw();
$('#sPr').DataTable().draw();
$('#sTech').DataTable().draw();
$('#sTRp').DataTable().draw();
});
The problem is for every select event its making 2 ajax calls for each table because it executes the deselect then the select event. Ideally, i only want the deselect event to execute when the user is deselecting the selected record.
Hopefully that makes since.
Thanks
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I have a "parent" table that when a user selects a record I use the "parent.id" to populate and load nine other tables. I have it functioning but I want to minimize the ajax calls on the page to improve performance. The question i have is there a way to instantiate the 9 "child" tables to be empty without making an ajax call when the page loads. Only when a user selects a record i do i want the table to "draw" using the "Parent.Id" to display the appropriate data.
What I'm picturing is a table definition like this for the child table(s) on document ready and parent deselect.
$('#childTable').DataTable()
$('#parentTable').DataTable().on('deselect', function (e, dt, type, cell, originalEvent) {
$('#childTable').DataTable()
});
Then on parent select do something like this.
$('#parentTable').DataTable().on('select', function (e, dt, type, cell, originalEvent) {
childT = $('#childTable').DataTable({
dom: 't',
ajax: {
url: relativePath + "/api/childtable",
type: 'POST',
cache: false,
"data": function (d) {
if ($('#parentTable').length && $('#parentTable').DataTable().row({ selected: true }).data() != null) {
d.PARENT_ID= $('#parentTable').DataTable().row({ selected: true }).data().PARENT.ID;
}
else
// Set to -1 to return no data if no selected record or no data in parent
d.PARENT_ID= "-1";
}
},
//processing: true,
serverSide: true,
idSrc: "CHILD.ID",
columns: [
{ data: "child.ID" },
{ data: "child.PARENT_ID" },
{ data: "child.S_CODE" },
{ data: "child.S_CAGE_CD" },
{ data: "child.S_STATUS" },
{ data: "child.S_EXPORT_COUNTRY" },
{ data: "child.S_ADDR1" },
{ data: "child.S_ADDR2", },
{ data: "child.S_CITY" },
{ data: "child.S_STATE_PROV" },
{ data: "child.S_STATE_PROV_CD" },
{ data: "child.S_COUNTRY" },
{ data: "child.S_POSTAL_CD" }
],
sScrollX: true,
scrollCollapse: true,
fixedHeader: true
});
});
This way we are doing no ajax calls when all i want is an empty table if no parent record is selected. Will this work or is there a better way to do this?
I have an administration form for managing comments. To act on a comment the admin should first read the comment. In order to properly read it I have ckeditorClassic type enabled, otherwise it will be a challenge because of all the html markup.
The administrator should not be able to edit the comment, only approve/disapprove. Both 'readonly' and 'ckeditorClassic' share text type thus they are mutually incompatible.
In another thread I found attr and tried it:
{
label: 'Comment',
name: 'blog_comments.comment',
type: 'textarea',
type: 'ckeditorClassic',
attr:{ disabled:true },
},
Does attr not work in this instance or do I have the formatting wrong?
Here is the link to the test case. http://live.datatables.net/qawihawi/1/edit
I only loaded 1000 rows of data and the table has only a handful of fields. Imagine it's a wider table or the number of rows is 10 times...
We were using self created paging buttons so we turned off the paging from dataTables. The scroller works great except it takes a while to create the table and we can't really do deffered render.
Is there any suggestion on how to render the page faster? Are there insufficiencies that can be eliminated? Or is this the best we would get? Thanks!
Hi, I am using DT 1.9 Editor in ASP.NET MVC5 but I am struggling to get a simple example Datatable working but I can't see why.
I have a DB table with the following fields
id, alarm_id, device_id, start_date, end_date
I then have the following model class with properties that match the table fields
public class Alarm
{
public int id { get; set; }
public int alarm_id { get; set; }
public int device_id { get; set; }
public string start_date { get; set; }
public string end_date { get; set; }
}
This is my controller method to pass data to the view
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
[ValidateAntiForgeryToken()]
public ActionResult Data()
{
var formData = HttpContext.Request.Form;
using (var db = new Database("mysql", _dbFactory.CreateConnection(ConnectionDatabase.CS)))
{
var editor = new Editor(db, "alarms", "id")
.Model<Alarm>("Alarm")
.Field(new Field("Alarm.alarm_id"))
.Field(new Field("Alarm.device_id"))
.Field(new Field("Alarm.start_date")
.GetFormatter(Format.DateSqlToFormat(Format.DATE_ISO_8601))
.SetFormatter(Format.DateFormatToSql(Format.DATE_ISO_8601)));
var response = editor.Process(formData).Data();
return Json(response, JsonRequestBehavior.AllowGet);
}
}
Then I have the following function in jQuery in my View
var editor;
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
"ajax": {
"url": "@Url.Action("Data", "AIR", new { boid = 1 })",
"type": "POST",
"data": function (d) {
d.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
}
},
table: "#airtable",
fields: [{ label: "Alarm ID",
name: "alarm_id" }]
});
alert('Doing Table');
$('#airtable').DataTable({
"ajax": {
"url": "@Url.Action("Data", "AIR", new { boid = 1 })",
"type": "POST",
"data": function (d) {
d.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
}
},
dom: "Bfrtip",
serverSide: true,
columns: [{ data: "alarm_id" }],
select: true,
buttons: [ { extend: "edit", editor: editor },
{ extend: "remove", editor: editor } ]
});
});
On the page I can see the buttons but I get the following error
DataTables warning: table id=airtable - Unknown field: alarm_id (index 0)
Can someone please point me in the right direction ? Many thanks.
Description of problem:
Normally when you wish to access/edit files/pages you select your form which loads datatables table view and then you either do a search or scroll through the list to find the page you wish to edit.
Let's say that we have a cause why we might want to shorten the hop and click a link which loads the the table and opens the popup editor directly with that file.
In administration in your main admin menu (accesses DTE and any/all admin forms) you want to set up a dropdown list with the last 5 modified pages. It might look something like:
<li><a href='webpages.php'>Webpages (the DTE table view)</a></li>
<li><a href='webpages.php?id=999'>About page</a></li>
<li><a href='webpages.php?id=888>Mission page</a></li>
<li><a href='webpages.php?id=777'>FAQ</a></li>
<li><a href='webpages.php?id=666>Home</a></li>
<li><a href='webpages.php?id=555'>BIO</a></li>
If you click on Webpages it will open the traditional table view. If you click on About it would (somehow) skip to open DTE popup editor with the ID for the About page.
Simpler for the admin, one hop less. How would you set this up?
Hi,
I tried the trial version and everything worked great. Then I bought a license and installed the licensed version. Now I get a json error message without the database being touched or changed:
"DataTables warning: table id = example - JSON encoding error: Malformed UTF-8 characters, possibly incorrectly encoded"
Any idea what to do?
Thanks for your help
Thomas
Good afternoon everyone,
I have a problem filling a table from invalid json. In the forum I have found a link that describes the steps to detect the error: https://datatables.net/manual/tech-notes/1
The JSON Lint tool confirms that the Json format is not valid, the problem is that I don't know how to make it so.
I leave the link to the table: http://agenda.javierlasen.es/favorito
Thanks
Hi,
I appreciate your time to help me with this issue.
I am using the data table editor for the asp.net framework. I have it applied on grid view that receives data from SQL.
It rendered beautifully except when there is no data, the whole page crashes
I tried adding <EmptyDataTemplate>There is no packagings data to browse!</EmptyDataTemplate> in the grdivew but it does not work
Once again, thank you for reading my post
Let's say that you're building some sort of problem tree. You provide the administrator with a select option:
If he/she selects animals the editor form reveals options related to Animals:
Vegetables:
Minerals
Is this possible with DTE? If yes can you point me to an example?
Hi, I have a question regarding the datatables editor
How can I make a row read only if a condition is met
For example if one of the fields had value 3 I want the whole row to be readonly
I am desperate. I need to perform AJAX jQuery CRUD using DataTables. I use PHP PDO MySQL. There is so much 'disinformation' on the web that I'm confused. Sorry...just being truthful. I know PHP PDO and use a single PHP connection no OOP functions. I follow PDO delusions methods for secure PHP PDO. I do not want to sacrifice security for simplicity...but simplicity is the issue. I can easily render the DataTable hooking it to PHP PDO, but I can't understand the 'success' syntax for rendering the table using AJAX jQuery, Inserting, updating, and deleting. What is being posted on the Web does not make sense, is too obtuse, and mixes up the various methods into an nFactorial of soup. Am I the only one who experiences this 'miasma'? I do not use a framework...just simple PHP PDO and my own CSS.This should not matter...DataTables and jQuery should be independant of frameworks. Thank you.