I have an Angular project where I am using datatables but when I am browsing in the table and I am at the page 8 for example and I click another page and click back again to the table it's resetting the pagination and show me the page 1 instead of 8
Please how to fix that?
TS
allDestinations: any[] = [];
dtOptions: DataTables.Settings = {};
ngOnInit(): void {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 25,
processing: true,
};
this._DestinationsService.destinations().subscribe((data) => {
this.allDestinations = data;
});
}
HTML
<table class="table table-bordered table-hover my-5" *ngIf="allDestinations.length > 0" datatable
[dtOptions]="dtOptions">
Can you add more code, like _DestinationsService code... ?
I don't know how you handle your pagination. But surely during your component initialization, it aks to get the first page of your data.
When you go on another page your component with the datable is destroy. And when you go back to your datable it is recreated and reinitialized.
One way to save the current page, it is to store the current page in your _DestinationsService, if it is a global service.
Related
I am trying to toggle a view between grid and list view mode on my frontend HTML page. I am able to do this fine with dom and HTML classes manipulation by toggling "display: none" between two containers. However, when I go to the next product page(through pagination) or when I reload the page, the default view is the one that appears and not the one that was last toggled. Is there a way to persist the view in case a page reload or product pagination changes? thank you.
here is the dom code that achieves this :
viewList.addEventListener('click', function() {
this.classList.add('view__active');
viewGrid.classList.remove('view__active');
gridItem.classList.add('hidden');
listItem.classList.remove('hidden');
});
viewGrid.addEventListener('click', function() {
this.classList.add('view__active');
viewList.classList.remove('view__active');
gridItem.classList.remove('hidden');
listItem.classList.add('hidden');
});
So far I found that I have to use localStorage to achieve this. but is there a better way to do this?
Essentially what is happening is when you request something from the server, the server responds with an HTML document, and whichever scripts associated with that document is run, So whatever JS executed in the first request is not in context when the second request(paginate or reload) is made.
So you need a way to persist information across these page loads, For that, you have 3 options.
Use sessionStorage.
Use localStorage
Use Cookies.
Of the 3 above the easiest would be to use either option 1 or 2.
Replying to your comment,
Also, If I am using localStorage, What am I using to store the view state?
I'm not quite clear as to what you mean by "What you are using to store the state" If your question is about where your data is stored, you need not worry about it as this is handled by the browser. If your question is about "How" to store it you can go through the MDN docs attached in option 1 or 2. This is simply storing a key-value pair as shown in the docs
localStorage.setItem('preferedView', 'grid'); You can add this to your on click handlers as follows,
viewList.addEventListener('click', function() {
this.classList.add('view__active');
viewGrid.classList.remove('view__active');
gridItem.classList.add('hidden');
listItem.classList.remove('hidden');
localStorage.setItem('preferedView', 'grid');
});
viewGrid.addEventListener('click', function() {
this.classList.add('view__active');
viewList.classList.remove('view__active');
gridItem.classList.remove('hidden');
listItem.classList.add('hidden');
localStorage.setItem('preferedView', 'list');
});
Then when loading a new page at the top of your script you can get the users preferedView(if existing) via const preferedView = localStorage.getItem('preferedView');
Here is a complete example from MDN
In order for anyone to find an answer for a similar task, thanks to #Umendra insight, I was able to solve this by using this :
function viewToggeler(viewBtn1, viewBtn2, view1, view2, viewStord) {
viewBtn2.classList.add('view__active');
viewBtn1.classList.remove('view__active');
view1.classList.add('hidden');
view2.classList.remove('hidden');
sessionStorage.setItem('preferedView', viewStord);
}
viewList.addEventListener('click', () => {
viewToggeler(viewGrid, viewList, gridItem, listItem, 'list');
});
viewGrid.addEventListener('click', () => {
viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid');
});
if (sessionStorage.getItem('preferedView') === 'grid') {
viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid');
} else if (sessionStorage.getItem('preferedView') === 'list') {
viewToggeler(viewGrid, viewList, gridItem, listItem, 'list');
}
I ended up using sessionStorage over localStorage because it empties itself on window/tab closing which might be the most desirable result. localStorage persists even after exiting the browser and opening it back.
Also, at any point someone wants to empty the sessionStorage on exit, I used :
window.addEventListener('onbeforeunload', () => {
sessionStorage.removeItem('preferedView');
});
I have a DataTable with FixedHeader option that has the following initialization populated in my $(document).ready function. Both the headerOffset values that are jquery looked-up and hard-coded at 40 have been attempted, with the same results.
"fixedHeader": {
// "headerOffset": $("#top-navbar").outerHeight()
"headerOffset": 40
},
The DataTable is populated from an ajax call and has a series of my own render: functions on half of the columnDefs but I don't think that's related.
I'm not sure why, but the first time the page is loaded, the fixedHeader doesn't follow the top of the screen - but is sitting at the very bottom of the page below the table. When I click refresh - the header works just fine.
Any thoughts?
Thanks in advance.
I had the same problem, and in the absence of a satisfactory solution, my current workaround is to trigger a window resize event that will make the Datatable make rendering recalculations:
table.DataTable({
// ...
drawCallback: function() {
$(window).resize();
}
});
I am having a few problems working with DataTable jQuery plug-in in my project. There are more than 20 tables using DataTable. Below is the javascript placed on every page that are using table with DataTable.
$(document).ready(function() {
pageSetUp();
var responsiveHelper_datatable_fixed_column = undefined;
var breakpointDefinition = {
tablet : 1024,
phone : 480
};
var otable = $('#datatable_fixed_column_GroupEnquiry').DataTable({
"stateSave": true, // saves state using localStorage
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12'<'toolbar'>>r>"+
"t"+
"<'dt-toolbar-footer'<'col-xs-12 col-sm-6 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"autoWidth" : true,
"oLanguage": {
"sSearch": '<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>'
},
"preDrawCallback" : function() {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_datatable_fixed_column) {
responsiveHelper_datatable_fixed_column = new ResponsiveDatatablesHelper($('#datatable_fixed_column_GroupEnquiry'), breakpointDefinition);
}
},
"rowCallback" : function(nRow) {
responsiveHelper_datatable_fixed_column.createExpandIcon(nRow);
},
"drawCallback" : function(oSettings) {
responsiveHelper_datatable_fixed_column.respond();
}
});
otable.state.clear(); //to clear saveState, but only work if the page is load for the second time
// Apply the filter
$("#datatable_fixed_column_GroupEnquiry thead th input[type=text]").on( 'keyup change', function () {
otable
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );
});
Situation
The tables work perfectly with saveState. When user go to specific page (example: page 5), and click on view detail (load new detail page), and click back button (load previous page with table) and the table still stays on the current page (page 5). This is what I want.
Problem
When user clicks on the navigation and redirect to the table, it still loads the table with previous state (which is in page 5) instead of display the 1st page and without any search filter.
Expected result
Supposed when user click on navigation and load table, the table should be display fresh state (on page 1 and without any search filter).
Attempt:
I placed otable.state.clear() as the code provided above, to clean the saveState of the table when user clicked navigation and display table. But it behaves weirdly, it only works on the second clicks on navigation.
I have no idea how actually saveState works and it is necessary to give unique id (#datatable_fixed_column_GroupEnquiry) for each table? I have more than 20 tables in different pages. How to clean saveState on specific button (navigation) and loads a fresh state table.
If anyone else searching for the solution, this helped for me.
I had the case that i wanted to clear the state when I access the dataTable with a link or pressed on refresh.
I put the followed piece of code, above the init of the dataTable inside the $(document).ready()
if (performance.navigation.type != 2){ //checks if page is accessed through a link or refresh
var table = $('#orderHistoryTable').DataTable();
table.state.clear();
table.destroy(); // need to destroy the table, I don't know why..
}
I am using Jquery UI tab plugin.
Here is my DEMO
In my code I use
var tabControl = $("#tabs");
tabControl.tabs();
tabControl.tabs({ heightStyle: "auto",
beforeLoad: function (event, ui) {
},
load: function (event, ui) {
alert(ui.panel.selector);
if (ui.panel.selector == "#ui-tabs-1") {
m1();
} else if (ui.panel.selector == "#ui-tabs-2") {
m2();
}
}
});
When I moved to page 1st time it displays ui-tabs-1 correctly on pop up. But when I moved to some other page and come back and select the tab it shows an increased index (ui-tabs-4) and my desired method is not called. I don't know why my tab index gets increased. Your help is really appreciated.
Edit 1:
Thanks Rahul for creating the Demo. This code is part of a web application. This is related to one single page. In other pages also there are tabs. When I first load the page alert(ui.panel.selector) shows as "#ui-tabs-1" and when I go to other pages and come back it shows increased id such as #ui-tabs-4". I found that in the source code (jquery.ui.tabs.js) I found following implementation.
var tabId = 0,
rhash = /#.*$/;
function getNextTabId() {
return ++tabId;
}
Seems like tabId is increased and not being reset # . I want to reset that # every page load. Thank you very much for concerns.
Edit 2:
I have created a demo. when tabs clicked u get #ui-id-3 and #ui-id-5. In my scenario when I go back and come to the same page it displays as some increased number like #ui-id-7 for which it displayed #ui-id-3 previously.
Thank You!
I'm using the FileStreamResult (or FileResult) method to display a chart on a razor view page (from a Controller action) and this works as expected.
However, I'm wondering if it's possible to display the chart ONLY when an html element is clicked.
e.g. Click on an element, display chart in modal pop-up.
I can get a modal to display using Jquery...but ONLY if I have already loaded the chart into a div.
I'd like to have the page load without the chart (for performance reasons), and then only generate/load the chart when the is clicked.
I guess I need an Ajax call of somekind...but I'm a little stuck as to how to proceed and googling didn't return anything useful (just lightbox for photos)
Pseudo Code:
HTML:
<img src='small chart icon.jpg' alt='click me to see chart' id='showchart'/>
<div>
rest of page goes here...
</div>
C#:
public FileStreamResult GetChart(){
//generate any chart
return FileStreamResult(newchartstream, "image/png");
}
JS:
<script>
$(document).ready(function(){
$('#showchart').click(function(){
//make ajax call to generate chart
//show in modal with "close" button
//OR
//open a new page as a modal?
});
});
</script>
EDIT
Clarification:
Controller generates a ViewModel (from an EF4 model) which contains the results of lots of calculations, and some "summary" rows (totals, averages etc)
View displays the results (ViewModel) as tables.
Requirement:
Click on one of the summary rows, opens modal window displaying a chart for that summary row.
Would like to avoid sendind the parameters for the ViewModel and re-generating it from scratch (doing all the calcs again etc) for two reasons
1) The figures in the back-end db may have changed...so the chart doesn't reflect whats being shown in the tables.
2) It takes time to do the calcs!
I'd also like to ONLY generate the chart if the row is clicked, as opposed to loading the chart always and hide() show() with jquery.
I've thought about an ajax call, but unsure about how to return an image, or how to open a new page.
Can't see a way to pass a complex model in the Url.Action() method.
Think caching may be the best option, and have the click method call "old fashioned" javascript for a new window, passing over the parameters to get the object from cache?
You have many ways to do that, but here is what I would do.
1/ Create an action which returns a tag with the good src (assuming that your controller's name is ChartsController).
public ActionResult GetImage(int chartId = 0)
{
var image = #"<img id='chart' src='" + Url.Action("GetChart", new {controller = "Charts", chartId = chartId}) + #"'/>";
return this.Content(image);
}
2/ I assume that, in your view, you have a div somewhere which contains your modal's content (like jQuery-ui would do) with an img inside, for the chart.
<div id="modal-div">
<div id="chart-div"></div>
</div>
3/ For every row, you have to create an Ajax link who will call your "GetImage" action and replace "chart-div" with your . You can specify a "OnBegin" Javascript function, this is where you will put your code to launch the modal.
#Ajax.ActionLink("Show me the chart!", "GetImage", "User", new { chartId = #Model.Rows[i]}, new AjaxOptions()
{
HttpMethod="GET",
OnBegin = "showModalWindow",
UpdateTargetId="modal-div",
InsertionMode = InsertionMode.Replace
});
Everytime you will click on an Ajax link, the modal will be launched and the inside will be replaced (in fact, all the content of the modal will be replaced).
Don't forget to include "Scripts/jquery.unobtrusive-ajax.js" and "Scripts/jquery.validate.unobtrusive.js" for the Ajax links to work.
You have some difference question mixed in one. You should split them each in one question. For your question's title, -loading an image by AJAX- you can use code-snippet below:
HTML:
<div id="chartholder"></div>
<a id="showchart">Show the chart</a> <!-- or any element else you want to fire show event -->
JS:
$(document).ready(function(){
$("#showchart").click(function(){
// Put your controller and action (and id if presented) below:
var file = "/YourControllerToGetChart/GetChart/id"
$("<img />").attr("src", file).load(function () {
$(this) // the loaded image
.css({"some-css-you-want":"some-value"})
.appendTo($("#chartholder")); // fixed syntax
});
});
});
Let me know if you have any questions or need clarifications on any part or you want to know how to css the div id="chartholder" to display it as an modal. Cheers.