Develop Reference

How to pass the path of my JSON using JStree? Can I use /create another treeview CRUD?

I'm using Jstree and trying to put my JSON to the code using a method who I created that get the path to the JSON but I don't have any success. Have another way using just ASP.net core to create a CRUD viewtree without using Jstree? If don't have, how can I make it works?
The code:
let data_2 = #Html.Raw(Json.Serialize(Model.texto2));
var teste = decodeURIComponent("#Html.Raw(Model.getFile())");
window.location = teste;
$(document).ready(function (){
//parte do ajax
//fim ajax
var dataJson = JSON.parse(data_2);
$('#html1').jstree(
{
"core": {
"themes": {
"variant": "large"
},
"max_children":2
},
"plugins": ["contextmenu", "dnd", "search",
"state", "types", "wholerow"],
"root": {
"valid_children": ["default"]
}
}
);
$('#html2').jstree(
{
"core": {
"themes": {
"variant": "large"
},
"max_children":2
},
"plugins": ["contextmenu", "dnd", "search",
"state", "types", "wholerow"],
"json_data": {
"ajax": {
"url": "",
"data": function (n) {
return {
id: n.attr ? n.attr("id") : 0
}
}
}
}
);
});
I tried to put my JSON (a simple JSON just to make it works firstly) into JStree to make a CRUD with the framework.
{
"root": {
"branche": "example"
}
}
Update: i finally solved my first problem! but now i have another problem:I need to transform that path (the get file()) into a URL path. How can i do it? The new edit:
$('#html2').jstree // "#Html.Raw(Model.getFile().Replace(#"\", "/"))", <-- the data
(
{
"core": {
"themes": {
"variant": "large"
},
'data':{
type: "POST",
url: "#Html.Raw(Model.getFile().Replace(#"\", "/"))",
contentType: "application/json; charset=utf-8",
success: function (data) {
data.d;
$(data).each(function () {
return { "id": this.id };
});
}
}
}
}
);

DataTable Range Datetime Filter

I've a datatable which i fill with ajax response. In the response i'm getting a string date data. I can write that data on datatable but i can't filter the data with date range. I've try so much way but i can't solve this. some of my trying i get " fnDraw()" is not function or some error like this. how can I make the range filter ?
JavaScrıpt code :
$(document).ready(function () {
var table = $.ajax({
type: "GET",
url: '/History/GetCallbackHistory',
data: { UserId: document.getElementById("callbackuserid").value },
dataType: 'json',
success: function (obj, textstatus) {
$('#callback_table').DataTable({
"pagingType": "input",
"language":
{
"processing": "<div class='loader'>Loading...</div>",
"paginate": {
"previous": "",
"next": ""
},
},
dom: "<'row'<'container-c'pi<'permuheader'<'refresh-button'>><'tlength'l>>>"
+ "<'row'>"
+ "<'row'<'col-sm-12't>r>",
data: obj,
columns: [
{
"data": "Id"
},
{
"data": "DateCallback"
},
{
"data": "callbackId"
},
{
"data": "Task_name"
},
{
"data": "callbackStatus"
},
{
"data": "Point"
},
{
"data": "TransactionType"
},
{
"data": "DateEnd"
}
]
});
},
error: function (obj, textstatus) {
alert(obj.msg);
}
});
$("#datepicker_from").datepicker({
showOn: "button",
buttonImageOnly: false,
"onSelect": function (date) {
minDateFilter = new Date(date).getTime();
table.fnDraw();
}
}).keyup(function () {
minDateFilter = new Date(this.value).getTime();
table.fnDraw();
});
$("#datepicker_to").datepicker({
showOn: "button",
buttonImageOnly: false,
"onSelect": function (date) {
maxDateFilter = new Date(date).getTime();
table.fnDraw();
}
}).keyup(function () {
maxDateFilter = new Date(this.value).getTime();
table.fnDraw();
});
});
$.fn.dataTableExt.afnFiltering.push(
function (oSettings, aData, iDataIndex) {
if (typeof aData._date == 'undefined') {
aData._date = new Date(aData[1]).getTime();
}
if (minDateFilter && !isNaN(minDateFilter)) {
if (aData._date < minDateFilter) {
return false;
}
}
if (maxDateFilter && !isNaN(maxDateFilter)) {
if (aData._date > maxDateFilter) {
return false;
}
}
return true;
}
);

When you use jQuery's ajax like this:
var table = $.ajax({ ... });
You are assigning the jQuery object to your table variable. You are not assigning the DataTable from the success function to the table variable.
This is why, when you try to use table.fnDraw(), you get that specific error: Your table is not a DataTable. The ajax call is asynchronous - it does not return anything from the success call in the normal flow of your code.
Instead, the simplest alternative that I would recommend is to re-arrange your code to use DataTables' built-in support for ajax.
In this new approach we do not need to use the jQuery ajax function at all - so we completely remove that from the code. Instead, we do this:
var table = $('#callback_table').DataTable({
"ajax": {
"method": "GET",
"url": "/History/GetCallbackHistory",
"data": {
UserId: document.getElementById("callbackuserid").value
},
"dataType": "json",
"dataSrc": ""
},
"pagingType": "input",
"language": {
"processing": "<div class='loader'>Loading...</div>",
"paginate": {
"previous": "",
"next": ""
},
},
"dom": "<'row'<'container-c'pi<'permuheader'<'refresh-button'>><'tlength'l>>>" +
"<'row'>" +
"<'row'<'col-sm-12't>r>",
"columns": [{
"data": "Id"
},
{
"data": "DateCallback"
},
{
"data": "callbackId"
},
{
"data": "Task_name"
},
{
"data": "callbackStatus"
},
{
"data": "Point"
},
{
"data": "TransactionType"
},
{
"data": "DateEnd"
}
]
});
The main point to note is the ajax section:
"ajax": {
"method": "GET",
"url": "/History/GetCallbackHistory",
"data": {
UserId: document.getElementById("callbackuserid").value
},
"dataType": "json",
"dataSrc": ""
},
This is a wrapper around the jQuery ajax function. But it also uses a DataTables extension to jQuery's ajax: the dataSrc option. This option replaces your old data: obj option. It tells DataTables that your JSON response is a plain array.
Once you have done this, then your table variable will contain a valid DataTables object - and you can now use table.fnDraw();. But it would be better to use the modern name for this function: table.draw();.
If you have filtering problems, after that, you can refer to the official date range filtering example DataTables date range filter, to make sure your approach matches the example's approach (but using your preferred datepicker controls).

How to multiply Data in Datatables?

How do I multiply Data in Datatables ?
I have Datatables and javascript that look like this:
$('#xxdata').DataTable( {
"destroy": true,
"processing": true,
"ajax": {
url : "xxreport.php",
type : 'GET',
data : {
datedari : SplitRange[0].trim(),
datesampai : SplitRange[1].trim()
}
},
"columns": [
{ "data": "offerName" },
{ "data": "offerCountry" },
{ "data": "visits" },
{ "data": "conversions" },
{ "data": "profit"}
]
} );
I want to multiply data in { "data": "profit"} maybe like
this { "data": "profit" * 0.7}
Can I change data in datatables as I want? Or can anyone give other solutions?
Thank You.

You can use the columns.render option (documented here) to do this.
"columns": [
{ "data": "offerName" },
{ "data": "offerCountry" },
{ "data": "visits" },
{ "data": "conversions" },
{ "data": "profit",
"render": function (data) {
return data * 0.7;
}
}
]
In this case, data in the function signature represents the data for the cell. There are other options that can be passed into the function, but in your case these do not need to be included since this is such a simple operation. See the documentation link if you ever want to expand to a more complicated rendering function

You must add a render to your column, something like this:
{ "data": "profit", "render": renderMyProfit}
and you should have the rendering function declared before you call the .DataTable() function.
var renderMyProfit = function (data, type, row, meta) {
var renderContent = "<div>*</div>";
return renderContent.replace("*", row.profit * 0.7);
};

Convert JSON string to JSON object so I don't need to change in the base jquery.dataTables.js

I'm using ASP.net MVC on the server side. Basically I have a model class, I normally JsonConvert.SerializeObject(DataTableModel) and send it back to datatables.js. After the conversion the json data looks like the following;
"{
"draw":1,
"recordsTotal":2,
"recordsFiltered":2,
"data":[
{"PONumber":"PO 1234","SupplierNumber":"SUP 123","SupplierName":"Supplier 1","ProductDescription":"SUND Salt & Pep Grinder 6/210g","POQuantity":"6","POUOM":"12","BatchQuantity":"18","BatchUOM":"24","ShelfDate":"2016/02/24","ExpireDate":"2016/03/15","CreatedDate":"2016/02/23","CreatedBy":"HORIZON.COM\\mohammadi","POReceiveDate":"2016/02/20","Notes":"Note 1"},
{"PONumber":"PO 1236","SupplierNumber":"SUP 124","SupplierName":"Supplier 2","ProductDescription":"365 Cinnamon Strick Whol 6/36g*","POQuantity":"6","POUOM":"12","BatchQuantity":"18","BatchUOM":"24","ShelfDate":"2016/02/25","ExpireDate":"2016/03/31","CreatedDate":"2016/02/23","CreatedBy":"HORIZON.COM\\mohammadi","POReceiveDate":"2016/02/25","Notes":"Note 2"}
]
}"
It gets the data alright. But if I don't convert it to in jquery.dataTables.js >> _fnBuildAjax.baseAjax >> success into the following (between line 9 - 15) it doesn't show data; gets an error can't find lenght of undefined, which I get.
var baseAjax = {
"data": data,
"success": function (json) {
var error = json.error || json.sError;
if ( error ) {
_fnLog( oSettings, 0, error );
}
var x = JSON.parse(json);
oSettings.json = x;
callback(x);
//oSettings.json = json;
//callback( json );
},
"dataType": "json",
"cache": false,
"type": oSettings.sServerMethod,
"error": function (xhr, error, thrown) {
var ret = _fnCallbackFire( oSettings, null, 'xhr', [oSettings, null, oSettings.jqXHR] );
if ( $.inArray( true, ret ) === -1 ) {
if ( error == "parsererror" ) {
_fnLog( oSettings, 0, 'Invalid JSON response', 1 );
}
else if ( xhr.readyState === 4 ) {
_fnLog( oSettings, 0, 'Ajax error', 7 );
}
}
_fnProcessingDisplay( oSettings, false );
}
};
Following are my js code binding with datatables.
var table = $('#example').DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": "/Home/GetDateLogData",
"type": "POST"
},
"columns": [
{ "data": "PONumber" },
{ "data": "SupplierNumber" },
{ "data": "SupplierName" },
{ "data": "ProductDescription" },
{ "data": "POQuantity" },
{ "data": "POUOM" },
{ "data": "BatchQuantity" },
{ "data": "BatchUOM" },
{ "data": "ShelfDate" },
{ "data": "ExpireDate" },
{ "data": "CreatedDate" },
{ "data": "CreatedBy" },
{ "data": "POReceiveDate" },
{ "data": "Notes" }
]
});
In the ajax part I've tried with dataSrc as well, didn't work.
"dataSrc": function ( json ) {
var x = JSON.parse(json);
return x;
},
My question, is there any builtin extender to do that, or perhaps how can I make a prototype like thing for this? I thank you in advance.

This is exactly the purpose of dataSrc. It is not working because you are expected to return an array of items, i.e data :
dataSrc: function ( json ) {
json = JSON.parse(json);
return json.data;
},
PS: Why "type": "POST"?

jquery Datatables using JSON

I am using datatables jQuery plugin to show the data nicely withing a table. I am making an ajax request on a click of a button which is then running a php script returning a JSON.
Here's how my code:
$('#searchInSugar').button().on('click', function (e) {
var searchTxt = $('#searchEntry').val();
var moduleName = $('#moduleSelect').val();
if (!searchTxt.trim() || searchTxt.length === 0) {
alert("Please provide some search text string..");
return false;
}
if (moduleName === "select") {
alert("Please select a module..");
return false;
}
$.ajax({
type: 'POST',
url: "fetch_records.php",
data: {"searchText": searchTxt,
"module": moduleName},
success: function (data) {
obj = JSON.parse(data);
$(document).ready(function () {
$('#dialog_entry_table').DataTable({
"info": false,
data: data,
columns: [
{"records": "id"},
{"records": "name"},
{"records": "account_name"}
]
});
});
},
error: function (exception) {
alert('Exeption:' + exception);
}
});
});
Here's the json that I get from the php script.
{
"next_offset":-1,
"records":[
{
"id":"a54e81f8-72b2-ae9b-d526-5608761a28e8",
"name":"Mr. James Smith",
"date_modified":"2015-09-27T23:52:29+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"b8ec2e0a-ade1-f70f-d722-56098e5c4370",
"name":"james bond",
"date_modified":"2015-09-28T22:50:56+00:00",
"account_name":"",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
},
{
"id":"4de93888-155c-7e59-9c4b-56058f1b7ce9",
"name":"Mr. James Bond",
"date_modified":"2015-09-28T01:50:49+00:00",
"account_name":"OSSG",
"_acl":{
"fields":{
}
},
"_module":"Contacts"
}
]
}
Now, I ONLY WANT TO SHOW id, name and account_name IN THE TABLE, But I am having a hard time achieving this, could someone help/advise what I am doing wrong here.
This is the error I am getting:

Try:
var dt = [];
$.each(data.records,function(i,v) {
dt.push([v.id,v.name,v.account_name]);
});
$('#dialog_entry_table').DataTable({
"info": false,
data: dt,
columns: [
{"title": "id"},
{"title": "name"},
{"title": "account_name"}
]
});
jsfiddle: https://jsfiddle.net/bwqfq2gr/1/