Previous page shown in div, and show last page datatables - javascript

I'm trying to get to the previous page shown in a div. Since I'm opening my pages with ajax in said div, History Back method won't work because there's no history saved on the browser. I'm sure that there's something I can do except making a link that opens the older page (that's what I'm currently doing).
This said, since I move from page_1.php to page_2.php by clicking on a row on datatables, I'm wondering if there's any way I could then reopen page 1, and show the last page the table was clicked on.
I don't know if I should post any code, since I'm just asking if there's a method I may be missing, but I will if you guys need to see what I'm doing.
Thanks in advance.

Set the page variable e.g.
var table = $('#table').DataTable();
var previouspage = 'page_1.php?show='+table.page();
Then load previouspage via ajax and on page_1.php load the page
var table = $('#table').DataTable();
table.page( <?php echo $_get['show']; ?> ).draw( false );
See: https://datatables.net/reference/api/page%28%29

Related

How to use a button to come back to the index, checking the pagination table of a specific ID?

I have this problem: I use Yii2 and, when I go to an index page, I select a view for an element (Example, I go to the page 4, because I want to enter in the view of the element with ID 41, which is at the page 4 because I have the pagination set to 10). This is ok for me but, when I enter in the view, I have this link to come back to the index:
<?= Html::a ( "Back", ['codici/index/','CodiciSearch[IDCodice]='=>$model['IDCodice']], ['class' => 'btn btn-primary']) ?>
Actually, this return to the index, but it show me only the record with the ID that I pass to the link. So, in this case, only the record 41. I want, instead, that the Back button turn to the previous page checking the pagination in which I was, and not only the ID. So, the link must checking the pagination of an ID. I hope to be clear. I don't need a solution like "window.history.go(-1)" because this create a problem if I came to the view by another way. I would to have a specific option: the link must to return to the index and get the pagination of an ID (so, in this ex. case, to the page 4).
I hope to be clear. Thank you in advance!!!!
Here are the solutions I use:
most times I just open the target page in a new tab. That is the simplest solution. If this is acceptable then simply add a parameter to the Html::a options as follows:
Html::a(“text”,[url],[‘target’=>’_blank’]);
Note: if the link is within a Gridview you need to set the format to raw (“format”=>”raw”)
on the index page, pass the pagination number to the new page.
Html::a(“text”,[url, ‘index_pagination’=>5]);
You can then use this in your button
instead of passing the pagination, you can capture the referring page and send the user back:
$url = Yii::$app->request->referrer
This is easy but it can cause challenges if the user reloads the page in which case the referring page is the current page.

Change default view to view the highlighted row of a table instead of from the top?

I have a table that looks like this, built using https://datatables.net/, with around 100 rows or more. The highlighted row is saved whenever users click save and the highlight will stay there when they come back.
I want to default the view to see the highlighted row whenever the page loads. Right now, when I refresh the view comes back to the top of the table, even though the highlight maybe 50 rows below.
Thank you!
I'd recommend using javascript to call datatables' row().scrollTo() method on page load:
$(document).ready(function() {
var table = $('#example').DataTable();
var firstRow = table.rows('.selected')[0];
firstRow.scrollTo(false); //animate: false
});
This code isn't tested and probably won't run, it's just to give you an idea. More about scrollTo() here.

How to restore the state of a table which had been populated with subsequent XHR query

I have a DataTable table which is populated, in the first place, by a XQuery harvesting the whole set of data in my database. Each record has a hyperlink which takes the user to a 'detail' page. When the user goes back from the detail they should find the table as they left it.
The main page with the table also has an advanced search form, from where the user can filter the results. When submitting the form a JavaScript executes another query, this time via XHR, and repopulates the table.
Now, it all goes well with the full-records table (i.e. when the user doesn't action an advanced search). I have also put a stateSave: true option in the initialisation of the table so that when the user comes back from the 'detail' page finds the table as they left it.
The problem starts when an advanced search is carried out. In that case, when going on the 'detail' page and coming back the table is not there any more, so I need to request a new XHR using the parameter I saved in sessionStorage, which is fine. Then, though, I need to put the table as it was. How do I do that? If I add:
var table = $('#mainTable').DataTable();
$('#mainTable').on('page.dt', function () {
var page = table.page();
sessionStorage.setItem('pageTable', page);
table.state.save()
And then use that page for getting the advanced-search-table to the page the user was consulting with table.page(parseInt(page)).draw('page') after the new XHR query triggered by the 'back' button from the 'detail' page the stateSave: true on the full-records-table gets ignored. Also, I'd like to save things like sorting of columns and the like. Is there an easy way to save the current state of the advanced-search table when the user clicks on the hyperlink, and restore the table exactly as it was when the user goes back, without executing a new advanced-search query behind the scenes, or executing and then reinitialise the table with all the parameters (page, sorting, scrolling) active at the moment the user left the main page to go to the detail page?
For some reason I don't feel this has an easy solution. Restoring the full state of the table after a subsequent XHR query seems like a hassle. I've solved by repopulating the table via the server-side XQuery. That way the stateSave: true gets honoured, no matter the content of the table.

keep ajax content after press back button

I have a product page with infinite scroll pagination. More products are loaded with Ajax.
Like this: domain/books.
When the user clicks on a product it will go to the product page: domain/books/the_selected_book.html
When the browser back button is clicked, domain/books loads but not the the Ajax content.
What I'm trying to accomplish is that the previous page loads exactly as the user leaved it and in the same position, when back button is pressed on the new page.
Just like YouTube works.
I have searched the web without finding a good option to do this.
What is the best solution?
window.onbeforeunload = function(){
created_session = window.pageYOffset;
};
and in the product page just add this javascript code after loading ajax content. Also keep a variable that counts how many product loaded from database. For example 5 times new product added (12 for each for example). You should keep this in a session and multiply them 5*12 = 60. You can load the products from database by its limit property.
if (isset? created session)
window.scrollBy(0, created_session for pageYOffSet);

Getting free of scrolling up after submit in Oracle Apex

Good evening to everybody.
At this moment I'm working on a new page for Oracle Apex and again I have trouble with Interactive Report. My page (let it be named 500) consists of Interactive Report with id rep_main and Classic one with id rep_child, which are connected by master-detail logic (I choose the row from the main report and then I get the rows in the child one depending on my choice). Also every row of the main report has several buttons (precisely tags "a" with links like "javascript:..."), which call dialog windows for updating data of the chosen row.
My aim is to make page more comfortable for users: firstly, the chosen row from the main report should change its color; secondly, the reports should refresh correctly. The second condition means, that, after I choose the rown in the main report, the pagination must not change and the view of the page must not scroll up by itself.
I managed to make the master-detail logic and recoloring the rows (thanks to Stack Overflow for helping me with this task) in my IR, but I have some difficulties with the condition of correct refresh. Apart from JavaScript/jQuery functions, I have to call standard Apex function apex.submit, because if I don't do this, pagination of my IR won't save, but at the same time the page scrolls up by itself, which is very unlikely for users. Moreover, the pagination resets after any dialog window appears.
I've tried to find solution in Google, but all is in vain. I hope that somebody knows if there is any workaround in my case (against the scrolling up at least).
I use Oracle Apex 4.2.6.00.03 and application is executed mainly through Mozilla Firefox. The code I wrote for my page 500 is written below in the current post.
On the page load executes the process with PL/SQL lines like this:
:P500_MAIN_ID := APEX_UTIL.GET_NUMERIC_SESSION_STATE(P_ITEM => 'P500_MAIN_ID'); --receiving the chosen row's ID saved in session
The main report region header contains the following script:
<script>
$("#rep_main").find("table.apexir_WORKSHEET_DATA td).live("click",function(){
var chosenOne = $(this).find("span").attr("id"); //finding ID of the chosen row
chooseMAIN(chosenOne);
apex.submit({set:{'P500_MAIN_ID':chosenOne,'P500_CHILD_ID':null}});
});
</script>
In this code P500_CHILD_RN is the item for saving ID of child report's row and the function chooseMAIN is:
function chooseMAIN(docID){
$.post('wwv_flow.show',
{'p_request' : 'APPLICATION_PROCESS=SET_MAIN',
'p_flow_id' : $v('pFlowId'),
'p_flow_step_id' : $v('pFlowStepId'),
'p_instance' : $v('pInstance'),
'x01' : docID},
function(data){
//for the opportunity to get the ID in pure JavaScript
$("#P500_MAIN_ID").val(docID);
$("#P500_CHILD_ID").val("");
$("#rep_main").trigger('apexrefresh');
$("rep_child").trigger('apexrefresh');
}
);
}
The process SET_MAIN looks this way:
begin
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P500_CHILD_ID',P_VALUE => NULL);
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P500_MAIN_ID',P_VALUE => APEX_APPLICATION.G_X01);
end;
p.s. Earlier I asked some help with IR here, but I still haven't found proper solution (except making a submit, which has its side effects I said about).
what you really want to use in this case is the FOEX plug-in because its AJAX based so you don't need to submit.
FOEX website
And do yourself a favor and move away from 4.2 you'll thank me later..

Categories