I have used custom select options drop-down with custom label & value.
Below is the code for that.
var userClasses = [
{
"label": "Administrator",
"value": "admin"
},{
"label": "Contact",
"value": "contact"
},{
"label": "Readonly",
"value": "readonly"
}
];
I have also attached the gif to understand.
just for information: I have used text-transform: capitalize to make the first letter capital.
Hi guys anybody tell me what it is i just paid the 8 pound odd for was it the forum or am i able to use scripts? I'm looking for a database with i can use for a non profit website. I'm looking for a script i can use i had set one up but needed the name field to be hidden so that only admin can see that but all other fields name hidden age male/female, location, and also a text field users can put extra information in. the only field the user can edit is the text field everything else would have to be admin.
Can anybody point me in the right direction or tell me where i could get this done with a free generater that won't expire
i must have paid for the forum use then
Hi guys, I am using DataTable Server-Side processing, and I am having problems when data should draw on data table.
this is my init .
$(document).ready( function () {
var tableNomina = $("#tabla-nomina").DataTable({
processing: true,
serverSide: true,
ajax: {
url: "rest/search",
contentType: "application/json",
type: "POST",
data: function ( d ) {
var currentPage = 1;
if(tableNomina != null){
var info = tableNomina.page.info();
currentPage = info.page;
console.log('currentPage: ' + info.page);
}
var postData = '{';
postData += '"nomina": "",';
postData += '"usuario": "",';
postData += '"fecha": "",';
postData += '"monto": "",';
postData += '"conceptoNid": -1,';
postData += '"origenNid": -1,';
postData += '"estadoNid": -1,';
postData += '"orderBy": "dfecnomina",';
postData += '"orderType": "ASC",';
postData += '"paginaActual": ' + currentPage + ',';
postData += '"registrosTotales": 1,';
postData += '"registrosFiltrados": 1';
postData += '}';
return postData;
},
dataSrc: 'data',
dataFilter: function(data){
console.log(data);
return data;
},error: function(error) {
console.log(error);
}
}
,"columns": [
{ data: 'nidnomina' },
{ data: 'sidarchivo' },
{ data: 'sestado' },
{ data: 'sidusuarionomina' },
{ data: 'dfecnomina' },
{ data: 'nmontototalpagado' },
{ data: 'sconcepto' },
{ data: 'sidorigen' },
{ data: 'nidnomina' }
]
});
} );
When I get data from first and last page, this is OK, but when I get data from intermediate pages is the problem, data not render correcty.
My json returned from server is correctly valid, and containts the same struct from all requests,
Thanks
Hello Friends,
Please, I have big trouble with async stateLoadCallback.
When I use this call the script in section $(document).ready(function () stop correct work.
I mean this code for call
"stateLoadCallback" : function(settings, callback){
$.ajax({
url: 'helpari/db_state_load.php?listId=' + $('input[id=listId]').val()
, dataType: 'json'
, success: function (json) {
console.log(json);
callback(json);
}
, error: function () {
callback(null);
beginner = 1;
console.log("Not completed Load stateCallback")
}
});
},
And here is the code which is prepared in $(document).ready(function () section
$(document).ready(function () {
var DataTableBody = $('#dataTable tbody');
console.log(DataTableBody);
$('.leftmenutrigger').on('click', function (e) {
$('.side-nav').toggleClass("open");
e.preventDefault();
});
// prepare PDF view
DataTableBody.on('click', '#PDFMaker', function (){
var rsp, pathT;
var data = oTable.row($(this).parents('tr')).data();
var XMLFile = data['msg_link'];
var myData = "filename=" + XMLFile;
// Volame PDF maker
$.ajax({
type: "GET",
url: "helpari/show_pdf_new.php",
dataType: "text",
data: myData,
success: function (response) {
// alert(response);
rsp = response.split(":");
pathT = "helpari/" + rsp[1] + ".pdf";
opendialog(pathT, "PDF náhled");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
}
});
});
So, but If I user the SYNC call as you can see in the another code, all works Okay, but in the Console I see the error message about synchonized XMLHttpRequest, that it is OLD in the main thread.
"stateLoadCallback" : function(settings, callback){
var o;
$.ajax({
url: 'helpari/db_state_load.php?listId=' + $('input[id=listId]').val()
, dataType: 'json'
, async: false
, success: function (json) {
o = json;
}
, error: function () {
callback(null);
beginner = 1;
console.log("Nepovedl se Load stateCallback")
}
});
return o;
},
Please, Where is the problem?
Why doesn't it work correctly with asynchronous call of the loadStateCallback?
Thanks a lot for help
Honza H
Hi guys,
I'm trying to transition my DT to SSP, and it's working great! However, I'm running into a few problems with parts of the code, because I used to rely on the data being fully loaded at the start.
My search function is posted below and collects data from a form (input and select). It executes after user action.
What happened with pure JS is that columns would be searched as loaded. With SSP it's a whole different thing.
My server-side code uses PHP and is copied from your example here.
What am I doing wrong?
var searchIt = function () {
var searchUrl = ($('.form-control').val()).replace(/ /g,"+");
var searchKey = $('.form-control').val();
var selectedCategory = $('#gosearch').text();
table.columns().search("").draw();)
if (searchKey.length > 0) {
if(selectedCategory == "General") { // Detect keyword search
table.search(searchKey).draw();
window.history.pushState({page:""}, document.title, "?=" + searchUrl);
}
else if (selectedCategory == "Author") { // Detect authors search
table.columns(1).search(searchKey).draw();
window.history.pushState({page: ""}, document.title, "?aut=" + searchUrl);
}
else if(selectedCategory == "Publication") { // Detect periodical search
table.columns([6,7]).search(searchKey).draw();
window.history.pushState({page: ""}, document.title, "?pub=" + searchUrl);
}
else if(selectedCategory == "Keyword") { // Detect keyword search
table.columns(4).search(searchKey).draw();
window.history.pushState({page: ""}, document.title, "?tag=" + searchUrl);
}
$('.alert').animate({top: "1em"});
$('.alert').delay(500).animate({top: "-10em"});
}
else { // Detect empty search
table.columns().search("").draw();
window.history.pushState({page: ""}, document.title, "/");
}
}
I have initialized the table with data. The export excel is working fine. If i make any changes to the table column manually through jquery. The changes are not exporting in excel. It exports the old unmodified data.
How to export excel report with changes after it got initialized.
Pls help me out. Thanks in advance
i am using datatable which uses server side pagination on table scroll. So It loads the data as an when I scroll down the table. I want to send api call to the service when i reach the 100th records, next 200 th record and 300th record , so on.
How to set that limit as 100 ?
I tried iDisplyLimit : 50.
But not working.
Thanks in advance
Can we change cell border color to white or remove cell borders?
If so, can you pls provide me a code for it
I'm moving to server-side processing. Usually I'd merge JSON fields with javascript after the file was loaded. I can still do that in SSP, but it breaks up search, since search works in the original fields, and not the actual data in the columns.
To give you an example, I have a column for authors. When there is no author, the output is an editor. When searching, I want to search for people (author/editor), but SSP will only search for one of the two. My solution would be an array merged before the json output, printed to a hidden column, which would be searched.
Can it be done? This is my php file, copied from your SSP example.
$columns = array(
array( 'db' => 'Author', 'dt' => 'authors'),
array( 'db' => 'Editor', 'dt' => 'editor'),
array( 'db' => 'Item Type', 'dt' => 'type'),
array( 'db' => 'Publication Year', 'dt' => 'year' ),
array( 'db' => 'Title', 'dt' => 'title' ),
array( 'db' => 'Publication Title', 'dt' => 'pubtitle' ),
array( 'db' => 'Publisher', 'dt' => 'publisher' ),
array( 'db' => 'Url', 'dt' => 'url'),
array( 'db' => 'DOI', 'dt' => 'doi' ),
array( 'db' => 'Title', 'dt' => 'title' ),
array( 'db' => 'Reviewed Author', 'dt' => 'reviewed' ),
array( 'db' => 'Abstract Note', 'dt' => 'abstract' ),
array( 'db' => 'ISBN', 'dt' => 'isbn' ),
array( 'db' => 'Tags', 'dt' => 'tags'),
array( 'db' => 'Place', 'dt' => 'place' ),
array( 'db' => 'Type', 'dt' => 'genre' ),
array( 'db' => 'Publisher', 'dt' => 'publisher' ),
array( 'db' => 'Pages', 'dt' => 'pages' ),
array( 'db' => 'Volume', 'dt' => 'volume' ),
array( 'db' => 'Issue', 'dt' => 'issue')
);require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns)
);
I'm building an HTML table via Javascript DOM, then initializing it with datatables, including hooking the click event to track the number of selected rows. Works as expected. When I want to refresh the data though, something happens to the click handler. The handler runs, the rows visually select / deselect, but the count of selected rows returns zero. I experimented with a number different concepts for initializing the datatable (i.e., avoiding a second initialization entirely, and using "destroy" or "retrieve"), but neither resolved the issue. Can someone point me in the right direction?
live.datatables.net/yaganalo/1/edit
(Show the console, click some rows, click the "refresh" button, then click rows again.)
How do I get the classnames of those cells that was selected during autofill?
$('#TestTable').DataTable().on( 'autoFill', function ( e, datatable, cells ) {
var x = table.cells('.PublicHoliday');
alert(cells[0].className);
alert( (cells.length * cells[0].length)+' cells were updated' );
} );
HI All,
I'm currently working with an application that uses DataTables with the following settings:
"iDisplayLength": 50,
"bDestroy": true,
"bJQueryUI": false,
"bLengthChange": false,
"bServerSide": false,
"bPaginate": false,
"sPaginationType": "full_numbers",
"bSort": false,
"bFilter": true,
"bdeferrender":true,
"processing": true,
"bDraw": true,
"bScrollCollapse": true,
scrollX:true,
"bInfo":false,
fixedHeader: true,
fixedColumns: {
leftColumns: 1
},
The dataTable attached into an iFrame with SideBar Panel, when iFrame resize after clicking the Sidebar, the fixedColumn loses it function. However, when I tried to type anything in search field the fixedColumn work again.
It seems fixedColumn loses it function when resizing the screen.
Any ideas about this,is much highly appreciated.
https://datatables.net/manual/data/orthogonal-data
This page says it should pass data with "@data-order" but it seems not working for me.
<table id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td data-order="1">First</td>
<td>3</td>
</tr>
<tr>
<td>Doe</td>
<td data-order="0">Second</td>
<td>4</td>
</tr>
</tbody>
</table>
$(document).ready( function () {
var table = $('#dataTable').DataTable();
table.clear();
table.row.add({"0": "John", "1":{"display":"First2", "@data-order":"1"}, "2": "3"})
table.row.add({"0": "Doe", "1":{"display":"Second2", "@data-order":"0"}, "2": "4"})
table.draw();
} );
Fiddle: https://jsfiddle.net/zLp89m3j/1/
How to fix it?
In inline Editor, I managed to use autocomplete. It shows suggestion when keys are entered. My user would like to press on TAB and also click out of the cell, to submit the top suggestion (1st row autocomplete). Even if he entered e.g "A" and sugguestion shows "Apple, Ape, etc", Apple will be autofilled and submitted into database.
I have found autocomplete with autofocus solutions but could not make it work with Datatables.
Something like this for AutoComplete:
https://codepen.io/anon/pen/rVJyRO
http://api.jqueryui.com/autocomplete/#option-autoFocus
What syntax should I use?
Hello,
I am interested in finding a service where I can input stock prices and options prices into a table for sorting. Has anyone seen that kind of service before?
Hi!
Suppose I input a value in column 1, I want to auto change the value of another cell in column 2 (same row), what is the syntax I should use in "????" ?
table.abc.js:
$( editor.field( 'columnA' ).input() ).on( 'keyup', function (e, d) {
if ( ! d || ! d.editor ) {
if ( ???? ) {
editor.field( 'status' ).val( "Open");
}else {
editor.field( 'status' ).val( "Closed");
}
}
Please help!
I am using jquery and bootstrap 4.1. I have generated a table, that is sortable and searchable using the datatables plugin. I want to make each row clickable and I picked up a solution form stackoverflow that makes this work beautifully but only for the first 49 rows of the table whether or not the table has been resorted - (i.e. you click a column heading to resort the table, it still doesnt make the last row clickable)
Here's the code for a typical table row:
<tr class="clickable-tr" href="/index.cfm?pid=111601&pgm=201851">
<td>201851</td>
<td>21/Dec/2018</td>
<td>Carolina Blue / I Hear Bluegrass Calling Me / Pinecastle</td>
</tr>
(the link is valid but i'm not sure if that would make a difference at this page)
Here's the CSS for the clickable-tr class:
<style>
.clickable-tr{
cursor: pointer;
}
</style>
and here's my jquery to enable the datatables plugin and the clickable row:
$(document).ready(function() {
$('#results').DataTable( {
"pageLength": 50
} );
$('.clickable-tr').on('click', function(){
var myLink = $(this).attr('href');
window.open(myLink);
});
} );
The only aspect of this whole thing that is connected with row 49 is that is the last row before the pagination takes you to page 2 but I can't see where I've missed something.
Can anyone else?
( Thanks in advance )
Mike Kear Windsor NSW, Australia
Hi All!
I am working with datatable server-side processing. My database table contains "id" of another table as a foreign key, which I use to get "name" column for datatable.
But I am unable to filter based on "name" column.
As "name" column corresponds to "id" column in target table.
How can I do this...
Main problem is that the search value to be posted is about "name" but target database table contains "id" for these "name".
Hello,
When having the control for the details view put in a separate column, the rendering is slightly shifted to the top (see screenshot).
The example shown here has this issue:
https://datatables.net/extensions/responsive/examples/child-rows/column-control.html
To fix this, I overrode the "top" properties of the "control" class and set it to auto:
table.dataTable.dtr-column > tbody > tr > td.control::before,
table.dataTable.dtr-column > tbody > tr > th.control::before {
top: auto;
}
The change has been tested in IE 11, Firefox and Chrome.
From your experience, do you think this change is globally safe? If not, any idea on how to fix this issue?
Thanks for your help.
Dear all,
In Editor last version, in Editor/Format.php, beware if using dateFormatToSql with a format not including all date and time information: the function date_create_from_format is using the current time for missing data. It can create data inconsistencies.
For further versions, Allan, I suggest you add "!" in the following, as explained in http://php.net/manual/fr/datetime.createfromformat.php :
$date = date_create_from_format('!'.$format, $val);
Regards,
Gilles Boussin
