Preserve page number in jquery datatable pagination while sorting - javascript

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.

Related

Update existing field in local json file in React Native

I'm working on an app where I have some data stored in the local JSON file. Initially, I'm showing that data using SectionList. And there are some fields to update the values of some fields of that data.
My data looks like this:
{
"title": "Terminal Settings",
"data": [
{ "title": "Keypad", "id": 1, "isSelected": false},
{ "title": "Menu", "id": 2 , "isSelected": false},
{ "title": "Tabs", "id": 3, "isSelected": false},
{ "title": "Mobile", "id": 4, "isSelected": false}
]
},
Now from UI, I want to change the status of isSelected field through the checkbox and also want to change it in the JSON file. So whenever I will access this data it should show isSelected: true.
How to do this? Do I need to use AsyncStorage for this?
I think you will definely have to open and modify the content of your file at some point, so your should need some filesystem. The best would be to simple get your json object with
const myData = require('./myDataJsonFile.json');
then modify it with for example $json[0]['data'][1]['isSelected'] = true
and finally save this in your file, replacing the file content with your $json

Jstree clear search does but keep nodes open

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?

JQuery Datatable Refresh - Unable to receive parameter value on MVC controller side

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

Footable - two values in one cell

I use a Footable table, but I have a problem with values. I need to show in one cell two values.
But i cant add two values.
I use Ajax for loading data
jQuery(function($){
$('.table').footable({
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{"formatter": function(value){
return //I'm thinking this is where the code would go to join the next 3 columns? in the format ##.###.##
}},
{ "name": "PartCategory", "title": "PC" },
{ "name": "PartNumber1", "title": "PN1" },
{ "name": "PartNumber2", "title": "PN2", },
}
],
"rows": $.get('rows.json')
});
});
PartNumber1 and PartNumber2 must be on one cell, but how?
Footable Plugin
Footable Ajax table

ajax call failed with error 502

I'm trying to use DataTable in node.js(Express, EJS) web app. The functionality of this app is to fetch data from google cloud sql and display it in tabular format. The DataTable definition is as follow,
var table = $('#agencytable').DataTable( {
"ajax": {
"url": "listuser",
"dataSrc": ""
},
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "USERID" },
{ "data": "USERNAME" },
{ "data": "CITY" },
{ "data": "STATE" },
{ "data": "COUNTRY" }
],
"order": [[1, 'asc']]
} );
It works fine when I execute on localhost. But, when deployed on google app engine the ajax call to listuser, it fails with error code 502. ON the server it is not calling listener.js. Can anyone tell what might be the issue. I don't have any issue when running locally, only on google app engine it is giving error.
Got the root cause of the issue. it is because of google CE uses app.js on its own. So, the ajax call was failing. When renamed the app.js to appserver.js, it works fine.

Categories