While making my last post I happened across a few 404 links on the website, hopefully you don't mind these being reported here.
https://datatables.net/forums/categories/bug-reports/ (or from any categories forum URL)
Forum rules
No replies?
http://debug.datatables.net/
Manual
Download
Hey there! I have been struggling with getting the serverside DataTables ajax fetch to work like I want it to, and haven't found any documentation on this, so here goes;
I'm using the PHP SSP-class, and I'd like to get more than just the columns that are shown in the table. Fx., one of the (client-side) table columns is status, and the formatted data of this field depends on the value of 3 other columns from the (MySQL)table. the second argument passed to the formatter function in the server-side column setup is $rows, but this only returns the rows represented in dt values in the column-arrays. So, how would I go about getting more columns from the database, without showing them as a column in the HTML-table?
My second issue might just be me not understanding the complex function from the SSP-class, but (no matter what is searched, ordered by and so on), I need to have a standard WHERE statement. The statement is as follows;
printer_id IN (1,2,3,4,5) AND ((started != '0000-00-00 00:00:00' AND ended != '0000-00-00 00:00:00') OR printing = 1)
I have made a very poor attempt to modify the SSP-class, but I'm thinking this must be something that is achievable without modification (maybe?)
Thanks so much in advance!
Hey there! I have been struggling with getting the serverside DataTables ajax fetch to work like I want it to, and haven't found any documentation on this, so here goes;
I'm using the PHP SSP-class, and I'd like to get more than just the columns that are shown in the table. Fx., one of the (client-side) table columns is status, and the formatted data of this field depends on the value of 3 other columns from the (MySQL)table. the second argument passed to the formatter function in the server-side column setup is $rows, but this only returns the rows represented in dt values in the column-arrays. So, how would I go about getting more columns from the database, without showing them as a column in the HTML-table?
My second issue might just be me not understanding the complex function from the SSP-class, but (no matter what is searched, ordered by and so on), I need to have a standard WHERE statement. The statement is as follows;
printer_id IN (1,2,3,4,5) AND ((started != '0000-00-00 00:00:00' AND ended != '0000-00-00 00:00:00') OR printing = 1)
I have made a very poor attempt to modify the SSP-class, but I'm thinking this must be something that is achievable without modification (maybe?)
Thanks so much in advance!
I use drawCallback to set the scroll position of the child table.
"drawCallback": function (settings){
$('div.dataTables_scrollBody').scrollTop(TOP);
},
But it doesn't work. Can you look at my code?
I succeeded in getting the scroll position, and I set the scroll position in CreateChild
However, the scroll position is not applied.
Parent table settings
$(document).ready(function () {
$("a").button();
var devEditor = new $.fn.dataTable.Editor({
//skip
});
var childRows = null;
var devTable = $("#deviceTable").DataTable({
//skip
"initComplete": function () {
setInterval(function () {
childRows = devTable.rows($('.shown'));
scrollTop = {};
let childrow = $('div.dataTables_scrollBody');
$.each(childrow, function (index, v) {
let id = v.childNodes[0].id;
let top = $($(v)).scrollTop();
scrollTop[id] = top;
});
devTable.ajax.reload(null, false);
//Server Request Code skip
}, 3000);
}
});
$('#deviceTable tbody').on('click', 'td.fileName', function () {
var tr = $(this).closest('tr');
var row = devTable.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
destroyChild(row);
tr.removeClass('shown');
tr.removeClass('highlightExpanded');
}
else {
// Open this row
createChild(row, devTable.row(this).data().SN);
tr.addClass('shown');
tr.addClass('highlightExpanded');
}
});
devTable.on('draw', function () {
if (childRows) {
//let rows = childRows;
let rows = Object.assign({}, childRows);
// Reset childRows so loop is not executed each draw
childRows = null;
rows.every(function (rowIdx, tableLoop, rowLoop) {
var row = this;
let top = 0;
createChild(row, devTable.row(this).data().SN);
this.nodes().to$().addClass('shown');
});
}
});
});
child table settings
var scrollTop = [];
function createChild(row, id) {
// This is the table we'll convert into a DataTable
let ID = "child-" + id;
var table = $('<table class="display" width="100%" id="{0}"/>'.format(ID));
// Display it the child row
row.child(table).show();
var rowdata = row.data().detail;
let TOP = scrollTop[ID];
// Initialise as a DataTable
var fileTable = table.DataTable({
//skip
"drawCallback": function (settings) {
//console.log('scroll ' + top);
//$('div.dataTables_scrollBody').scrollTop(TOP);
}
});
}
function destroyChild(row) {
var table = $("table", row.child());
table.detach();
table.DataTable().clear();
// And then hide the row
row.child.hide();
}
I am building a web app with firestore as its database. Currently, I am retrieving all documents from a collection then injecting those documents into a datatable using an array. The problem is, only one document is shown and the collection has 10 documents within it. What could be the problem? Below is the code:
html:
<table class="table table-striped table-bordered" style="width:fit-content; " id="mydatatable">
<thead>
<tr>
<th scope="col">Document id</th>
<th scope="col">title</th>
<th scope="col">details</th>
<th scope="col">timestamp</th>
<th scope="col">name</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Document id</th>
<th scope="col">title</th>
<th scope="col">details</th>
<th scope="col">timestamp</th>
<th scope="col">name</th>
</tr>
</tfoot>
</table>
javascript:
db.collection("Emergency_Feeds").orderBy("timestamp","desc").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
var documentId = doc.id;
var username = doc.data().name;
var emTitle = doc.data().title;
var emDets = doc.data().details;
var emTimeDate = doc.data().timestamp.toDate();
tableData =[
[
documentId,
emTitle,
emDets,
emTimeDate,
username
]
]
console.log('Data:'+tableData);
$('#mydatatable').DataTable( {
retrieve: true,
data:tableData
} );
});
});
Has anyone used Firebase Cloud Storage with Datatables? I am having quite a time trying to figure out how to use Storage with the column render option.
It would be possible for Editor users to have a complete example to use select2 instead of select especially in edit?.
Using select2 instead of edit without modifying php works perfectly but in the edit mode does not preserve the value of the field...
Field::inst( 'clienti.cli_naz' )
->options( Options::inst()
->table( 'nazioni' )
->value( 'naz_cod' )
->label( ['naz_nome','naz_cod'] )
->render( function ( $row ) {
return $row['naz_nome'].' ('.$row['naz_cod'].')';
} )
->order( 'naz_nome ASC' )
)
{
label: "Nazione",
name: "clienti.cli_naz",
type: "select2",
opts: {
// placeholder: "",
allowClear: false,
initialValue: true,
},
// type: "select",
// def: "IT",
// placeholderDisabled: true
},
Thank you,
Giuseppe
Hi,
i would like to check in CreatedRow if a rendered field is negative number or not so that i color red the font or the cell background.
How to refer to the data:null field ?
eg.
if(data.field1 > 0 ) { // works if field1 was not rendered
$(row).find('td:eq(11)').css('color', 'green');
}
Good afternoon (o;
As my project already uses autocomplete from jqueryui I give it a go as well with the editor..
But I am stuck what to exactly return from the ajax call.
Got this framework I've found here:
label: "Artikelnummer",
name: "Artikelnummer",
type : "autoComplete",
minLength: 2,
opts: {
source: function (query, result) {
$.ajax( {
url: '/inc/get.products.php',
dataType: 'json',
success: function ( data ) {
result ( $.map( data, function (item) {
console.log(data.data);
return {
label: data.data.number, << no clue yet (o;
value: data.data.number << no clue yet (o;
};
}
)
)
}
});
}
}
The PHP code just returns an array with all products availabe, and the editor autocomplete should fill then two fields automatically when selected...
So my simple question..what exactly do I have to return in the ajax call to autocomplete so it displays the product list matching they typed input?
I'm not that JS guru (o;
thanks in advace
richard
I'm new to DataTables, I've been working with him for just over a week, but I've learned a lot, the tool is amazing!
I'm creating an Editor screen of invoice that has a code field with the client, but this field needs validation in the onblur event to check when the code is typed if the client exists, if it exists, load the name below in a read-only field, if not, show an error saying that the customer does not exist.
I haven't found any documentation related to this, does this type of function not exist?
Sorry for my bad English
Editor::inst($db, **tablename**)
->pkey('ID')
->fields(
Field::inst('ID'),
Field::inst('ORGANIZATION_ID'),
Field::inst('BARCODE'),
Field::inst('ITEM_NO'),
Field::inst('DESCRIPTION'),
Field::inst('ONHAND_QTY'),
Field::inst('ONHAND_UOM'),
Field::inst('ACTUAL_QTY'),
Field::inst('ACTUAL_UOM'),
Field::inst('REMARK')
)
->where('ACTUAL_QTY',null,'<>')
->where(**Field::inst('ACTUAL_QTY')**, **Field::inst('ONHAND_QTY')**,'<')
->debug(true)
->process($_POST)
->json();
I followed this to a tee and still don't get the icon to appear. I did modify the code a bit to fit my program but i get a child row to appear and disappear but no icon in the column
https://datatables.net/examples/api/row_details.html
I see in the CSS it has a path to the icon but I didn't download any icons I just used the CDN, is this the issue? Even with one downloaded and placed in my CSS it doesn't appear.
Hello! I recently started studying DataTables. Stopped with dependent fields. I looked at a lot of examples and still a lot is unclear.
There is a classic example:
https://datatables.net/blog/2017-09-01
It is often pointed at. And it is important for me to understand.
It would be nice to decipher it a bit:
1. I don't understand: how many tables are there in the Database? As far as I understand 4:
Table 1- for filling in
Table 2 - " Continents»
Table 3 - " Countries»
Table 4 – " id_Сontinent-id_ Country»
2. I really want to see the "JavaScript" code
3. editor.dependent ('continent', '/ api/countries' );
the Second argument «/ api/countries» what is it?
4. Do I understand correctly that in this example there are actually two Server script (PHP files)? I'd like to see both.
I'm sorry, I'm still at the beginner level and I need your help.
Hi I want to do sum of some column of my table the code is note working.
Please help me to find out what is wrong in my code.
this is example link
here is my js
<script type="text/javascript">
$(document).ready( function () {
// Setup - add a text input to each footer cell
$('#ContentPlaceHolder1_GridView1 thead tr').clone(true).appendTo( '#ContentPlaceHolder1_GridView1 thead' );
$('#ContentPlaceHolder1_GridView1 thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );
var table = $('#ContentPlaceHolder1_GridView1').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
title: '',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '10pt' )
.prepend( document.getElementById('ContentPlaceHolder1_lblCompanyNameHeader').innerText +
'<div>Freight Contract Register </div><img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
);
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', 'inherit' );
}
},
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
"paging": false,
"orderCellsTop": true,
});
var sum = $('#ContentPlaceHolder1_GridView1').DataTable().column(12).data().sum();
$($('#ContentPlaceHolder1_lblError')).html(sum);
$('#ContentPlaceHolder1_GridView1').DataTable({
drawCallback: function () {
var api = this.api();
$(api.table().footer()).html(
api.column(12, { page: 'current' }).data().sum()
);
}
});
});
</script>
thanks
Apologies for the long question; this is half "how do I get this to work," and half "do I even want this to work?"
I have a case where this is happening:
My first thought was that I wanted to display a more helpful error message ("Dude, you need to change your fiber intake" or whatever). However, it turns out that things are actually a little more complicated than that: some of my Editor fields use dependent to rebuild option lists when their values change (e.g., if you're trying to assign Necrobutcher a role in a black metal band, and you choose Mayhem as the band, I fetch Mayhem's list of available roles, which will have Lead Keytar filtered out on the server side), and those ajax calls are getting 302s (followed by 200s as the browser--or jQuery?--succesfully requests the login page from the redirect, and then my code croaks when it gets the HTML login page instead of the JSON list of roles).
So, in some cases, life may be bad before they hit submit, so wanting to handle the 302 in Editor's "submit" ajax call may be fundamentally misguided. How are other people handling this sort of thing?
If it turns out that the "submit" ajax call is the right place to handle the 302, I see this question which gives an example of handling an error by calling alert() and then notifying Editor, and I see the ajax documentation explaining how to use a function instead of an object, but I'm having trouble getting it working.
Here's what I've got currently, before making any changes.
// this guy is in a file which is shared by all my DataTables pages
var editorAjax = function( url ) {
return {
'url': url,
contentType: 'application/json',
data: function ( d ) {
return JSON.stringify( d );
}
};
};
// this is how I'm calling that in my various tables/pages
editor = new $.fn.dataTable.Editor( {
ajax: editorAjax( '/my/nifty/api' ),
table: '#my_nifty_table',
...
Adding an error element to that object returned by my editorAjax() function looks like this:
var editorAjax = function( url ) {
return {
'url': url,
contentType: 'application/json',
data: function ( d ) {
return JSON.stringify( d );
},
error: function ( xhr, jqAjaxerror, thrown ) {
if ( xhr.status == 302 ) {
// call error() on my editor instance, once I get my
// hands on it? (It doesn't exist at this point;
// editorAjax() is called on the way in to the Editor
// constructor.)
}
// what else do I need to do in here?
}
};
};
The main problem here is that this doesn't actually get called with the 302! It looks like, under the covers, the browser is following the redirect & fetching the login page, and then this gets hit with the jQuery JSON.parse error when it tries to parse the login page HTML as JSON. (And at that point, xhr.status is 200, because the second HTTP request succeeded!)
Returning a function instead of an object behaves the same, and looks like this:
var editorAjax = function( url ) {
return function ( ignoredMethod, ignoredURL, data, success, error ) {
$.ajax( {
type: 'POST',
url: url,
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json',
success: function ( json ) {
success( json );
},
error: function ( xhr, jqAjaxError, thrown ) {
// we don't get xhr.status == 302 in here...
error( xhr, jqAjaxError, thrown );
}
} );
};
};
So, if (IF!) handling the session timeout here is the right thing to do... how do I do it? And if not, how should I handle it?
I'm trying to understand if I can sort a table with a column that contains ratios throughout it. I notice that when it attempts to sort, it'll sort numerically (1-9) ignoring the numbers as hundreds or thousands (1,000 versus 900).
For example:
| Column A | Column B | Column C |
|---|---|---|
| Example 1 | $10,000,000 | 1,500:1 |
I have some custom header-level elements that have behavior that I would like to maintain on the fixed header. Does anyone know if the created fixed position table has any reference to the dataTable it originated from? I haven't noticed anything that consistently ties it to the table that created it, so far. Just want to make sure there isn't anything out-of-box that I'm missing before I create my own solution. Thanks in advance!
DataTable version: 1.10.20
Hi, i know how to create header and footer (page header and page footer) that repeated on every page
But, i want to know how to create report footer that will visible on the last page after table ?
I need to place name and signature, etc on that report footer
Hi, I used the Movil function for dynamic columns, thanks Movil works great !!!
https://github.com/martinberlin/datatables-dynamic-columns
now I would like to add a last column that makes me the sum of the row, I remind you that I don't know how many columns there will be and not even the name of them the only thing I know that I can position it as column n ° 5
you have an example of how to add the column and put the sum of the row ???
Thanks