I initially had a simple jstree where all data was loaded at initialization.
$("#tree").jstree().search(searchString)
and
$("#tree").jstree("clear_search")
was working perfectly fine.
Now I have larger tree with lazy loading. My tree configuration is as follows
{
"core": {
"check_callback": true,
"loaded_state": true,
"data": {
"url": "http://x.x.x.x:9000/yang/loadOneLevel",
"dataType": "json"
},
"worker": false
},
"plugins": [
"massload",
"search",
"state"
],
"massload": {
"method": "post",
"url": "http://x.x.x.x:9000/yang/massLoadTree",
"dataType": "json"
},
"search": {
"ajax": {
"url": "http://x.x.x.x:9000/yang/searchTree",
"dataType": "json"
}
}
}
Now I perform search and clear as follows
$("#tree").jstree('search', searchString, false, false,[],false);
$("#tree").jstree("clear_search");
The search results are showing up fine. However, on clearing search, the nodes which opened to show search results close off.
Is there a way to keep all nodes open and just remove the css added for search matches?
Related
Trying to pass some parameters in JQuery Datatables, its working fine on init.
But when I try to refresh the datatable the values are received as empty on controller side.
Here is the code:
$("#SearchResultsTable").DataTable({
"processing": true,
"serverSide": true,
"bLengthChange": false,
"filter": false,
"pageLength": #Model.PageSize,
"orderMulti": false,
"ajax": {
"url": "/Request/SearchRequest",
"type": "POST",
"datatype": "json",
"data": {
"Date_To": document.getElementById("Date_To").value,
"Date_From": document.getElementById("Date_From").value
}
},
"columns": [
{ "data": "ABC", "name": "ABC", "autoWidth": true },
{ "data": "DEF", "name": "DEF", "autoWidth": true }
]
});
Refresh Datatable:
$("#Search_Btn").click(function () {
$("#SearchResultsTable").DataTable().clear();
$("#SearchResultsTable").DataTable().draw();
});
Also tried:
$("#Search_Btn").click(function () {
var table = $('#SearchResultsTable').DataTable();
table.ajax.reload();
});
I would like to refresh the table in such a way the updated vales of 'Date_To' & 'Date_From' are available on controller side.
You will need to pass the parameters via jquery datatable like below:
"data": function (data) {
data.Date_To = document.getElementById("Date_To").value;
data.Date_From = document.getElementById("Date_From").value;
}
Please take a look at the following tutorial for more details
https://www.codeproject.com/Articles/1170086/Grid-with-Server-Side-Advanced-Search-using-JQuery
I am using jsTree as a navigator for the user to select different items which display in another pane. So far everything is working as expected except if the user (from the other pane) selects an item that hasn't been loaded into the tree yet.
The Tree is currently getting all of its data from AJAX.
I have tried using the open_node() and load_node() functions but they have no effect if the parent node is not loaded.
My question: is it possible to load, then select a child node if the parent node is unknown to the tree? If not, are there any workarounds to achieve a similar effect?
EDIT:
Tree initializer:
$('#jsTree-Location').jstree({
"core": {
"animation": 0,
"check_callback": true,
"themes": {
"stripes": true,
"icons": true
},
"data": {
'url': '#Url.Action("LocationList", "Location")',
'type': 'GET',
'dataType': 'JSON',
'contentType': 'application/json',
'data': function (node) {
return { sID: node.id, sType: node.type };
}
}
},
"json_data": {},
"plugins": [
"contextmenu", "dnd", "search",
"state", "wholerow", "types"
],
"state": { "key": "system" },
"contextmenu": { items: customMenu },
"types": {
"default": {
"icon": "glyphicon glyphicon-flash"
},
"location": {
"icon": "fas fa-map-marker-alt"
},
"asset": {
"icon": "fa fa-cube"
},
"link": {
"icon": "fa fa-cube"
},
"system": {
"icon": "fas fa-cogs"
}
}
}})
Function called when user 'externally' selects a node
function DisplayAsset(id) {
ShowSpinner($("#window"), "Loading Asset...");
//If Location Tree is active, activate the Asset in it.
var sysTree = $('#jsTree-Location').jstree().get_selected()[0]
if (typeof sysTree !== "undefined") {
$("#jsTree-Location").jstree().open_node(['#asset-' + id, '#link-' + id], function (node, status) {
if (status) {
$("#jsTree-Location").jstree().activate_node(node)
}
})
}
//AJAX call to get Asset partial display
$.ajax({
url: '/Assets/_AssetEdit/',
type: 'GET',
data: {
'id': id
},
success: function (html) {
HideSpinner($("#window"));
$("#window").html(html)
BuildTable();
}
})
}
I have implemented a jquery datatable in asp mvc. The records are being fetched correctly, and the sorting working correctly. The data table operates via the server side.
However, I encountered a small issue. When I am on page 3 of the datatable, I perform a sorting but the datable refreshes, returns to page 1 and only sorts records on page 1. What I want to achieve is to make sorting only on the current page that I am.
I have tried making the stateSave to true like: But the issue persists.
var table = $('#employeetable').DataTable({
"ajax": {
"url": "/Employee/GetList",
"type": "POST",
"datatype": "json"
},
"columns": [
{ "data": "Name", "name": "Name" },
{ "data": "Office", "name": "Office" },
{ "data": "Position", "name": "Position" },
{ "data": "Age", "name": "Age" },
{ "data": "Salary", "name": "Salary" },
],
"serverSide": true,
"order": [0, "asc"],
"processing": true,
"stateSave": true
});
Can someone please help to resolve this ?
When you sort with DataTables, you sort the entire data set, not just the visible values. So any change in the sort order, would naturally be a new list, so would return you to page 1. It's not possible to just search within the current page, thereby keeping the pagination identical. See this thread here, where more details are given as to why this isn't (and shouldn't be) possible.
I am using Datatable to render a table. The code is -
var nextPage;
$(document).ready(function() {
$('#table').DataTable( {
"processing": true,
"ordering": false,
"serverSide": true,
"sorting":false,
"paging": true,
"pageLength":20,
"lengthChange" :false,
"pagingType":"simple",
"ajax": function (data, callback, settings) {
data.nextPage=document.getElementById("nextPage").value
$.ajax({url: "get/list", data: data, success: function(result){
document.getElementById("nextPage").value=result.nextPage;
callback(result);
}});
},
"columns": [
{ "data": "first_name" },
{ "data": "title" },
{ "data": "first_name" },
{ "data": "first_name" },
{ "data": "first_name" },
{ "data": "first_name" },
{ "data": "work_email" }
]
});
});
The first page loads fine when I open the page, but the second page keeps on loading. The /get/list API call succeeds for the second page but the data is not rendered on the browser and loading icon keeps on rotating.
I have saved checked nodes in cookies with this code:
$.cookie('q_cats', $("#category-tree").jstree("get_checked"), { expires: 7 });
I am loading my tree with this code:
$('#category-tree').jstree({
"plugins": ["wholerow", "checkbox", "search"],
"core": {
"themes": {
"responsive": false
},
"data": {
"url": "/blogs/get_cats/",
"dataType": "json"
}
}
});
I don't know how can check saved nodes in my tree
Why don't you use the state plugin - it does exactly that - restore state across refreshes / reloads. Just look it up, all you need to do is add a string to your config (plugins section):
$('#category-tree').jstree({
"plugins": ["wholerow", "checkbox", "search", "state"],
"core": {
"themes": {
"responsive": false
},
"data": {
"url": "/blogs/get_cats/",
"dataType": "json"
}
}
});