I just have the curios issue that the draw event isn't allways fired when I reload my table.
Here is my table init:
mCommissionTable = $("#CommissionTable").dataTable({ "bJQueryUI": false, "sDom": 'lfrtip', "columns": [ { "data": "CommissionId" }, { "data": "Description" }, { "data": "CommissionTypeDisplayName" }, { "data": "DivisionCode" }, { "data": "EmployeeName" }, { "data": "EmployeeNumber" }, { "data": "PeriodFrom" }, { "data": "PeriodTill" }, { "data": "ApprovalStatusDisplayName" }, { "data": "StatusDisplayName" }, { "data": "Comment" } ] });
Here is my Refresh:
function onButtonClickA() { mCommissionTable.fnReloadAjax("GridCommunication.aspx?do=GetCommission" + mFilter, RefreshSelectedRows); }
Here is the RefreshSelectedRows:
function RefreshSelectedRows() { alert('fired!'); }
So everything works fine, table will not be loaded until I click the button the first time, everystime I click the button the table will be loaded. But in fact the callback (RefreshSelectedRows) is not fired every time.
In the DataTables.js code I found the __reload-method in which the API register the callback-event one time, Line 7140:
if (callback) {
var api = new _Api(settings);
api.one('draw', function () {
callback(api.ajax.json());
});
}
When I track it to that with Visual Studio and set breakpoint the Api,one-command will be hit with 100%, so it is registerred. The callback isself (what only happens when the event is fired) get hit randomly. I can't reproduce it. it just happened. I click 20 times on the button, 15 times it is okay, 5 times not...
I tried to track it down, but as far as I can see in the _fnReDraw method, where the fnDraw is called and the draw event in triggered everything is okay...
So... bug?
Any ideas?
Found the bug!
It was an old IE Version!
As soon as I started it with IE9+ it works like charm!
Related
I have a situation where I want to get the full (data) from the backend as a CSV file. I have already prepared the backend for that, but normally the front-end state => (filters) is not in contact with the backend unless I send a request, so I managed to solve the problem by mimicking the process of showing all data but by a custom button and a GET request ( not an ajax request ). knowing that I am using serverSide: true in datatables.
I prepared the backend to receive a request like ( Show All ) but I want that link to be sent by custom button ( Export All ) not by the show process itself as by the picture down because showing all data is not practical at all.
This is the code for the custom button
{
text: "Export All",
action: function (e, dt, node, config) {
// get the backend file here
},
},
So, How could I send a request like the same request sent by ( Show All ) by a custom button, I prepared the server to respond by the CSV file. but I need a way to get the same link to send a get request ( not by ajax ) by the same link that Show All sends?
If you are using serverSide: true that should mean you have too much data to use the default (serverSide: false) - because the browser/DataTables cannot handle the volume. For this reason I would say you should also not try to use the browser to generate a full export - it's going to be too much data (otherwise, why did you choose to use serverSide: true?).
Instead, use a server-side export utility - not DataTables.
But if you still want to pursuse this approach, you can build a custom button which downloads the entire data set to the DataTables (in your browser) and then exports that complete data to Excel.
Full Disclosure:
The following approach is inspired by the following DataTables forum post:
Customizing the data from export buttons
The following approach requires you to have a separate REST endpoint which delivers the entire data set as a JSON response (by contrast, the standard response should only be one page of data for the actual table data display and pagination.)
How you set up this endpoint is up to you (in Laravel, in your case).
Step 1: Create a custom button:
I tested with Excel, but you can do CSV, if you prefer.
buttons: [
{
extend: 'excelHtml5', // or 'csvHtml5'
text: 'All Data to Excel', // or CSV if you prefer
exportOptions: {
customizeData: function (d) {
var exportBody = getDataToExport();
d.body.length = 0;
d.body.push.apply(d.body, exportBody);
}
}
}
],
Step 2: The export function, used by the above button:
function GetDataToExport() {
var jsonResult = $.ajax({
url: '[your_GET_EVERYTHING_url_goes_here]',
success: function (result) {},
async: false
});
var exportBody = jsonResult.responseJSON.data;
return exportBody.map(function (el) {
return Object.keys(el).map(function (key) {
return el[key]
});
});
}
In the above code, my assumption is that the JSON response has the standard DataTables object structure - so, something like:
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
}
]
}
So, it's an object, containing a data array.
The DataTables customizeData function is what controls writing this complete JSON to the Excel file.
Overall, your DataTables code will look something like this:
$(document).ready(function() {
$('#example').DataTable( {
serverSide: true,
dom: 'Brftip',
buttons: [
{
extend: 'excelHtml5',
text: 'All Data to Excel',
exportOptions: {
customizeData: function (d) {
var exportBody = GetDataToExport();
d.body.length = 0;
d.body.push.apply(d.body, exportBody);
}
}
}
],
ajax: {
url: "[your_SINGLE_PAGE_url_goes_here]"
},
"columns": [
{ "title": "ID", "data": "id" },
{ "title": "Name", "data": "name" },
{ "title": "Position", "data": "position" },
{ "title": "Salary", "data": "salary" },
{ "title": "Start Date", "data": "start_date" },
{ "title": "Office", "data": "office" },
{ "title": "Extn.", "data": "extn" }
]
} );
} );
function GetDataToExport() {
var jsonResult = $.ajax({
url: '[your_GET_EVERYTHING_url_goes_here]',
success: function (result) {},
async: false
});
var exportBody = jsonResult.responseJSON.data;
return exportBody.map(function (el) {
return Object.keys(el).map(function (key) {
return el[key]
});
});
}
Just to repeat my initial warning: This is probably a bad idea, if you really needed to use serverSide: true because of the volume of data you have.
Use a server-side export tool instead - I'm sure Laravel/PHP has good support for generating Excel files.
I am trying to call subsequent task once the timer's is over via y timer API call. Per the doc, I have to similar formated code:
timer_request = {
"duration": "PT10S",
"timerLabel": "My Task Timer",
"creationBehavior": {
"displayExperience": {
"visibility": "VISIBLE"
}
},
"triggeringBehavior": {
"operation": {
"type": "LAUNCH_TASK",
"textToConfirm": [{
"locale": "en-US",
"text": "Timer elapsed. Would you like to launch {continueWithSkillName}?"
}],
"task": {
"name": "CountDown",
"version": "1",
}
},
"notificationConfig": {
"playAudible": True
}
}
}
However, as soon as, I change the {continueWithSkillName}to any other name or simply take the brackets out, I run into bad request error. Does anybody why or what shall I do?
If you read farther down in the docs you linked, it says it's mandatory.
** {continueWithSkillName} is mandatory somewhere. This is replaced with "continue with ". **
While it appears you can move it within the string where it appears, it must be part of the string.
I'm using AmCharts4 with Vue.JS,
For the moment I've added default chart design when page loads, But when I trying to add dynamic values after page loads (Using Button click), It doesn't reflect on view.
Code:- gist
data: () => ({
dataForChart: {
data: [{
"name": "Anne",
"steps": 32
}, {
"name": "Rose",
"steps": 30
}, {
"name": "Jane",
"steps": 25
}]
}
}),
chart creation on mounted()
let chart = am4core.create("chart-div", am4charts.XYChart);
chart.data = this.dataForChart.data
when dynamically change values using button click those data doesnt reflect on chart.
method followed to change data set.
this.dataForChart.data = {
data: [{
"name": "Anne",
"steps": 54
}, {
"name": "Rose",
"steps": 44
}, {
"name": "Jane",
"steps": 33
}]
}
The reason for this is that although this.dataForChart.data is reactive (it's a vue instance property) the chart.data (amcharts chart property) is not.
You have to manually set chart.data array values whenever your this.dataForChart.data property changes. I've done this by setting a watcher on this.dataForChart.data like so:
watch: {
dataForChart: {
data(values) {
this.chart.data = values;
},
deep: true
}
}
Cheers!
$('#datatable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "../../WebPost/AjaxPinToFolderSearch",
"data": function (d) {
d.postID = globalPinToFolderSearchID;
},
"columns": [
{ "data": "Folder", "defaultContent": "Value Not Received" },
{ "data": "Pinned", "defaultContent": "Value Not Received" },
{ "data": "StartDate", "defaultContent": "Value Not Received" },
{ "data": "EndDate", "defaultContent": "Value Not Received" }
]
}
});
With example response (taken from developer tools Network Response):
{"data":[{"Folder":"Home/Test One/Frogger","Pinned":false,"StartDate":"\/Date(18000000)\/","EndDate":"\/Date(18000000)\/"}]}
Here is an example showing the error message: http://lektrikpuke-001-site1.ctempurl.com/
Datatables appears to be working correctly in that it is requesting and receiving data. The error pops up, the table displays empty rows (responsive - 1 row of data = 1 row in table, 10 rows of data = 10 blank rows in table). I realize this is a common question, but I cannot figure out what is wrong. As a note, backend is C#.
Minor issue: The columns option shouldn't be a part of the ajax options. Move it out and it'll work without any errors as the DataTable now will receive the correct columns (which in your case was null). I tested it in the console and it worked. Let me know if that doesn't work for you.
I am building a web application using dojox/app, and my config.json file is the following:
{
"id": "app",
"name": "app",
"description": "My app",
"dependencies": [
"commonapp/app",
"commonapp/BaseViewController",
"dojo/store/Memory",
"dojox/app/utils/mvcModel",
"dojox/mvc/EditStoreRefListController",
"dojo/store/Observable"
],
"controllers": [
"dojox/app/controllers/Load",
"dojox/app/controllers/Transition",
"dojox/app/controllers/Layout",
"dojox/app/controllers/HistoryHash"],
"stores": {
},
"models": {
},
"defaultView": "MainTemplate",
"views": {
"MainTemplate": {
"template": "commonapp/templates/MainTemplate.html",
"controller": "commonapp/templates/MainTemplate.js",
"nls": "commonapp/templates/nls/MainTemplate",
"defaultView": "LoginView",
"views": {
"LoginView": {
"template": "commonapp/login/LoginView.html",
"controller": "commonapp/login/LoginView.js",
"nls": "commonapp/login/nls/LoginView"
},
"AppView": {
"template": "commonapp/app/AppView.html",
"controller": "commonapp/app/AppView.js",
"nls": "commonapp/app/nls/AppView",
"views": {
"LeftContainerView": {
"template": "commonapp/app/leftContainer/LeftContainerView.html",
"controller": "commonapp/app/leftContainer/LeftContainerView.js",
"nls": "commonapp/app/leftContainer/nls/LeftContainerView"
},
"RightContainerView": {
"template": "commonapp/app/rightContainer/RightContainerView.html",
"controller": "commonapp/app/rightContainer/RightContainerView.js",
"nls": "commonapp/app/rightContainer/nls/RightContainerView"
}
}
}
}
}
}
}
Everything works fine until I added the LeftContainerView and RightContainerView. In this particular case, I want both views to be active at the same time. The problem is, if I set a default view for either LeftContainerView or RightContainerView, one the default one appears. But, if I programatically trigger events to show both views when the AppView is loaded, one of them will be automatically hidden, and the problem stays.
Basically, the idea is that AppView will have a fixedsplitter, and on each of the panes, I want to place one of the child views. Does anyone have an idea of how can I get both LeftContainerView and RightContainerView active at the same time?
Did you try this way:
"defaultView": "LeftContainerView+RightContainerView"
as indicated in https://dojotoolkit.org/reference-guide/1.9/dojox/app.html#defaultview ?
(Would also be useful to tell the Dojo version you are using.)