i am facing one issue with jquery datatable
that is ,
i am displaying the data which is submitted by one form,
form is in popup
when i submitting pop is getting close
so immediately that data is not getting displayed in data table.
i am using LIST to get data from database
and iterating list to display in datatable.
can any one help me to sort out this problem.
Thanks in advance.
I am trying to reload the table but I can't seem to find the way to call the reload function.
In the .done function of the 'revoke' event is where I'm trying to call it $(document).on("click", '.revoke', function (event).
Here is how I'm calling it but fails: $('#example').data.reload(); or table.reload(); or table.ajax.reload();
Any ideas?
<script>
$(document).ready(function () {
var thedata = GetPermissions();
var table = $('#example').DataTable({
data: jQuery.parseJSON(thedata),
columns: [
{ data: 'Professional' },
{ data: 'Patient' },
{
data: "View",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Edit",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Insert",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Delete",
render: function (data, type, row) {
if (data === true) {
return '<input type="checkbox" checked disabled>';
}
return '<input type="checkbox" disabled>';
}
},
{
data: "Revoke",
render: function (data, type, row) {
return '<input type="button" class="btn btn-danger btn-xs revoke" data-pro="' + row.ProfessionalID + '" data-pat="' + row.PatientID + '" name="revoke" value="Revoke">';
}
}
]
});
$(document).on("click", '.revoke', function (event) {
var sf = $.ServicesFramework(<%=ModuleId %>);
var serviceUrl = sf.getServiceRoot('omnibody');
var revoke = { 'ProfessionalID': $(this).data('pro'), 'PatientID': $(this).data('pat') };
$.ajax({
type: "POST",
cache: false,
url: serviceUrl + "/ModuleTask/RevokeAccessRights",
beforeSend: sf.setModuleHeaders,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(revoke)
}).done(function (result) {
//PROBLEM IS HERE
// $('#example').data.reload();
table.reload();
}).fail(function (xhr, result, status) {
alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
});
});
});
function GetPermissions() {
var sf = $.ServicesFramework(<%=ModuleId %>);
var serviceUrl = sf.getServiceRoot('omnibody');
var jdata;
$.ajax({
type: "GET",
cache: false,
async: false,
url: serviceUrl + "/ModuleTask/GetAccessRightsPivoted",
beforeSend: sf.setModuleHeaders,
contentType: "application/json; charset=utf-8"
}).done(function (result) {
jdata = result;
return jdata;
}).fail(function (xhr, result, status) {
alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
});
return jdata;
}
</script>
It works fine on live.datatables but it does not workout in the development environment (too many fields are used), though i used numeral.js script
reference:
here is my code:
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api();
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\MB,KB,GB,TB,]/g, '')*1 :
typeof i === 'number' ?
numeral(i).value() : i;
};
// Total over all pages
total = api
.column( 3 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 3, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
total = numeral(total).format('0.0a');
pageTotal = numeral(pageTotal).format('0.0a');
$( api.column( 3 ).footer() ).html(
'--'+pageTotal +' ( --'+ total +' total)'
);
}
Please let me know where did i go wrong?
Thanks
Koka
If a field has an error, and the user changes that field to fix the error, then the errormessage is still shown. This is fixable for example with a dependency on each field, which does an editor.field(xxx).error(''). It's a lot of extra code if you have to define this for each field. Is there an easier way to do this? If not, then maybe an option for this can be addad in a future version?
Hi -
I am trying to get the examples running for a Firebird database. I have managed to get it to connect to the database, I edited the staff.php file to include fields relevant to my situaiton, but it just throws an sql exception complaining reporting..
** "error code = -206 Column unknown id At line 1, column 1.."**
I cant see a reference to a field called "id" in staff.php or my html markup that calls the php file. Quite honestly, I find the whole system of related PhP files objects very confusing. Although the "manual" mentions that there is an Editor->where function but only a snippet of code that shows how to use it (still not sure where to call or configure this method.)
This is my version of the "staff.php" file
<?php
/*
* Example PHP implementation used for the index.html example
*/
// DataTables PHP library
include( "../lib/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'INVOICE' )
->fields(
Field::inst( 'TRANSID' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'TRANSID REQUIRED' )
) ),
Field::inst( 'CUSTNAME' )
->validator( Validate::notEmpty( ValidateOptions::inst()
->message( 'A name is required' )
) ),
Field::inst( 'TRANSDATE' )
->validator( Validate::dateFormat( 'Y-m-d' ) )
->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
)
->process( $_POST )
->json();
I have edited the calling html file with the same fields defined for the datatabe object.
Any hints or idea as to why the "id" field error is being thrown would be much appreciated.
Thanks
Dave.
With JavaScript I would like to retrieve the data from a column where the data of another column meets a specified criteria. In the example below I am trying to retrieve the data of column A where column B us 'True'. Now I am still retrieving all the data of column A, like the search on column B is not being applied. Your help is much appreciated.
Hello,
I have an editor that's displayed on the page using the onPageDisplay function. Some of the fields are select2 objects using ajax as data source.
When the form is shown, I see 2 initialValue requests for each of the select2 fields ("http://localhost:53686/Registraties/getOptions/TYB?initialValue=true&value=%22%22"). Is this to be expected?
(Sorry, but I can't make this accessible online to debug...)
The form is shown as follows:
editor
.buttons({
label: "Save",
fn: function () { this.submit(); }
})
.create(1, true, {
focus: null
});
Example of a select2-field definition:
{
"label": "type behandeling",
"name": "TYB",
"type": "select2",
"opts": {
placeholder: '...',
ajax: {
dataType: "json",
url: '/Registraties/getOptions/TYB',
data: function (params) {
return {
productid: ProductID
};
},
processResults: function (data) {
return {
results: data
};
},
}
}
}
When placing a select dropdown in a cell for inline editing the row height changes when the user activates the cell for editing.
This issue can be seen in the standard example at
https://editor.datatables.net/examples/inline-editing/join.html
when selecting the last column (location) the row height changes slightly -
With the bootstrap theme this issue becomes much more pronounced
Is there a way to change the padding of the cell to 0px when the select is opened and set it back to the original value once the selects is closed ?
Hi all,
I'm going through the Editor examples and trying to figure out how the "one-to-many join" works. I have removed the options "permission[].id" in the server script and replaced them with options in the JavaScript. So my Server script and my AJAX Load look like this:
Server script:
$(document).ready(function () {
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: "/api/users",
table: "#example",
fields: [{
label: "First name:",
name: "users.first_name"
},
{
label: "Last name:",
name: "users.last_name"
},
{
label: "Site:",
name: "users.site",
type: "select"
},
{
label: "Permissions:",
name: "?",
type: "checkbox",
options: [{
name: "Mainframe",
id: 7
},
{
name: "Laptop",
id: 8
}
],
optionsPair: {
label: 'name',
value: 'id'
}
}
]
});
table = $("#example").DataTable({
dom: "Bfrtip",
ajax: {
url: "/api/users",
type: "POST"
},
columns: [{
data: "users.first_name"
},
{
data: "users.last_name"
},
{
data: "users.city"
},
{
data: "sites.name"
},
{
data: "permissions",
render: "[, ].name"
}
],
select: true,
buttons: [{
extend: "create",
editor: editor
},
{
extend: "edit",
editor: editor
},
{
extend: "remove",
editor: editor
}
]
});
});
});
AJAX Load (excerpt):
{
"DT_RowId": "row_27",
"users": {
"first_name": "Ifeoma",
"last_name": "Mays",
"city": "Parkersburg",
"site": 3
},
"sites": {
"name": "Paris"
},
"permissions": []
},
{
"DT_RowId": "row_28",
"users": {
"first_name": "Basia",
"last_name": "Harrell",
"city": "Cody",
"site": 4
},
"sites": {
"name": "New York"
},
"permissions": [
{
"id": 6,
"name": "Accounts"
},
{
"id": 3,
"name": "Desktop"
},
{
"id": 1,
"name": "Printer"
},
{
"id": 2,
"name": "Servers"
},
{
"id": 4,
"name": "VMs"
},
{
"id": 5,
"name": "Web-site"
}
]
},
name: "permissions[].id" like in the example there is no error but nothing happens. Why it doesn't work in my case?name in the JavaScript name: "users.first_name", name: "users.last_name" and name: "users.site" are the same. But looking at the server script where does name: "permissions[].id" come from?If I want to get the options from a AJAX call, then I suppose I should use this:
editor.on( 'initEdit', function ( e, node, data, items, type ) {
$.getJSON( '/myURL', data, function ( json ) {
editor.field('myField').update( json );
} );
} );
In this case the AJAX load should be just an array of objects, the option options should be removed and the option optionsPair should be left like it is now?
Hi
what about scroller extensions togheter with responsive. The scroller seems not to adjust its measure on responsive dsplay when the scrollCollapse option is set to true.
Is it the standard behavior? Or should the scroller change on responsive opening and closing?
Thanks
Monica
Hi,
I am facing issues of page Length is server side data table. it returns 36 recordsTotal and makes pagination page numbers perfect but it displays all records of 36 on the first page of pagination.
I have two pages having data tables, one is working fine and other is having this issue of pagelength but code is same for both.
i have tried to fix it but could not solve it.
,paging: true
,pageLength : 10
Thanks in advance if you could help me.
I tried to use the DataTables-Editor-Server DLL that came from the generator which gives me the missing method exception. I also made a new project and tried the DLL from nuget but it has the same result. I am using framework 4.6 and tried it with 4.5 as well.
I'm using datatables on a node.js application. (https://editor.datatables.net/manual/nodejs/). All works fine.
Now I want to test the editor api with postman. Here I don't get back a response back. What am I missing?
If I send a POST to a route http://127.0.0.1:2001/v1/abc which normally runs the script ... and in 'Body' 'raw' & 'JSON(application/json)' of postman I'm sending this JSON ..
{
"draw": "1",
"columns": [{
"data": "name",
"name": "",
"searchable": "true",
"orderable": "true",
"search": {
"value": "",
"regex": "false"
}
}{
"data": "country",
"name": "",
"searchable": "true",
"orderable": "true",
"search": {
"value": "",
"regex": "false"
}
}, {
"data": "",
"name": "",
"searchable": "false",
"orderable": "false",
"search": {
"value": "",
"regex": "false"
}
}],
"order": [{
"column": "1",
"dir": "desc"
}],
"start": "0",
"length": "25",
"search": {
"value": "",
"regex": "false"
}
}
I would expect getting a response ... but getting a infinite ...loading ..
I have a datatable i loaded with records, i want to be able to click on a row button, the row button to display a modal dialog, populate the modal fields with corresponding row values using Ajax object.
Hi there,
Has one of you already experience with the following situation?
I would like to save a value with a checkbox in two different DB tables, e.g.
1. DB table bookings -> value status = "new" or "canceled"
2. DB table rooms -> value storno = 0 or 1
I can save in table rooms the value storno = 0 or 1 with the following code but
how can I additionally store the value status = "new" or "canceled" in the bookings table?
JS
var editor; // use a global for the submit and return data rendering in the examples
(function($) {
$(document).ready(function() {
editor = new $.fn.dataTable.Editor({
ajax: '/php/table.bookings_test.php',
table: '#bookings_test',
fields: [
{
label: "Storno:",
name: "rooms.ca_storno",
type: "checkbox",
separator: "|",
options: [
{ label: '', value: 1 }
]
}]
});
var table = $('#bookings_test').DataTable({
ajax: '/php/table.bookings_test.php',
Processing: true,
ServerSide: true,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "alle"]],
"pageLength": 20,
columns: [
{
data: "rooms.ca_storno",
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input type="checkbox" class="storno">';
}
return data;
},
className: "dt-body-center"
}
],
rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.storno', row).prop( 'checked', data.rooms.ca_storno == 1 );
},
responsive: true,
columnDefs: [
{ type: 'date-eu', targets: 0 },
{ type: 'date-eu', targets: 10 }
]
});
$('#bookings_test').on( 'change', 'input.storno', function () {
editor
.edit( $(this).closest('tr'), false )
.set( 'rooms.ca_storno', $(this).prop( 'checked' ) ? 1 : 0 )
.submit();
} );
});
}(jQuery));
PHP
// DataTables PHP library and database connection
include( "lib/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
Editor::inst( $db, 'rooms', 'uid' )
->field(
Field::inst( 'rooms.ca_storno' )
->setFormatter( function ( $val, $data, $opts ) {
return ! $val ? 0 : 1;
} )
)
->process($_POST)
->json();
BR
Column sorting isn't working past column 2, I even tried deleting the column just in case the % sign was throwing it off.
<table id="sortthisbitch" width="100%">
<thead>
<tr>
<th class="all"><strong> Pool</strong></th>
<th class="all"><strong> Algo</strong></th>
<th class="desktop"><strong> Pool Fee</strong></th>
<th class="all"><strong> Active Miners</strong></th>
<!--<th><strong> Symbol</strong></th>-->
<th class="all"><strong> Workers</strong></th>
<th class="all"><strong> Pool Hashrate</strong></th>
<th class="desktop"><strong> Network Hashrate</strong></th>
<th class="desktop"><strong> % of Network Hash</strong></th>
<th class="desktop"><strong> Total Blocks Found</strong></th>
<th class="desktop"><strong> Difficulty</strong></th>
<th class="all"><strong> Block Height</strong></th>
<th class="all"><strong> Effort</strong></th>
<!--<th><strong> Price (USD)</strong></th>-->
<th class="all"><strong> </strong></th>
</tr>
</thead>
<tbody>
<tr>
<td width="100px"><img src="/images/smallcoin/arms.png" width="20px" height="20px"> 2ACoin</td>
<td><strong>Aeon v7</strong></td>
<td><strong><span id="arms_configcnFee">...</span></strong></td>
<td><strong><span id="arms_poolMiners">...</span></strong></td>
<!--<td><strong>IRD</strong></td>-->
<td><strong><span id="arms_poolWorkers">...</span></strong></td>
<td><strong><span id="arms_poolHashrate">...</span></strong></td>
<td><strong><span id="arms_networkHashrate">...</span></strong></td>
<td><strong><span id="arms_hashPower">...</span></strong></td>
<td><strong><span id="arms_poolBlocks">...</span></strong></td>
<td><strong><span id="arms_poolDifficulty">...</span></strong></td>
<td><strong><span id="arms_poolBlockheight">...</span></strong></td>
<td><strong><span id="arms_hasheffort">...</span></strong></td>
<!--<td><strong><span id="iridiumPriceUSD">...</span></strong></td>-->
<td><a href="https://arms.codpool.com"><div class="btn btn-success">Start Mining</div></a></td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('#sortthisbitch').DataTable( {
responsive: {
breakpoints: [
{name: 'bigdesktop', width: Infinity},
{name: 'meddesktop', width: 1480},
{name: 'smalldesktop', width: 1280},
{name: 'medium', width: 1188},
{name: 'tabletl', width: 1024},
{name: 'btwtabllandp', width: 848},
{name: 'tabletp', width: 768},
{name: 'mobilel', width: 480},
{name: 'mobilep', width: 320}
],
columnDefs: [
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 2, targets: -1 }
]
},
//"responsive": false,
"paging": false,
"aoColumnDefs": [{'bSortable': false, 'aTargets': [ -1 ]}],
"orderCellsTop": true
} );
} );
I want to regex validate some input fields with editor node.js. Is this possible? For instance is this example working?
new Field("name")
.validator((val, data, host) => {
if(val === null){
return true;
} else {
return val.match("/^[a-zA-Z ]+$/")
? 'Not valid!'
: true;
}
})
Enclosing certain statements that load or initialize the DataTable. I have for example a setTimeOut that refreshes it every 30 seconds with ajax.reload.
But it is a component that has to launch this error and it would be good to publish how to avoid these errors and get the best performance. Because it uses many resources to achieve desired functionalities
Hi,
I see lots of good examples on customizing excel export, such as here.
But none of them seem to tell me the syntax if I want to change the cell color (using the built-in styles), for a specific cell - e.g. A4, M5, N10, etc.
Is there a way to do this?
I usually use editor.dependent() to get a value from a list box:
// JS file
...
{
label: "Provincia",
name: "contatti.cont_prov",
type: "select"
},
{
label: "Località",
name: "contatti.cont_loc",
type: "select"
},
{
label: "CAP",
name: "contatti.cont_cap",
type: "select"
},
...
clientiEditor.dependent( 'contatti.cont_prov', 'php/filtro_localita.php' );
clientiEditor.dependent( 'contatti.cont_loc', 'php/filtro_cap.php' );
...
// PHP file: filtro_localita.php
<?php
include( "DataTables.php" );
$comuni = $db
->select( 'comuni', ['com_nome as value','com_nome as label']
,['com_prov' => $_REQUEST['values']['contatti.cont_prov']] )
->fetchAll();
echo json_encode( [
'options' => [
'contatti.cont_loc' => $comuni
]
] );
// PHP file: filtro_cap.php
<?php
include( "DataTables.php" );
$cap = $db
->select( 'comuni', ['com_cap as value','com_cap as label']
,['com_nome' => $_REQUEST['values']['contatti.cont_loc']] )
->fetchAll();
echo json_encode( [
'options' => [
'contatti.cont_cap' => $cap
]
] );
?>
But how can I get a single value for the contatti.cont_cap field instead of a list box?
I tried to write:
// JS file
...
{
label: "Provincia",
name: "contatti.cont_prov",
type: "select"
},
{
label: "Località",
name: "contatti.cont_loc",
type: "select"
},
{
label: "CAP",
name: "contatti.cont_cap"
},
and I modified the file filtro_cap.php in this way:
<?php
include( "DataTables.php" );
$cap = $db
->select( 'comuni', ['com_cap']
,['com_nome' => $_REQUEST['values']['contatti.cont_loc']] )
->fetchAll();
echo json_encode( $cap );
?>
the php file returns (for example):
[{"com_cap":"92100"}]
but my field is: contatti.cont_cap...
how should i do?
Thanks for your help,
Giuseppe
